Rss & SiteMap
通信圈 http://m.k-94.cn/bbs
(一) 制作風格步驟
第一步:確定你的模板源 | 想以哪個模板為基礎做新風格,你就在基本設置里設置那個風格為論壇的默認風格。 |
第二步:新建模板 | 風格界面模板總管理--右邊下方有個 新建模板 ,在旁邊的輸入框里寫下你想給你的新模板取的名字,認識點添加,就創(chuàng)建了一個新的模板。(新建模板將把當前論壇默認模版數(shù)據(jù)復制到新的模板中) |
第三步:新建風格樣式 | 風格界面模板總管理--修改CSS樣式---在最下面一行里進行設置 |
第四步:修改風格樣式 | 設置CSS 樣式來改變論壇里表格,文字顏色等的基本樣式。(具體見風格制作CSS解析說明) |
第五步:修改模板樣式 | 在風格模板管理里修改模板的樣式,而達到獨特的風格效果。(具體見模板解析說明) |
(二) 7。1風格制作CSS解析說明
<Style type="text/css">
| 論壇文字鏈接的顏色 |
A:hover { TEXT-DECORATION: underline;Color: #4455aa } | 鼠標懸停在鏈接上時所產(chǎn)生的效果 |
BODY { FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: Tahoma; text-align: center; margin: 0; scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } | FONT-SIZE: 12px 字體的大小 COLOR: #000000; 字體的顏色 |
font { line-height: normal; } | 檢索或設置對象的行高。即字體最底端與字體內(nèi)部頂端之間的距離。 font:為字體屬性 line-heigt:為行距屬性,normal為默認,當然這里也可以用px或者pt來設置行距 |
TD { font-family: Tahoma; font-size: 12px; line-height: 15px; } | 表內(nèi)橫向格(行) |
th { background-image: url(Skins/Default/css/default/bg1.gif); background-color: #4455aa; color: white; font-size: 12px; font-weight: bold; height:25;} | 表內(nèi)縱向格(比如一級版塊欄目那里的一條,友情論壇最上面那一條等) background-image:背景圖片 background-color:背景顏色 Color:默認為文字顏色 font-size:字體大小 font-weight:字形,一般有4種屬性:normal(默認)、bold(加粗)、bolder(特粗)、lighter(特細) |
th a { COLOR: #FFFFFF; TEXT-DECORATION: none; } | th樣式里文字連接的默認顏色、效果 |
th a:hover { COLOR: #FFFFFF; TEXT-DECORATION: underline; } | th樣式里鼠標懸停在鏈接上時所產(chǎn)生的效果 |
td.TableTitle1 { background-color: #6595D6; Color: #FFFFFF; } | 7。1特有的那個一條里的 XML 的背景顏色和字的顏色 |
td.TableTitle2 { background-color: #E4E8EF; } | 這個屬性是用在DVBBS用戶列表,有“所有用戶列表”字樣那里的顏色。 |
td.TableBody1 { background-color: #FFFFFF; line-height: normal; } | 這個是用在DVBBS兩種穿插顏色中的第一主色屬性。比如版塊介紹那一塊 |
td.TableBody2 { background-color: #E4E8EF; line-height: normal; } | 這個是用在DVBBS兩種穿插顏色中的第二主色屬性。比如斑竹那一條的顏色 |
td.TableBody3 { background-color: #6595D6; } | 我還沒有找到是做什么的 |
td.TopLighNav { background-image: url(Skins/Default/css/default/bottombg.gif); } | 這是頂部表格的下背景圖片。 |
td.TopLighNav1 { background-image: url(Skins/Default/css/default/tabs_m_tile.gif); } | 這里就是導航欄的背景圖片了 |
td.TopLighNav2 { background-color:#FFFFFF } | 這個屬性也是頂部表格的,它是頂部表格的背景顏色 |
.tableBorder1 { width:98%; border: 1px; background-color: #6595D6; } | 這是表格邊線屬性(border為邊線寬度)基本的表格都是調(diào)用的這個 |
.tableBorder2 { width:98%; border: 1px #DEDEDE solid; background-color: #EFEFEF; } | 這個是DVBBS的第二導航欄屬性,其border中的solid為邊線是直線,也可以設置成其它的,比如dotted(以點組成的虛線)、dashed(以線段組成的虛線)等等,就好象這一條 動網(wǎng)先鋒論壇 → 動網(wǎng)論壇 → 『 動網(wǎng)風格模板區(qū) 』 → 發(fā)表帖子 下面的表格的屬性 |
.tableBorder3 { width:98%; border-left: #6595D6 1px solid; border-right: #6595D6 1px solid; border-top: 0px; border-bottom: #6595D6 0px solid; background-color: #EFEFEF;} | 有一次看見過在哪調(diào)用過,不過現(xiàn)在忘了,也沒有找到,這個的效果就是表格的左邊和右邊有一條線,上下沒有 |
.tableBorder4 { width:98%; border: 1px #6595D6 solid; } | dispbbs.asp頁面貼子標題,樹型 打印 那一條的表格樣式 |
.tableBorder5 { border: 1px #6595D6 solid; background-color: #D6E0EF; } | 7。1特有的XML那一個塊塊的表格屬性 |
.singleborder { font-size: 0px; line-height: 1px; padding: 0px; background-color: #6595D6 } | 首頁登陸那一塊右邊,新進來賓那一條下面的分隔線的顏色 |
#TableTitleLink A { COLOR: #FFFFFF; TEXT-DECORATION: none; } #TableTitleLink A:hover { COLOR: #FFFFFF; TEXT-DECORATION: underline; } #nobold { font-weight: normal; } | 縱向表格內(nèi)文字鏈接的屬性 |
input,select,Textarea,option { font-family: Tahoma,Verdana,"宋體"; font-size: 12px; line-height: 15px; COLOR: #000000; } | 輸入框、選擇框、文本框、選擇按鈕的屬性 |
.normalTextSmall { font-size : 11px; color : #000000; font-family: Verdana, Arial, Helvetica, sans-serif; } | 下腳注的字體樣式 |
.menuskin { BORDER: #666666 1px solid; VISIBILITY: hidden; FONT: 12px Verdana; POSITION: absolute; BACKGROUND-COLOR: #EFEFEF; background-image: url("Skins/Default/dvmenubg3.gif"); background-repeat: repeat-y; } | 下拉菜單屬性,Border是邊框?qū)傩,BACKGROUND-COLOR是背景顏色屬性,background-image是背景圖片 |
.menuskin A { PADDING-RIGHT: 10px; PADDING-LEFT: 25px; COLOR: black; TEXT-DECORATION: none; } | 這里是當鼠標鼠標移動到下拉菜單上所產(chǎn)生的效果,PADDING-RIGHT是文字右邊距,PADDING-LEFT為左邊距,大家可以根據(jù)自己的需要來調(diào)整 |
.menuitems { margin: 2px; padding: 1px; word-break: keep-all; text-align: left; line-height: 14pt; } | 下拉菜單的基本屬性 |
.BrightClass { background-color: #D7D7D7; } | 暫時沒有找到是做什么的 |
.Redfont { color: red; } | 首頁在線圖例 那里調(diào)用的顏色效果,還有幾個紅色的地方也是調(diào)用的這個效果 |
.BlueFont { color: #6595D6; } | 首頁最下面在線列表那一塊 的 當前在線等前的小方塊的顏色 |
.ImgOnclick { cursor: pointer; } | 風格 這個菜單的樣式 |
.Menu_popup{display:none;} | 用戶控制面板的樣式 |
/* Div模板部分 */ .iTableBorder { width: 98%; line-height: 15pt } | 首頁底部論壇狀態(tài)部分 三個標志 有新帖 沒新帖 那一塊的樣式 |
hr { height: 1px; color: #6595D6; width: 100%; } | 分隔線的樣式,比如友情論壇下的的那條分隔線 |
/* 編輯器特效CSS樣式 */ div.quote { margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#F3F3F3 ;line-height : normal ;} | 好象是引用其他人發(fā)言時,引用框的效果 |
div.HtmlCode { margin: 5px 20px; border: 1px solid #CCCCCC; padding: 5px; background: #FDFDDF ; font-size: 14px; font-family: Tahoma; font-style: oblique; line-height: normal; font-weight: bold; } div.info { border-top: 1px dotted #CCCCCC; padding: 5px; line-height: normal; color: #C5C5C5; width: 100% } font.ShowTools { color : white; background-color: #B88FFC; } .magicframe { border:1px solid #CCCCCC; } | 暫時還沒有仔細去找這部分是哪的 |
.PageInput { border: solid 1px #D6E0EF; BACKGROUND-COLOR: #FAFAFA; height : 18px; FONT-FAMILY: Arial; FONT-SIZE:11.5px; } | 這是分頁那里的效果 |
</Style> | 結(jié)束 |