|
|
|
phpwind官方个人中心风格制作教程
phpwind模板个人中心的风格制作一直没有和大家交流过
也有很多的同学对这块的内容比较感兴趣吧。
看完下面的教程，大家会发现原来自己修改个人中心的风格一点不难
个人中心风格设计说明
背景设计由头部背景图和背景色组成，建议背景设计用二种方式：一种是头部图设计成循环背景和下半部颜色结合的，一种是大背景图与整体颜色融合的。在任何分辨率下都能达到很好的效果。
主体部分设计只要修改上面的2像素线条，右侧背景与整体风格相搭配，其他文字链修改与风格相配的颜色就可以了。
新鲜事输入区域根据相应的背景风格来设计，建议颜色用浅色调。
个人中心模板制作
1.个人中心风格体系说明
a) 个人中心风格体系成员：个人中心首页、我的主页、消息、任务、道具、设置。所以，做一套风格，体系内的所有界面都会跟着改变。
b) 目录结构，风格所在目录u/themes 其中一个文件夹为一个风格，一个风格里面的必要元素有：images图片目录 css.htm 的层叠式样式表，页面htm为可选文件，如果本目录里没有，则调用default的，有着使用本目录的。
2.个人中心风格制作步骤
a) 你要有新风格的效果图，或者仿制的对象。
b) 找到一个已有的风格，如default,复制一个，把里面除css.htm外其他htm文件删除。
c) 修改文件夹名称，改成你需要的风格名，如blue
d) 打开文件夹里面的images，我们会发现有一些图片，非常少，所以很容易分辨出
作用
i. head_bg.jpg 整个风格头循环的背景
ii. head_pic.png 风格头部的点缀
iii. inforbox.jpg 发布新鲜事的背景
iv. textarea.png 发布新鲜事的输入框
v. pub.png 发布新鲜事按钮
vi. preview.jpg 风格效果图，大小推荐与已有尺寸一样，400×80
vii. homebg.png 首页右侧栏背景
viii. menubar.png 设置等左侧栏背景
ix. navBcur.png 左侧了激活效果
x. navC.png 应用中的tab效果
xi. logo.png 风格的logo，根据自己的需求调整
e) 我们先要做的就是，弄出相关的图片，替换上面的图片，如背景，侧栏等。
f) 把风格复制到本地测试环境上，到后台进行添加中文名。
g) 再到前台我的主页=》空间装扮=》风格皮肤，我们会发现新添加的已经出现了，进行下选择
h) 选择一下，即会显示之前已经替换图片产生的效果
i) 图片已经出来了，那么我们就可以调整细节问题了。
j) 用编辑器打开css.htm
k) 只有调整这里的颜色参数那么，整个风格也会跟着变整个风格就会调整起来了。
l) 但是参数也不是万能的，因为每个风格都有非常个性话的需求，如顶部导航，我的主页导航，2处虽然用透明图片来处理了，但是在深色调上还是会有些问题，所以我们需要单独添加样式来进行处理，顶部导航，因为深色背景，所以灰色的链接颜色会跟背景不搭调，这里我添加了几段代码，用于处理这个问题
i. .topwarp{background:url(u/themes/$uskin/images/top_bar.png)no-repeat;}顶部导航背景替换到风格包里，就是说在这个风格包里增加图片top_bar.png的图片，为png24半透明效果。
ii. .topwarp i{background:#65a0bc;} 顶部导航竖线的颜色
iii. .topwarp a{color:#7fcef4;} 顶部导航文字链接颜色
iv. .navA li a{color:#7fcef4;} 我的主页导航文字颜色
v. .navA{background:none;} 去除背景
vi. .navAul{background:url(u/themes/$uskin/images/top_bar.png) no-repeat;} 使用跟顶部通一张图，不用再重复。
vii. .place{background:url(u/themes/$uskin/images/place.png);}处理个人空间首页头部的那个半透明图片。
viii. .place a.s5{color:#fff;} 里面的颜色
m) 这样效果就出来了
n) 感觉月亮太干扰了，又处理了下，把它去掉了，效果如下
o) 内容区域的颜色都是比较白搭的，所以不用进行处理，整个风格看起来就很ok了～
p) 如果要分享，那直接把目录复制出来，安装步骤也是一样，直接复制到论坛根目录u/themes 里，然后再到后台添加下中文名在前台就可以显示了。 |
|
发表于 2018-5-21 09:43:00
