(由 @ 猫尾草 于 2018-8-7 发布于旧版论坛,感谢ta的文章分享!)
GitHub 项目地址:https://github.com/yu2n/kod-theme
KOD 主题 DIY - 简雅风格,加载迅速
Diy theme for KOD Explorer v4.32
kod4.32_theme_diy, yu2n, 2018.08.05
成品快速安装步骤
下载成品主题
- 从 releases 下载 kod4.32_theme20180806.zip 。
安装成品主题
- 将 kod4.32_theme20180806.zip 上传至 KOD Explorer 的安装目录。
例如:/var/www/html/kod/kod4.32_theme20180806.zip
- 解压 kod4.32_theme20180806.zip 到当前目录即可。
手动修改步骤
一、修改登陆
样式 (index.php?user/login)
1. 修改登陆窗口图标
顏色
1.1 打开 /static/style/login.css
,作以下修改:
- 查找所有
#aaddff
替換為 #f0f0f0
- 查找所有
#14A1FF
替換為 #F0F0F0
* Line 79, .title .logo{
* text-shadow: 2px 2px 2px rgba(200,200,200,0.5);
* Line 80, .title .logo{
* -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(200,200,200,0.1), rgba(200,200,200,0.7));
* Line 81, .title .logo{
* background-image: -webkit-linear-gradient(92deg,#FFFFFF,#F0F0F0);
* Line 86, .title .logo i{
* color: #f0f0f0;
* -webkit-text-fill-color:#f0f0f0;
* Line 87, .title .info{
* color: #f0f0f0;
* Line 523, .dialog-copyright .dialog-copyright-content .title .logo i{
* color: #f0f0f0
* Line 527, .dialog-copyright .dialog-copyright-content .title .info{
* color: #f0f0f0;
2. 修改登陆窗口標題
背景
2.1 打开 /static/style/login.css
,作以下修改:
* Line 74, .title{
* background:rgba(200,200,200,0.7) url(./../../static/images/wall_page/bg-fixed.png);background-repeat:repeat;background-size:auto;
3. 修改登陆窗口图标顏色(移动端):
3.1 打开 /static/style/wap/login.css
,作以下修改:
4. 修改登陆窗口
背景图片动态数字雨效果
4.1 打开 /app/template/user/login.html
,作以下修改:
- 在第 13 行与 14 行之间插入以下代码:
<canvas id="q" style="position: absolute;z-index: -1;"></canvas>
<script>
var width = q.width = q.parentNode.clientWidth;
var height = q.height = q.parentNode.clientHeight;
var letters = Array(Math.floor(width/10) + 2).join(1).split('');
var draw = function () {
q.getContext('2d').fillStyle = 'rgba(128,128,128,.05)';
q.getContext('2d').fillRect(0, 0, width, height);
q.getContext('2d').fillStyle = '#fff';
letters.map(function (y_pos, index) {
text = String.fromCharCode(/*3e4*/ 48 + Math.random() * 2);
x_pos = index * 10;
q.getContext('2d').fillText(text, x_pos, y_pos);
letters[index] = (y_pos > (Math.random() * 4 + 1) * height) ? 0 : y_pos + 10;
});
};
for (var i=0;i<=(height*2.5)/10;i++){draw()};
setInterval(draw, 100);
</script>
5. 修改登陆界面
背景图片为固定纯色背景
5.1 打开 /app/template/common/header.html
,作以下修改:
- 在第 34 行与 35 行之间插入以下代码:
$background = 'linear-gradient(180deg, #f0f0f0, #c0c0c0)';
或者平铺的格子图片背景
$background = 'linear-gradient(180deg, #c0f0f0, #404040);background:rgba(240,240,240,0.5) url(./static/images/wall_page/bg.png);background-repeat:repeat;background-size:auto;';
二、修改桌面
样式 (index.php?desktop)
1. 修改桌面背景)图片为固定纯色背景
1.1 打开 /app/template/desktop/index.html
,作以下修改:
- 修改第 8 行代码为如下:
<!-- #### <?php echo '<style >.aero:before,.aero:after,.full-background-wall{background-image:url('.$wall.')}</style>';?> #### -->
<?php echo '<style >.aero:before,.aero:after,.full-background-wall{background-image:linear-gradient(160deg, #c0e0f0, #4060a0);}</style>';?>
2.隱藏桌面风车图标(随机桌面壁纸)
2.1 打开 /static/style/skin/base/app_desktop.css
,作以下修改:
<完>