免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [助人] 【阿陌整理】超级简单的自制风格,无任何门槛。 [打印本頁]

作者: empty    時間: 2013-4-5 20:52     標題: 【阿陌整理】超级简单的自制风格,无任何门槛。


只要你会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
作者: empty    時間: 2013-4-5 20:54

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

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

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

华福

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


上述代码如果无法实现,建议下载华福代码,研究正常字体后面的代码。
作者: empty    時間: 2013-4-5 20:55

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

你或许需要一下修改模板使论坛更加漂亮的代码?更加详细的为论坛增加功能!

每个楼层右下角增加一个“举报”按钮

投票贴美化修改:将贴内投票区域部分移动到帖子内容下方

帖子快速发布框提示

发帖时编辑框内选择“图片”按钮,默认为“网络图片”

隐藏分享到QQ空间、腾讯微博

更改发新主题下拉选单图标

虚线、实线..都可以实现头像边框代码(我变我变我变变变! )

(修改模板)取消页头的[论坛任务]字样

贴内实现简单的FAQ折叠效果,自定义dz代码

用户信息保留关键字 · 通用分享
作者: yoyo    時間: 2013-4-5 20:56

嗯呀,嗯呀,很好,很好。
其实风格除了修改代码知识外,还需要点美术功底,和PS技术的。
作者: empty    時間: 2013-4-5 20:58

回復 4# yoyo


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

回復 5# empty


    第三次導航欄如何套的?

另外,辛勞大大。
作者: empty    時間: 2013-4-5 21:02

回復 6# xuan


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

楼主辛苦了,谢谢你的分享。
作者: xuan    時間: 2013-4-5 21:04

回復 7# empty


    感覺很難.....雖然我也在做風格,唯一不會的就是套入他牌風格的東東。
作者: empty    時間: 2013-4-5 21:06

回復 9# xuan


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

回復 10# empty


    他人風格某些地方想套下來
作者: empty    時間: 2013-4-5 21:15

回復 11# xuan


    如果是图片,那就好说,但是如果是某一些需要代码才能够实现的。。。。。
    除非你会那种代码,不然多半就是无法来着。
作者: xuan    時間: 2013-4-5 21:16

回復 12# empty


    像是導航欄.....一些地方

那圖片呢?
作者: empty    時間: 2013-4-5 21:20

回復 13# xuan


    图片随便替换呗,仿制的话,现在不是很多类似于百度识图一样的道具,截一个地方出来。
    如果是对方原创的图片,那就ORZ了
作者: xuan    時間: 2013-4-5 21:22

回復 14# empty


    不懂
作者: 小枫    時間: 2013-4-5 21:26

最近帮纯良。做了一个风格。
~~~~~~~~~~~~~~~
我记得冷瞳°也有一个教程帖。
作者: xuan    時間: 2013-4-5 21:27

回復 16# 小枫


    教我。話說妳論壇好空虛
作者: sojh    時間: 2013-4-5 21:35

回復  empty


    像是导航栏.....一些地方

那图片呢?
xuan 发表于 2013-4-5 21:16



如果对方有发放风格就下载下来
搜索menu,把相关代码复制,贴到适合的地方即可

没有就要自己拿
google chrome为列在你想要的地方右键,选最下面的选项inspect element,然后你就会看到很多代码

红框里可以调,弄好效果复制就可以直接copy
若有风格模板就丢进css_appended里
没有就参考一楼自己调
作者: bossll    時間: 2013-4-5 21:48

辛勞阿陌站長熱心分享風格教學
謝謝
作者: xuan    時間: 2013-4-5 21:59

回復 18# sojh


    謝謝〜我試試。
作者: 流传动    時間: 2013-4-5 22:42

怎么都是叉叉啊图片
作者: 流传动    時間: 2013-4-5 23:24

非常好的教程不错非常感谢
作者: yoyo    時間: 2013-4-6 14:00

回復 5# empty
當初我做第一款風格的時候,花了一天的時間,才做出來(當然現在看是爛到家)
現在雖然熟練了,可惜真的木有時間。
而且做了分享還被人指指點點……
作者: empty    時間: 2013-4-6 16:16

回復 23# yoyo


    {:5_127:} 做了风格自己用~哈哈,想起了做做,练练手~
作者: 卓君颜    時間: 2013-4-20 19:12

本帖最後由 卓君颜 於 2013-4-20 19:16 編輯

我用着不行呐,背景跟着这样换了还是显示不出来

难道是我RP不行这不可能!(你去← ←
作者: 大脸猫    時間: 2013-4-21 14:59

收藏,谢谢楼主
作者: empty    時間: 2013-4-21 15:33

回復 25# 卓君颜


    下载看华福的风格包,你看看里面的代码。
作者: 卓君颜    時間: 2013-4-22 12:43

回復  卓君颜


    下载看华福的风格包,你看看里面的代码。
empty 發表於 2013-4-21 15:33


恩,我去试试,谢谢
作者: foreversun    時間: 2013-5-19 23:47

不错。。。。。。
作者: 伊小璇    時間: 2013-6-17 20:09

这帖要支持的 解决了我一个大问题{:12_558:}
作者: 十六锦缎    時間: 2013-6-21 09:24

别的 代码都试验过的 很好用
就是 风格内自定义版块分类图片
怎么都实现不了
请陌帮忙
作者: empty    時間: 2013-6-21 09:39

回復 31# 十六锦缎


    风格内自定义版块图片?看我头像,加我QQ发截图给我看看
作者: freedomland    時間: 2013-6-24 16:50

弱弱地问,这些代码都放第三方么?
作者: freedomland    時間: 2013-6-24 16:50

弱弱地问,这些代码都放第三方么?
作者: empty    時間: 2013-6-24 17:39

回復 33# freedomland


    不是第三方,我都写了的啊,有些是正常字体后面,有些是页脚
作者: knights23    時間: 2013-8-6 02:00

本帖最後由 knights23 於 2013-8-27 01:12 編輯

超級棒!要來學習自己弄模板嚶嚶嚶嚶~~
不过楼主知道这么多替换图片的方法也已经很厉害了啊,咱还不会呢╮(╯_╰)╭
话说有没有方法直接在txt格式里修改之后转换成xml格式直接导入论坛的方法呢??
作者: kowloon    時間: 2013-8-24 22:57

超愛你這篇!

希望能有更多在風格內設置的代碼~
例如:主體表格背景、當前位置導航的顏色、版塊圖標...等等~

支持你喔!
作者: pucci    時間: 2013-8-26 00:50

大大求教一下,我已經把背景圖片的鏈接地址都輸入了但是沒有顯示,請問知道大概是什麽原因嗎?
[attach]24030[/attach]
作者: tiffany96    時間: 2013-8-30 13:46

正常字体后添加 是在哪裡 不清楚野
作者: lovemovies    時間: 2013-9-6 00:32

太棒了,正找这种教程呢!
作者: 漂泊的云儿    時間: 2013-9-22 14:53

谢谢楼主分享
作者: qnbbs    時間: 2013-10-2 19:29

啊啊啊,力顶!
作者: 苏涉    時間: 2013-10-14 15:25

楼主辛苦了,谢谢你的分享
作者: DIUDIU_    時間: 2014-2-3 19:50

实用!感谢分享
作者: zhuxianzhfx    時間: 2014-2-7 16:58

留名以后再细看
作者: spzhu520    時間: 2014-3-24 14:47

非常棒!!!!!!!!!!!!!!!!!!!!!
作者: SooYoon    時間: 2014-4-2 13:34

简直棒哭啦TAT
急需这个啊!!!!!!!!!!!
作者: knights23    時間: 2014-5-19 00:08

回復 1# empty


    楼楼好,冒昧打扰了。因为在论坛修改风格过程中从楼楼的帖子里学到了很多,但是现在遇到一点问题,烦请楼楼帮忙看下是我哪里设置出问题了吗?
使用论坛原有的uchome风格模板制作论坛的新风格,其他都没问题,但是更换发帖、回帖按钮图片后论坛内一直无法显示
同样的方法在用别的风格模板制作的时候都可以正常显示的只有uchome这个模板里修改之后没显示
按照楼楼的教学,将正常字体后面添加后是这样的
  1. Verdana,Helvetica,Arial,sans-serif;}.content .list h3 { padding-left: 9px; background:url(http://paper-knights.qiniudn.com/hana%E6%B8%85%E6%96%B0%E6%98%A5%E5%AD%A3%E9%A3%8E%E6%99%AF%E7%9F%A2%E9%87%8F%E7%B4%A0%E6%9D%90_21.jpg) repeat-x;line-height: 27px;}.postbtn,.replybtn{width:70px!important;height:32px!important;}.postbtn a,.replybtn a{text-indent:-99999px!important;}.postbtn {background:url(http://paper-knights.qiniudn.com/hana%E5%8F%91%E5%B8%96C.jpg) !important;} .replybtn{background:url(http://paper-knights.qiniudn.com/hana%E5%9B%9E%E5%B8%96C.jpg) !important;}
複製代碼
但是论坛显示不出来新的按钮
[attach]35353[/attach]
同样的设置,其他的风格就可以显示
[attach]35354[/attach]
请问楼楼我应该修改uchome这个风格模板的哪里才能显示呢………………
作者: rosa1414    時間: 2014-5-19 09:55

谢谢分享!
作者: empty    時間: 2014-5-19 23:12

回復 48# knights23


    我只会简单的啊,这种也不太会,你去问问做风格,经常发风格的那些论坛朋友吧,抱歉没帮到你
作者: knights23    時間: 2014-5-20 22:33

回復 50# empty


    我我我我,删掉这个风格的css_append之后调整了一下,貌似好用了诶!!!问题已经解决了,谢谢亲的教学贴啊~还是很有用的!!
作者: 凉生    時間: 2014-6-1 12:29

oh my god 正常字体后面要加多少东西啊……
有些代码是可以加在页脚文字色后面的
作者: 囧玥    時間: 2014-6-9 11:48

感谢分享【【【马克一下
作者: GTA4    時間: 2014-9-20 10:15

sdddddddddddddddddddddddddd
作者: 葱葱    時間: 2015-1-31 08:47

回復 1# empty
作者: 森鷲    時間: 2015-7-11 16:45

……码着 感觉很厉害 谢谢楼主~
作者: xiajl    時間: 2015-9-12 18:08

)风格内自定义版块分类图片

这个添加以后没有显示-0
作者: xiajl    時間: 2015-9-12 21:27

风格内自定义版块分类图片添加以后没有反应=-=

是什么毛病
作者: snsdcp    時間: 2015-10-13 18:48

谢谢楼主
作者: escape    時間: 2017-5-2 22:24

感谢一下这个帖子,对我帮助真的太大了尤其是背景图片的那一块,可以说是救了我之前连续好几天的心塞,真的差点以为sclub没法换背景了
作者: 埴埴    時間: 2018-8-26 22:25

感謝你詳細簡易的教學!!!網路上不好找呀
作者: 网雨霏霏    時間: 2018-8-27 02:19

支持教程贴,风格
作者: macheng    時間: 2018-8-27 09:19

回復 62# 网雨霏霏


    最近折腾风格了?
作者: 网雨霏霏    時間: 2018-8-27 09:29

回復 63# macheng


    没有,只是留下足迹,以备将来的不时之需
作者: macheng    時間: 2018-8-27 10:04

本帖最後由 macheng 於 2018-8-27 10:06 編輯

回復 64# 网雨霏霏


    刚发现了个好东西,你要不要去看看?

http://bone.joinbbs.net/index.php看看去吧
作者: 网雨霏霏    時間: 2018-8-27 10:24

回復 65# macheng


    什么东东
作者: 网雨霏霏    時間: 2018-8-27 10:26

回復 65# macheng


    全都是广告贴,有啥好东西?真心找不到。具体网址发来看看吧
作者: macheng    時間: 2018-8-27 16:49

回復 67# 网雨霏霏


    你真没看到???无界都上去拿了
http://bone.joinbbs.net/viewthread.php?tid=23&extra=page%3D1
http://bone.joinbbs.net/viewthread.php?tid=24&extra=page%3D1
作者: 网雨霏霏    時間: 2018-8-27 17:20

回復 68# macheng


    是这个啊,我当然看到了。
但是好像没啥用啊
你拿来做啥用?
作者: macheng    時間: 2018-8-27 17:30

回復 69# 网雨霏霏


    我在无界论坛发帖讨论了,应该还是有用的,是好牛逼的东西
作者: 网雨霏霏    時間: 2018-8-27 17:52

回復 70# macheng


    我去看看




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://sclub.com.tw/discuz/) Powered by Discuz! 7.2