[教學] 一些簡單的框線美化語法

Styles Released by Other phpbb Sites
推薦您喜歡的非官方認證風格吧!享受多樣化的 phpBB 。

版主: 版主管理群譯文組

主題已鎖定
頭像
kkt
竹貓忠實會員
竹貓忠實會員
文章: 625
註冊時間: 2005-06-15 01:37
來自: H.K.
聯繫:

[教學] 一些簡單的框線美化語法

文章 kkt »

跟大家分享一些簡單的框線美化語法, 由於修改容易.
毋須制作背景圖, 很方便的. 沒有用論壇入口的話可合用.
這裡先介紹一點試試.

圖例:
圖檔

框線的語法

首頁頁面框的內及外框線

打開: overall_header.tpl

找到 (注意每個風格可能不一樣, 找到大概的便可以啦.)

代碼: 選擇全部

/* This is the border line & background colour round the entire page */
.bodyline	{ background-color: color: {T_TD_COLOR2}; background-{T_BODY_BACKGROUND});border: 6px {T_TH_COLOR1} solid; } // 這是外框線

/* This is the outline round the main forum tables */
.forumline	{ background-color: color: #ff0000; border: 2px solid;} // 這是內框線

把 solid 改為你要的框線語法, 或 border: (之後修改此處框線語法)
再調整 px 之前的數值大小, 數值越大越寬.

引言框及代碼框

打開: overall_header.tpl

找到:

代碼: 選擇全部

/* Quote & Code blocks */
.code { 
	font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
	background-color: {T_TD_COLOR1}; border: #3ABB37; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
	font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
	background-color: {T_TD_COLOR1}; border: #3ABB37; border-style: solid;
	border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
再於行內找到:

代碼: 選擇全部

border-style: solid;
把 border-style: 之後的框線語法換為你要的框線語法.
px 之前的是框線粗幼語法.

border-left-width: 1px; 左框線
border-top-width: 1px; 頂框線
border-right-width: 1px; 右框線
border-bottom-width: 1px 底框線

.code 是代碼框
.quote 是引言框

上圖中的 8 種框線語法.

代碼: 選擇全部

solid  // subSilver 原用框線語法.

dashed  // 虛線語法.

double  // 雙線語法.

dotted  // 點線語法.

outset  // 凸版語法.

inset  // 凹版語法.

groove  // 坑紋語法.

ridge  // 圓線語法.
首頁內外框 Demo 效果:

http://www.kktfriend.com/phpBB2/

引言及代碼框 Demo 效果:

http://www.kktfriend.com/phpBB2/viewtopic.php?t=5745



好了, 有閒再續.


.
最後由 kkt 於 2006-05-30 18:14 編輯,總共編輯了 3 次。
舊站台經已結朿了, 學生們可到遊戲站玩玩 Flash Game (不必註冊) 免費 Flash Game
在此學到很多架站知識, 永遠多謝:
心靈捕手老師, ~倉木麻衣~, 依夢兒 及 神川小羽各位大大相助
esam
星球普通子民
星球普通子民
文章: 2
註冊時間: 2006-03-27 01:28
來自: localhost
聯繫:

文章 esam »

哇 真是太感謝kkt了 我正想找一個比較簡單的方面
略微修改一下框線的部份 :lol:
W2003 SERVER SP1
雷電MAILD商業版 1.9.10 file update 16
雷電FTPD 商業版 v2.4 build 2600
雷電DNSD 企業版 1.206 build 004
EasyPHP 1.8
sparqnet速博 8M/640K 固定4IP
A_Jayx
星球普通子民
星球普通子民
文章: 10
註冊時間: 2006-03-18 12:24
聯繫:

文章 A_Jayx »

奇怪..我用ridge沒效過,反而變成Solid :oops:
頭像
kkt
竹貓忠實會員
竹貓忠實會員
文章: 625
註冊時間: 2005-06-15 01:37
來自: H.K.
聯繫:

文章 kkt »

To: A_Jayx, 正常在 tpl 作修改便可以, 也不用改 css 的.

未知您的那一段如何改法? 可貼出來看看.
舊站台經已結朿了, 學生們可到遊戲站玩玩 Flash Game (不必註冊) 免費 Flash Game
在此學到很多架站知識, 永遠多謝:
心靈捕手老師, ~倉木麻衣~, 依夢兒 及 神川小羽各位大大相助
jwxinst
竹貓忠實會員
竹貓忠實會員
文章: 945
註冊時間: 2006-03-31 10:07
來自: New York, USA     學業狀況: 當天才...       個人狀況: 臭蛋
聯繫:

文章 jwxinst »

續kkt這一篇, 補充如果overall_header.tpl中沒有這類的代碼
可能是因為你的風格是用css是整體管理的

(因為自己在改風格), 所以附上css上的改動引言框及代碼框方法
在修改之前建議你備份.css檔案

再次提醒各位每個風格的css都不一樣
Open

代碼: 選擇全部

template/(你的風格)/(你的風格).css
FIND (尋找)

代碼: 選擇全部

/* Quote & Code blocks */
或者

代碼: 選擇全部

quote
EDIT (修改)
紅字 藍色綠色的修改就可以了
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
補充 (COMMENT)
你或許會問我上面那段代碼的下面還有一段也是QUOTE和CODE的

代碼: 選擇全部

.quotetitle { margin: 10px 5px 0px 5px; padding: 4px; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #A9B8C2; color: black; background-color: #A9B8C2; font-size: 8pt; }
.quotecontent { margin: 0px 5px 10px 5px; padding: 5px; border-color: #A9B8C2; border-width: 0px 1px 1px 1px; border-style: solid; color: black; font-weight: normal; font-size: 8pt; font-family: Verdana, sans-serif; background-color: #FAFAFA; }
不過你改動那個boder-style: 還是不會有反應的
目前狀態圖檔
GoKo Music進度: 10%

問個問題不要緊可是沒有發文格式、問題不夠詳細情況,難道要用猜嗎?
新手必讀
[教學] 基本認識、學習、隨我架設phpBB的新手通 -更新至2.0.22
問問題的技巧
http://www.phpbb-tw.net/phpbb/viewtopic.php?t=44340
MOD安裝教學及轉碼
http://www.phpbb-tw.net/phpbb/viewtopic.php?t=22832
主題已鎖定

回到「非官方認證風格」