改變 Prosilver 風格--將個人資料顯示在左邊

與 phpBB 3.0.x 相關主題。
回覆文章
頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8621
註冊時間: 2004-04-30 01:54
來自: Taiwan

改變 Prosilver 風格--將個人資料顯示在左邊

文章 心靈捕手 » 2008-01-20 15:18

有些人問到,如何讓 Prosilver 風格將個人資料預設顯示在左邊,就像 subsilver 風格一樣。

1. 首先,我們必須確認附加檔案盒不會被個人資料欄位從文章中分隔出。

--開啟--
styles/prosilver/theme/content.css

--找到--

代碼: 選擇全部

    /* Attachments
    ----------------------------------------*/
    .attachbox {
       float: left;
       width: auto;
       margin: 5px 5px 5px 0;
       padding: 6px;
       background-color: #FFFFFF;
       border: 1px dashed #d8d8d8;
       clear: left;
    }
--取代成--

代碼: 選擇全部

    /* Attachments
    ----------------------------------------*/
    .attachbox {
       float: left;
       width: auto;
       margin: 5px 5px 5px 0;
       padding: 6px;
       background-color: #FFFFFF;
       border: 1px dashed #d8d8d8;
       clear: right;
    }
2. 其次,我們將改變 .postbody 風格的 float 值由左至右。
--開啟--
styles/prosilver/theme/content.css

--找到--

代碼: 選擇全部

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}
--取代成--

代碼: 選擇全部

/* Post body styles
----------------------------------------*/
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: right;
clear: both;
}
3. 我們改變 .postprofile 風格的 float 值由右至左,以及移動白色垂直的分隔線到右邊。
--開啟--
styles/prosilver/theme/content.css

--找到--

代碼: 選擇全部

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}
--取代成--

代碼: 選擇全部

/* Poster profile block
----------------------------------------*/
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-right: 1px solid #FFFFFF;
width: 22%;
float: left;
display: inline;
}
4. 下一步:
--找到--

代碼: 選擇全部

.pm .postprofile {
border-left: 1px solid #DDDDDD;
}
--取代成--

代碼: 選擇全部

.pm .postprofile {
border-right: 1px solid #DDDDDD;
}
5. 下一步:
--開啟--
styles/prosilver/theme/colours.css

--找到--

代碼: 選擇全部

.online {
   background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}
--取代成--

代碼: 選擇全部

.online {
   background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
   margin-top: -5px;
}

.online dt {
   margin-top: 5px;
}
6. 首先,我們需要移除目前顯示在文章的 div 之圖片。
--開啟--
styles/prosilver/template/viewtopic_body.html

--找到--

代碼: 選擇全部

<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">
--刪除其中--

代碼: 選擇全部

<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->
7. 現在,我們需要增加 postprofile dl 要素。
--開啟--
styles/prosilver/template/viewtopic_body.html

--找到--

代碼: 選擇全部

<dl class="postprofile" id="profile{postrow.POST_ID}">
--取代成--

代碼: 選擇全部

<dl class="postprofile<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}">
8. 下一步:
--開啟--
styles/prosilver/template/ucp_pm_viewmessage.html
--找到--

代碼: 選擇全部

    <div id="post-{MESSAGE_ID}" class="panel clearfix post pm-panel-message pm<!-- IF S_POST_UNAPPROVED or S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF S_ONLINE --> online<!-- ENDIF -->">
--刪除其中--

代碼: 選擇全部

<!-- IF IF S_ONLINE --> online<!-- ENDIF -->
9. 下一步:
--找到--

代碼: 選擇全部

<dl class="postprofile" id="profile{MESSAGE_ID}">
--取代成--

代碼: 選擇全部

<dl class="postprofile<!-- IF S_ONLINE --> online<!-- ENDIF -->" id="profile{MESSAGE_ID}">
如此一來,將可正確地如同 subsilver 風格,將個人資料置放在文章以及私訊的左邊。

在私訊中如下圖:
圖檔

在文章中如下圖:
圖檔

--
資料來源:
http://www.phpbb.com/kb/article/prosilv ... s-on-left/
最後由 心靈捕手 於 2011-07-08 22:49 編輯,總共編輯了 4 次。
理由: 重新編輯,感謝 Barlos 提醒更新!
施比受有福,歡迎來信賜教,謝謝 & 再見!
祝福您 好運 ^_^
歡迎加入★★心靈捕手★★ :: 討論區!!
http://wang5555.hopto.org/phpBB3/
p.s. 奉老婆之命:在晚上十一點前,得關機睡覺!!!

頭像
rex
版面管理員
版面管理員
文章: 576
註冊時間: 2001-11-01 15:28
來自: 竹貓星球
聯繫:

Re: [phpBB3 譯文:KB] 改變 Prosilver 風格--將個人資料顯示在左邊

文章 rex » 2009-04-03 09:58

PS.如需利用下載檔案修改方式,相關對應檔案名稱如下:
phpBB3/styles/prosilver/theme/content.css
phpBB3/styles/prosilver/theme/colours.css
phpBB3/styles/prosilver/template/viewtopic_body.html
phpBB3/styles/prosilver/template/ucp_pm_viewmessage.html
全面支援 phpBB3.2.x 版本虛擬空間
phpBB3.2.x 展示網站:https://32x.kukan.tw/index.php
台灣[不限流量]虛擬主機
*可自由調整php 版本。
*免費 SSL 簽章。
https://kukan.tw/product/category/1/product/5

---------------------------------------------------------------------------
修改程式前必要的前置條件:
1.頭腦清晰。
2.備份檔案。
3.一心不二用。
4.再3確認。
缺一不可阿 @0@"

頭像
心靈捕手
默默耕耘的老師
默默耕耘的老師
文章: 8621
註冊時間: 2004-04-30 01:54
來自: Taiwan

Re: 改變 Prosilver 風格--將個人資料顯示在左邊

文章 心靈捕手 » 2011-07-08 22:52

20091105 - removed the acp-editor information and slightly re-written by Raimon
20101101 - added .attachbox changes by AdamR
20111702 - Corrected step 8 to include classes added through phpBB updates - Christian 2.0
因應更新,重新編輯第一篇文章。
施比受有福,歡迎來信賜教,謝謝 & 再見!
祝福您 好運 ^_^
歡迎加入★★心靈捕手★★ :: 討論區!!
http://wang5555.hopto.org/phpBB3/
p.s. 奉老婆之命:在晚上十一點前,得關機睡覺!!!

回覆文章

回到「3.0」