下面进行具体修改
一,首先是准备下工具 比如取色器,做图软件 (比如PS什么的。。)
我喜欢用一个小的做图软件,如 Ulead GIF Animator 5 也可以当成取色工具
在做个效果图
二。效果图出来了,那么让我们先把图片截取一个一个加进风格吧
建议下个官方源码包,然后把 images/wind拿出来,把里面的图片一个一个替换成你要的
(我就用官方默认风格wind修改过来吧)
1,先定下整体背景,背景颜色,在后台风格编辑里 找到 全局背景颜色: 填写背景颜色 #FDFDFD
然后确认,更新后,在下面的 css处加上要加的背景图片(把背景图名字定位为 bg.gif )
修改后 body的样式就是这个样子(要想整体非连接字的颜色调整的话可以在里面加上 color:颜色代码)
body{font-family:Tahoma;font-size:12px;background:$bgcolor url($imgpath/$stylepath/bg.gif) repeat-x;}
如果背景图太大,想要固定住,可以在里面加 background-attachment:fixed;
2,背景搞定了,那接下来从头部向下修改,当然你也可以从其他地方开始,看个人喜好
头部导航,头部导航的样式代码是 .toptool 找到他 依照加整体背景的方法,加上对应的背景图名称,名字随便定,我自己定的就是 top01.gif
.toptool{background:$cbgcolor url($imgpath/$stylepath/top01.gif) repeat-x;padding-top:5px;}
如果导航里的字太靠上面了,你可以在里面加上 padding-top:5px; 5px是高度,可以自定义
3,然后再往下,logo整个头部的背景怎么加,很简单的一个方式是 打开template/风格名/header.htm文件,用记事本打开,搜索 logo.png 找到上面的 <table cellspacing="0" cellpadding="0" align="center" width="100%"> 在里面加上 background="$imgpath/$stylepath/topbg.gif" topbg.gif可以自定义
然后再加上 height="120px" 图片高度 120px自定义
4,到logo下导航了 就是 社区服务那了
官方定义的样式是
.guide 同样在后台风格编辑CSS那可以找到 对应此栏,我定义的图片是 top02.gif
所以修改后的样式是
.guide{background:$cbgcolor url($imgpath/$stylepath/top02.gif) 0 0 repeat-x; padding:.5em; border:1px solid $cbgborder; color:#ccc}
如果想要决定此栏目连接字体的颜色
那么可以在这段样式下加 .guide a{color:颜色代码}
5,到首页用户信息栏了,样式对应代码 #infobox
我加上自己设置的图片 top03.gif
修改后的样式:#infobox{border:$tdcolor 1px solid;margin-top:-.8em;background:$tablecolor url($imgpath/$stylepath/top03.gif) repeat-x; }
border:$tdcolor 1px solid; 这是信息栏边框颜色以及样式代码,可以在上帖里找代码替换
如果想换成虚线框,把solid 替换成dotted 其他通理 1px是线宽度大小
#notice 是公告栏样式,因为#infobox包括了公告栏,所以可以不加图,直接在信息栏图的里面加样式
官方在#notice 里加的图片是个小图标 可以增加细节美化
要修改公告栏里的字体颜色 在 #notice a里的 color:#fff;
6.到 表格标题栏 了,如果不想加图的话可以 在 .h里去掉改后样式是
.h{border-bottom:1px solid $headborder;background:$headcolor;text-align:left;color:$headfontone;padding:.5em .4em}(根据官方wind改)
然后颜色就可以在上面的 栏目里修改
相对应的栏目是
表格标题栏颜色:
表格标题栏下边框颜色:
标题栏主要字体链接颜色:
标题栏次要字体链接颜色:
7,表格副标题栏
样式是 .tr2 修改方法同上面的一样
8,在线用户这栏样式是 .tr4 建议样式设置成跟.h一样,如果是其他样式,建议加 .tr4 a{color:颜色代码}
因为控制面版里栏目就是用 .tr4样式,但是没有连接字体样式,所以需要加下
三,取色
接着就是整体字体颜色了,大家可以用 Ulead GIF Animator 5 取色 试试,然后再调整
图里的 hex 就是颜色样式
那么就是整体出来了,接下来就是细节图片替换问题了
再修改 data/style/wind.php 通过 ftp下载 用记事本打开
$stylepath = 'wind';
$tplpath = 'wind';
当然后台风格编辑处也可以
Quote:此风格在image目录下的文件夹名称:
此风格在template目录下的风格文件夹名称:
然后把images/wind的目录下载 名字修改成你对应的名字
template同理
然后整合成一个风格包
data/style/风格名.php data/style/风格名_css.htm
images/风格名
template/风格名