SCLUB免費論壇申請-使用者論壇 - Powered by Discuz! Board

繁體 | 簡體

Sclub交友聊天~加入聊天室當版主

(檢舉)

新浪微博

QQ空间

Facebook

Google+

Plurk

Twitter

Line

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

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

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

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

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

正常字体后添加：

;}.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)风格内自定义版块分类图片

正常字体后添加

;}.content .list h3 { padding-left: 9px; background:url(背景图片) repeat-x;line-height: 27px

複製代碼

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

页脚文字色后面添加

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)在风格内替换新旧发帖图标

风格就在正常字体，字号后加

;}.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)在风格内替换设置页脚背景

把下面样式放到到风格编辑中的"正常字体"里的最后

;}#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

弱弱地问，这些代码都放第三方么？

作者: 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这个模板里修改之后没显示
按照楼楼的教学，将正常字体后面添加后是这样的

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://www.sclub.com.tw/discuz/)