竹貓星球

發表於 : **2006-04-01 00:38**

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

圖例:

框線的語法

首頁頁面框的內及外框線

打開: 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

好了, 有閒再續.

.

發表於 : **2006-04-01 01:01**

哇真是太感謝kkt了我正想找一個比較簡單的方面
略微修改一下框線的部份

發表於 : **2006-04-05 09:37**

奇怪..我用ridge沒效過，反而變成Solid

發表於 : **2006-04-05 13:12**

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

未知您的那一段如何改法? 可貼出來看看.

發表於 : **2006-05-28 08:24**

續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: 還是不會有反應的

竹貓星球

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

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