ThinkSNS模板开发说明文档

1、 智士软件(北京有限公司ThinkSNS 模板开发说明文档 目录1模板编辑工具 (32模板对应文件及相关文件 (32.1如何查找模板对应文件 (32.2如何查找模板对应样式表 (43模块样式调整 (53.1背景修改 (53.2LOGO修改 (63.3导航修改 (73.4页脚修改 (83.5页头修改 (93.6图标修改 (103.7按钮修改 (124首页 (134.1左侧修改 (134.2右侧修改 (145应用修改 (135.1招贴板 (13 5.2日志 (135.3相册 (135.4活动 (135.5投票 (135.6礼物 (135.7群组 (135.8大屏幕 (135.9开发者平台 (135

2、.10掌上微博 (136漫游修改 (137换肤 (138Public目录结构及相关文件 (13 1模板编辑工具高手跳过,模板编辑工具多之又多,列出大家常用的。记事本、Editplus、Adobe Dreamweaver 、notepad+,现在大家用的最火还是Sublime Text 2。火狐的firebug插件是最给力的样式修改工具。2模板对应文件及相关文件2.1如何查找模板对应文件Public/themes/xxxxx 其中的xxxxx 就是某一套模板,如,系统一般会自带的模板文件名叫做default,(即,Public/themes/newstyle 里面放的就是安装时的默认模板注:每个

3、应用有自己的样式文件如日志apps/blog/Tpl/default/Public/bl og.css 1.应用独立根目录apps/应用文件夹如:apps/photo相册应用2.核心文件存放单独风格包文件夹下,根目录下public/ themes/风格包文件夹如:public/ themes/newstylepublic/ themes/weibopublic/ themes/classic23.对应页面查找如果风格是三栏: 根目录下public/themes/newstyle/apps/home/Public/login.html2.2如何查找模板对应样式表接下来我们进入newstyle目录

4、,可以看到以下文件目录:找到这几个文件,这些是与模板修改密切相关的其它的可以不用管: images (存放模板中用到的图片apps.html (网站左侧用户信息和应用header.html (网站头部内容footer.html (网站底部内容main.css (模板样式调用文件 layout.css (框架模板样式文件public.css (共用模板样式文件form.css (表单模板样式文件menu.css (菜单模板样式文件link.css (链接模板样式文件 2.3如何查找样式对应的样式表用firefox找开页面 对应目录就是newstyle/layout.css 下第50行(ctrl+

5、g,输入行数直接跳转除记事本外page_tit。3模块样式调整3.1背景修改 Newstyle模板下layout.css 第17行.page_home, .body_bgbackground: url("images/body_bg.jpg" repeat-x scroll center top #BEE3FD; padding: 57px 0 0; 在newstyle/images/目录下直接替换body_bg.jpg即可。3.2LOGO修改 网站LOGO是可以在后台配置上传的。如果需要修改LOGO的样式可以到: newstyle/layout.css 第87、88、90

6、行.header .logofloat: left; width: 150px;.header .logo a display: block;height: 40px;text-decoration: none; width: 150px;.header .logo a img height: 40px;width: 150px;3.3导航修改 newstyle/layout.css 第18行.header_holder background: url("images/head_bg.png" repeat-x scroll 0 0 transparent;left: 0;

7、 min-width: 1000px;position: fixed;top: 0;width: 100%;z-index: 9999999;可以修改背景图片head_bg.png来改变导航的样式Position:fixed是设置导航固定在某个地方3.4页脚修改 Newstyle下找到footer.html下修改相应内容publicthemesnewstyle;publicthemesweibo 3.5页头修改 Newstyle下找到header.html下修改相应内容publicthemesnewstyle;publicthemesweibo 3.6图标修改 Newstyle下public.

8、css下以ico开头命名,在样式表搜索相关的图标样式,图标利用图片定位来实现样式,修改对就图标样式下background-position下相关数值;如:background-position:0-19px;位置的定位,可以用Photoshop, Fireworks 下的测量工具进行图标精确定位,从而达到实现的效果。 Background-position: x y 0 -48px 3.7按钮修改 按钮修改同图标方法,在模板包image下找到对应的图片文件,用定位来实现按钮样式效果。 4首页4.1左侧修改 在newstyle模板下找到apps.html文件修改1.如何修改左侧背景Newstyl

9、e/layout.css 第15行.contentbackground: url("./images/content_bg.png" repeat scroll 0 0 transparent2.如何修改左侧宽度Newstyle/layout.css 第155行.user_app float: left;width: 150px; 4.2右侧修改 Newstyle/layout.css 第70行.mainbox_R float: right;padding: 20px 20px 0 0;position: relative;width: 180px;5应用修改ThinkSN

10、S所有应用都放在根目录apps下,页面的所有框架元素样式都放在对应模板文件夹下面的样式表里(public themesnewstyle, public themesweibo,每个应用会有自己独立的样式表,进行样式控制。 5.1招贴板 根目录appsposterTpldefaultPublic下包含独立的样式表,图片文件和JS文件5.2日志 根目录appsblogTpldefaultPublic下包含独立的样式表,图片文件,头部底部文 件,调用的局部文件以及JS文件。5.3相册 根目录appsphotoTpldefaultPublic下包含独立的样式表,图片文件,调用的局部文件以及JS文件。

11、5.4活动 根目录appseventTpldefaultPublic下包含独立的样式表,图片文件,调用的局部文件以及JS文件。5.5投票 根目录appsvoteTpldefaultPublic下包含独立的样式表,图片文件,调用的局部文件以及JS文件。5.6礼物 根目录appsgiftTpldefaultPublic下包含独立的样式表,图片文件,调用的局部文件以及JS文件。 5.7群组 群组是应用里页面文件最多的应用,根目录appsgroupTpldefaultPublic下包含独立的样式表,图片文件,调用的局部文件以及JS文件。5.8大屏幕 根目录 appsscreenTpldefaultPu

12、blic 下包含独立的样式表，图片文件，调用的局 部文件以及 JS 文件。 5.9 开发者平台 根目录 appsdevelopTpldefaultPublic 下包含独立的样式表，图片文件，调用的局 部文件以及 JS 文件。 © ZhiShiSoft Co., Ltd. ThinkSNS 模板开发说明文档 Page 20 5.10 掌上微博 根目录 appssitelistTpldefaultPublic 下包含独立的样式表，图片文件。 6 漫游修改 根目录 appsmyopthemesdefault 下包含应用独立的头部， 底部文件， 更方便修改。 © ZhiShiSof

13、t Co., Ltd. ThinkSNS 模板开发说明文档 Page 21 7 换肤 在首页的内容区右上角位置有换肤小图标，点击选择迚行修改;还可以通过导航上的帐号>设置>更换主题迚行皮肤修改。文件目录 © ZhiShiSoft Co., Ltd. ThinkSNS 模板开发说明文档 Page 22 addons/plugins/ChangeStyle/html/皮肤文件夹 0，1，2，3，4 套皮肤。 目前版本皮肤可更新的地方是（网站导航，网站背景，网站整体链接样式） 8 public 目录结构以及相关文件 public/admin 后台共用的样式表，图片文件，头部和底部文件 public/js 共用的 JS 文件 public/lang 双语 public/theme 风格包目录 public/theme/ classic2 , newstyle , weibo 三个风格包 classic2 , newstyle , weibo apps 下包含 Appshome Account 帐号设置包含个人资料，隐私设置，个性化域名，帐号安全，外部绑定，积分规则， 申请认证，勋章管理，更换主题，邀请，微博秀，站外分享 Appshome User首页包含首页，搜索，找人，话题页面 Appsho