CaliCastleMusic 2015-08-18 23:48 发布这个教学会手把手教你修改【顶部】【底部】的样式
首先要了解 TS 结构组成文件
一个页面是由很多 parts 结合到一起组成你最后看到的这个完整的 html
但是全站的顶部导航与底部是始终存在的，存放目录位于: 根目录/addons/theme/stv1/中。
我们现在打开目录中的_header.html
如上图所示，第10，11行为网站图标，可自定义路径;
1.在图中19行位置添加该行：
< link rel="stylesheet" href="http://ts.calicastle.com/addons/theme/stv1/_static/css/custom.css?v={$site.sys_version}" type="text/css">
作用是添加链接到 custom.css 并且优先级最高。（后面的?v={$site.sys_version}是用来提示刷新用户缓存的，可修改样式以后前往后台的系统设置更改『JS 版本号』刷新静态文件缓存）
2. 在_header.html 的目录下进入_static/css/内，创建 custom.css 保存
加入上面的css语句，或复制：
/*
* 网站背景
*/
#body-bg {
background: url('') no-repeat #FFF; //这里可以写 url 图片地址或者纯色(去掉 url())
background-size: cover
}
/*
* 顶部导航背景色+阴影+去底边
*/
#header .header-wrap{
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.4);
background: #313131;
border: none
}
/*
* 顶部『选中后』的导航菜单字体色与下边界
*/
#header .head-bd .nav .current a.app{
color: #EE2;
border-bottom: #EE2 4px solid
}
/*
* 顶部导航菜单其他字体色
*/
#header .head-bd .nav li a {
color:#EEE
}
/*
* 顶部导航菜单的鼠标悬浮hover效果
*/
#header .head-bd .nav li a:hover {
border-bottom:#CCC 4px solid
}
/*
* 顶部菜单右侧的图标去除分割线
*/
#header .head-bd .person ul li {
border:none
}
现在你能看出来这么做跟直接去 global.css 里去修改原来的属性比哪个好么？
加入以后 TS 更新在 global.css 加多了几行那么你去覆盖就会导致更新的样式失效
所以我们只『覆盖』，不『修改』，后者是毁灭性的操作不推荐。
而且这么做了以后改写自己也看的直观方便。
PS. 以后 TS 更新后，只需覆盖_header.html 即可
OK，我们继续添加：
或复制：
/*
* 页底背景色+字体色
*/
.footer-wrap {
color:#EEE;
background:#313131
}
/*
* 页底导航菜单字体色
*/
.login-footer .foot a {
color: #c2665d
}
/*
* 页底微博关注去边框+背景色
*/
.footer .attend-official dt a {
background: #c2c0af;
border: none
}
/*
* 页底二维码去边框
*/
.footer .attend-official dd {
border: none
}
现在基本上都更改成功啦！如果还想更改搜索框的样式的话继续修改：
或复制：
/*
* 页顶搜索框样式
*/
#header .head-bd .search {
background: #313131;
border: none
}
.head-bd #mod-search .s-txt {
background: transparent;
color: #eee;
padding: 7px 15px 6px;
border: none;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-moz-transition: all ease-in-out .3s;
}
/*
* 页顶搜索框焦点状态
*/
.head-bd #mod-search .s-txt:focus {
box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.5)
}
这样基本上就都大功告成啦！
有 css 能力的可以修改任何属性，这次就到这里
