虚位以待(AD)
虚位以待(AD)
首页 > CMS教程 > Phpwind > phpwind官方个人中心风格制作教程

phpwind官方个人中心风格制作教程
类别:Phpwind   作者:码皇   来源:互联网   点击:

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 里,然后再到后台添加下中文名在前台就可以显示了。
相关热词搜索: phpwind官方个人中心风格制作教程