ThinkSNS模板开发教程一

导航: 上一页

模板文件的存放路径以及修改文件：目录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; }

头部样式修改完毕.

参考资料

• 参考来源