免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: [分享] 弱弱的美化筆記､ [打印本頁]
作者: 征雪    時間: 2011-7-8 08:00     標題: 弱弱的美化筆記､

本帖最後由 征雪 於 2011-7-8 08:14 編輯

修改論壇Ico。

首先至製作Ico的網頁製作一個Ico / 敝人是都使用 : http://www.favicon.cc/
> 製作完成後請下載檔案 - 另外上傳至網頁空間。將上傳後的Ico網址複製下來貼到筆記本。

然後登入後台 - 界面 > 模板管理 > 找到header > 在<head>
下方加入 :
  1. <link href="Ico連結" rel="shortcut icon" type="image/x-icon/" >
複製代碼


記得把Ico連結換成剛剛複製下來的Ico網址。


修改發帖、回復鈕。

不需要另外把語法貼在其它地方 / 因為模組本身已經有控制這地方的代碼 - 將語法貼在其它地方有可能造成有些部分無法修改或是產生bug。

登入後台 - 界面 > 模組管理 > 找到css_common > 然後點開瀏覽器上工具列的 編輯 > 尋找這個頁面的資料 , 打上 reply , 它會自動跳到關鍵字處 稍微下面一點點 就可以找到 :
  1. .replybtn { background-image: url({IMGDIR}/reply.gif); }
  2.                 .postbtn a, .replybtn a { display: block; padding-left: 5px; color: #C77D28; letter-spacing: 5px;font-weight:700; }
  3.                 .postbtn a:hover, .replybtn a:hover { text-decoration: none;color: #995D18; }
複製代碼
先在.replybtn的前面空一格加上.postbtn, 才會兩個鈕都修改到。
如果只是要換掉圖片 / 就把
  1. {IMGDIR}/reply.gif
複製代碼
換成自己要的圖片網址即可。
若不想使用背景圖片 / 就把
  1. background-image: url({IMGDIR}/reply.gif);
複製代碼
刪掉,改成背景色及字體的設定。
例如 :
  1. background:#000000;
  2. color:#ffffff;
  3. font-family:verdana;
  4. font-size:11px;
  5. font-weight:700;
複製代碼
依序分別是 背景色彩、字體色彩、字型、字體大小、字體格式。如果不要粗體就把700都改成400 /
(敝人編輯一般部落格css時都是用bold和normal做設定,不過看了模組的語法都是用700和400 / 還算是初學者不是很清楚這中間的用意和差別 所以想說還是照著來就好。)
  1. .postbtn a, .replybtn a
複製代碼
是控制兩個鈕的連結 / 不過基本上因為它是發帖和回復 所以本身就是個連結,這裡修改的話馬上就會顯現出來。
不過在這裡只要更改色碼就好了..其它的視個人需要而定。
稍微解釋一下 display是指表現方式,block就是以一個區塊表示。padding-left指的是在此區塊內左邊的間距,如果是margin的話就是此區塊與別的區塊的間距。
letter-spacing是指字元間的間距,間距越大字和字分得越開。它這裡是使用px,也可以用pt(個人習慣用pt / pt的每個單位尺度比px的大上一些。)
.postbtn a:hover, .replybtn a:hover 就是滑鼠移到發帖或回覆鈕上的效果。
這裡可以不更動 / 如果想要移上去有變化 就改一下此處的背景或字體顏色吧。

不要跟上面兩條的色碼一樣,不然會看不出來。

補充一下色碼的選擇器 : http://abowman.com/google-modules/color-chooser/


橫版版塊增加圖示。

發現設定子板塊橫排的時候竟然沒有圖了 .
所以就只好自己加。

登入後台 > 界面 > 模版管理 > 找到discuz 然後也是使用尋找頁面資料 - > 找到 : <th width="$cat[forumcolwidth]"{$forum[folder]}>
然後改成 :

  2. <!--{if $forum[icon]}-->
  3. <td width="$cat[forumcolwidth]"{$forum[folder]}>{$forum[icon]}
  4. <!--{else}-->
  5. <th width="$cat[forumcolwidth]"{$forum[folder]}>
  6. <!--{/if}-->
複製代碼
這樣自己在板塊裡設定的板塊圖示就會在橫排也顯現出來了。
備註 : 板塊圖示設定方式 - 登入後台 > 板塊 > 板塊管理 > 編輯 裡面就有板塊圖示的部分 / 貼上相對或絕對地址即可。

其它基本美化都可以在風格管理的高級模式進行設定。
基本的一些字體大小、字型、顏色等等 .. 可以在 css_common裡body標籤做設定。

a標籤是連結,a:hover標籤是滑鼠移上連結時。


題外話 :

內容什麼的都沒有內收。不用回覆就可以看得到 - 因為敝人不是很喜歡回覆者直接打個 感謝大大 什麼的 ..這種沒有意義的發言。

論壇通常基本設置字數是10 然後想看帖的就打 感謝大大~~~~~~ 10個字剛好過關。
如果字數設置是20 那麼就變成 感謝大大~~~~~~~~~~~~~~~~ 20個字又剛好過關了。

如果是這樣的話,那不如不回。說真的。



作者: 繽紛色彩    時間: 2016-9-25 12:50

看來幾好玩
可惜我還是不懂得使用



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