免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
返回列表 發帖

[助人] 【阿陌整理】超级简单的自制风格,无任何门槛。


只要你会PS,会替换图片~漂亮的风格就召之即来!


其实修改风格,摒弃模板那一类,无非是替换背景图片,替换发帖图标等....
下面我就把这些代码集中发布,给大家一些经验,如果觉得学习到了,可以回帖支持!谢谢~
因为不用模板一类,所以感觉特别简单~送给小白们,虽然我也是最近才学会的,QAQ,喜欢就回复,太高深了我也不会~
大家好,我是阿陌~欢迎来到资源阁:http://empty.funbbs.me


(1/5)风格内自定义发帖回复按钮样式


正常字体后添加:
  1. ;}.postbtn,.replybtn{width:80px!important;height:32px!important;}.postbtn a,.replybtn a{text-indent:-99999px!important;}.postbtn {background:url(你的发帖背景图片) !important;} .replybtn{background:url(你的回复背景图片) !important;}
複製代碼
width:80px  (你定义的回复发帖图片的宽度)height:32px (定义图片的高度)




(2/5)风格内自定义版块分类图片




正常字体后添加
  1. ;}.content .list h3 { padding-left: 9px; background:url(背景图片) repeat-x;line-height: 27px
複製代碼





(3/5)风格内自定义导航栏高度



页脚文字色后面添加
  1. important;} #menu{position: absolute; left:180px; top:385px; right:0px; bottom: 0px;  
複製代碼
#FFF important;} #menu{position: absolute; left:180px; top:385px; right:0px; bottom: 0px;  

left: 180px;(距左) top: 385px(距顶)
180PX为居中,具体看你导航长度。  385PX为导航距离顶部的高度。




(4/5)在风格内替换新旧发帖图标


风格就在正常字体,字号后加
  1. ;}.list th{background:url(旧帖) 1px 2px no-repeat!important;}.list th.new{background:url(新帖) 1px 2px no-repeat!important;}
複製代碼
范例:
Verdana, Helvetica, Arial, sans-serif;}.list th{background:url(旧帖) 1px 2px no-repeat!important;}.list th.new{background:url(新帖) 1px 2px no-repeat!important;}





(5/5)在风格内替换设置页脚背景




把下面样式放到到风格编辑中的"正常字体"里的最后
  1. ;}#footer{background:(图片地址) repeat-x 0 0;}
複製代碼
;} #footer{background:#ebedef url(图片地址) no-repeat 50% 0px !important;height:100px !important}
"repeat-x"可替换
repeat-x:横向重复平铺
repeat-y:纵向重复平铺
no-repeat:不重复平铺



替换代码已完毕,下面是一些基础知识




我的页面背景设置背景图片,在Opera/谷歌/世界之窗等浏览器上不显示?

如要在背景设置:
http://empty.funbbs.me/attachments/month_1302/130219135365ccb4e3c82661b9.jpg
这张背景图片。         

需要做的就是拆开图片地址。

在“扩展图片目录”里填写:http://empty.funbbs.me/attachments/month_1302/
在“页面背景”里填写:130219135365ccb4e3c82661b9.jpg

这样做就间接的读取了图片地址,大部分浏览器都支持显示。
其他类似的都可以按此方法放置图片。



如图例



风格头部图片,背景图片显示错位?

因为背景图片没有设置属性固定或者设置错误.
属性参考:
repeat:默认值。背景图像纵向和横向平铺
no-repeat:背景图像不平铺
repeat-x:背景图像仅横向平铺
repeat-y:背景图像仅纵向平铺



更多细节:5D6D风格常见问题集合贴,来看下有没有你遇到的问题.
地址 http://www.5d6d.net/viewthread.php?tid=761404
Discuz-7.x 默认模板 解说
地址 http://www.sclub.com.tw/discuz/viewthread.php?tid=16134
模板风格各颜色功能解释!for:dz7.2
地址 http://www.sclub.com.tw/discuz/viewthread.php?tid=19690
7

評分人數

我是阿陌,很高兴和大家成为很好的朋友 嘘~我是不会告诉你我是一个逗比的,哼!  耽美小说包下载论坛 腐女/腐男入

本帖最後由 empty 於 2013-5-10 08:48 編輯

[第一次做的风格] 蓝色风格 | 云卷云舒

[第二次做的风格]  唯美派 LV_2

华福

只为捕获° ____小清新,很有气氛的风格


上述代码如果无法实现,建议下载华福代码,研究正常字体后面的代码。
1

評分人數

我是阿陌,很高兴和大家成为很好的朋友 嘘~我是不会告诉你我是一个逗比的,哼!  耽美小说包下载论坛 腐女/腐男入

TOP

我是阿陌,很高兴和大家成为很好的朋友 嘘~我是不会告诉你我是一个逗比的,哼!  耽美小说包下载论坛 腐女/腐男入

TOP

嗯呀,嗯呀,很好,很好。
其实风格除了修改代码知识外,还需要点美术功底,和PS技术的。

TOP

回復 4# yoyo


    自己做风格的时候,才发现原创风格好难。图片一些小细节详细编辑,修改,涂抹,真是不容易啊!
    发布上去,还有一点点的调整代码位置,很辛苦,麻烦~虽然只是替换图片,但是还是很麻烦!很辛苦啊~
    所以,还是当伸手党容易!握拳!

TOP

回復 5# empty


    第三次導航欄如何套的?

另外,辛勞大大。

TOP

回復 6# xuan


    第三次导航?我没懂你的意思,你看到的是不是华福那个风格?
    那个风格是背景图片,套弄一个透明50%的横幅,然后把导航栏通过代码高度、宽度,放置到图片位置适当的中间。

TOP

楼主辛苦了,谢谢你的分享。

TOP

回復 7# empty


    感覺很難.....雖然我也在做風格,唯一不會的就是套入他牌風格的東東。

TOP

回復 9# xuan


    什么叫他牌???我真是晕眩了,可能我根本没有懂你的意思,我觉得很多类似于dzx2的导航栏都是用某一些代码可以在风格内实现替换,和修改,可惜,我现在不会~只会替换图片。

TOP

返回列表