ThinkSNS模板开发教程一
查看全部词条命名空间:Main
导航: 上一页
模板文件的存放路径以及修改文件:目录public\themes 文件layout.css public.css 和images 文件夹下的图片.
大家自己制作模板的时候可以利用Firefox的一些插件(如:Firebug 和webdeveloper)来进行辅助制作.
以下是制作步骤:
首先到public\themes 这个目录下,在以有的目录里把现有的皮肤包复制一份;比如把default 复制一份然后重命名为style01 然后打开你事先做好的皮肤图片.
以下我就以这版为例:
这是以做好的效果图,首先用PS 打开,把需要的部份都用PS 处理好,我们先上传你刚建设的皮肤包,然后登录网站后台把模板换成你刚建的文件夹,
- .我们首来做头部
头部只用这一张图片即可, logo 也可以是单独的,这都可以。找到以下样式并修改:
public.css
body { background-color:#000; font:12px Arial, Verdana, Helvetica, sans-serif; textalign:
center; color:#333; background-image: url(images/body_bg.jpg); backgroundrepeat:
no-repeat; background-position: center top; height:100%; }
Layout.css
找到.header .logo a 的样式改为
.header .logo a { height: 80px; width: 160px;
display: block; text-decoration: none; }
.header .logo a { height: 80px; width: 160px; display: block; text-decoration: none; }
.header .logo a:hover { height: 80px; width: 160px; display: block; text-decoration:
none; }
.header .nav { margin-left: 150px; padding-top: 38px; }
.header .nav ul li.on a.fb14 { color: #333; white-space: nowrap; font-size: 14px;
padding: 0px 18px 0px 14px; display: block; }
.header .nav ul li a.fb14 { color:#333; white-space:nowrap; padding: 0px 20px 0px
16px; display: block; }
.header .nav ul li.on .dropmenu { background: #FFF url(images/dropmenu_bg.gif) norepeat
left top; z-index: 9000; top: 30px; left: -2px; position: absolute; width: 110px;
text-align: left; padding-bottom: 5px; border-top-width: 0px; border-right-width: 2px;
border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; borderright-
style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color:
#6bafd4; border-right-color: #6bafd4; border-bottom-color: #6bafd4; border-left-color:
#6bafd4; visibility: visible; font-size: 12px; }
.header .nav_sub { position:absolute; white-space:nowrap; color:#666; right:10px;
top:15px; }
.header .nav_sub a { color:#666; }
头部样式修改完毕.