Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[CSS] 文章閱讀模式背景顏色 - Re: [Forum] 論壇樣式初步修改

不同論壇樣式範例

全民國防教育暑期戰鬥營 http://www.mepopedia.com/forum/718
美寶莊園 http://mepopedia.com/forum/list.php?699

==============================================

以全民國防教育暑期戰鬥營為例,需修改的部分

1. 修改 template 名稱(info.php)

 將第5行的 $name = 'emerald' 的 emerald 改為新的 template 名稱 (可以是中文名稱)


2. 風格顏色設定 (setting.tpl)

設定下列三個顏色變數後(可以將 #0079B7 改為要設定的顏色碼),整個論壇的風格就會有很大的改變。

{VAR border_color "#0079B7"} (第54行)
{VAR link_color "#0079B7"} (第59行)
{VAR breadcrumb_border_color "#0079B7"} (第63行)

其他的顏色設定可自行嘗試。例如 link_hover_color 是滑鼠移到超連結文字上時出現的顏色。


3. 改變論壇 body 背景底圖樣式 (css.tpl)

將網頁中css 檔案中的body 樣式,直接複製至 css.tpl

如:原來

body {
background-color: {body_background_color};
}

複製後

body {
        background-color: {body_background_color};
        background-repeat: repeat-y;
        background-position: center top;
        background-image: url(imgs/body_bg_1.jpg);
}

url 改 background-image: url(http://camp.gpwb.gov.tw/imgs/body_bg_1.jpg);

============================================================

4.
list.tpl (文章列表討論串只在一篇顯示)

list_threads.tpl(文章列表討論串分篇顯示)

============================================================

5.文章標題欄 (table.list th)

把圖片顯示 // 註解,即無法顯示圖片

原來:

#phorum table.list th {
background-repeat: repeat-x;
background-image: url('{header_background_image}');
color: {border_font_color};
background-color: {border_color};
font-size: {font_small};
padding: 5px;
}



#phorum table.list th {
background-repeat: repeat-x;
//background-image: url('{header_background_image}');
color: {border_font_color};
background-color: {border_color};
font-size: {font_small};
padding: 5px;
}


================================================================

6.改右上登入資訊,將之改為不顯示

header.tpl 在115行 <div id="user-info"> 前面加註解 <!-- 在140前打 <!-- 在152行尾打 -->

================================================================

本次作業:

請將視覺專區 http://mepopedia.com/forum/804
修改成另一種風格



Edited 3 time(s). Last edit at 08/02/2011 09:21PM by mepoadm.
(編輯記錄)

我覺得好難喔~~
我有些不太懂 這次的作業我改不出來~~
還有背景圖片路徑可以改嗎??如果改怎麼用 !!
還有這個

list.tpl (文章列表討論串只在一篇顯示)

list_threads.tpl(文章列表討論串分篇顯示)

我懂意思但是他在哪個地方?

背景圖片路徑可以改

主要都是在 settings.tpl 這個檔案裡面改。

找到檔案的最後一段 {! -- Background Images -- } 的部份就是了。

我以其中二個背景圖片設定為例子:

{VAR body_background_image "http://camp.gpwb.gov.tw/imgs/body_bg_1.jpg"}
{VAR top_banner_image "http://www.mepopedia.com/imgs/forum_top_vd.jpg"}

第一個 body_background_image 就是 CSS 中的 body{ background-image: ...} 的意思。就是論壇左右兩邊的灰色的邊。

第二個 top_background_image 就是頂圖(就是這一張。http://www.mepopedia.com/imgs/forum_top_vd.jpg)。

修改的方式圖以將你要上傳的圖的檔案名命為 top_banner.jpg 然後上傳到 images 這個目錄裡面。然後把

{VAR top_banner_image "http://www.mepopedia.com/imgs/forum_top_vd.jpg"}

這一行的路徑改為 ./templates/vd-angela/images/top_banner.jpg,也就是整個改為

{VAR top_banner_image "./templates/vd-angela/images/top_banner.jpg"}


而要修改第一個「Body背景圖片」的話也是一樣,先作一個名為 body_bg.jpg 的檔案。上傳到 images 這個目錄裡面。

然後再將 {VAR body_background_image "......"} 那一行改為

{VAR body_background_image "./templates/vd-angela/images/body_bg.jpg"}


背景圖片修改的部份先寫到這裡。



Edited 2 time(s). Last edit at 08/02/2011 10:57AM by HP.
(編輯記錄)

MEPOERs said:
HP: 這一篇重要,請仔細閱讀。
在 Forum 的文章閱讀模式中 (read.php),背景分為「作者資訊及標題區」及「文章內容區」。

http://mepopedia.com/forum/read.php?804,15341 為例,「作者資訊及標題區」就是 JinJin[WEB] PROFILE個人簡介頁面蒐集的區域。而之後的內容部份就是「文章內容區」。以下分別說明設定及修改背景顏色的方法。

1. 作者資訊及標題區

CSS 類別:
#phorum div.generic{ background-color: #EDF2ED;} //css.tpl中約第130行

TPL 變數:
{VAR alt_background_color "#edf2ed"} //settings.tpl 中第52行

修改 settings.tpl 中第52行的 TPL 變數 alt_background_color 即可。例如將 "#edf2ed" 改為 "white"。


2. 文章內容區

CSS 類別:
#phorum div.message-body {
/* background-image: url('{message_background_image}'); */
background-repeat: repeat-x;
background-color: {message_background_color};
} //css.tpl中約第425行

TPL 變數:
{VAR message_background_color "White"} //settings.tpl 中第73行

修改 settings.tpl 中第73行的 TPL 變數 message_background_color 即可。

老師'''
我的圖檔都改不出來
我在setting檔的最後一大段凱了兩個圖的捷徑
一個是{VAR message_background_image "/home/MEPO/forum/templates/vd-elena/images"}
第二的是
{VAR body_background_image "http://camp.gpwb.gov.tw/imgs/body_bg_1.jpg"}
但是圖片一職都沒有跑出來

要怎樣才能看到我改的地方,我看不到我改的地方。

我改了我的論壇樣式
名稱是Play Design Angela

我有改body顏色跟body的連結的背景圖。
但是都有出來。
資料全都偏掉了。
為什麼?
可以幫我看看嗎?

MEPOERs said:
HP: 改好了。原因是在原來的 css.tpl 中 body{...} 少了最後的大括號 } 。(應是誤刪了)