就拿最基本的摸版leobbs風格摸版來說
控制碼:
<html>
<head>
<title>$page_title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=big5">
<meta name=keywords
content="雷傲,論壇,異靈,cgi,leobbs,leoboard,LB5000,bbs,leo,perl,lb,lbplus">
$coolmeta
<script language="javascript"
type="text/javascript"
SRC="$imagesurl/board.js"></SCRIPT>
$coolclick
<!--end Java-->
<!--css info(editable)-->
<style>
A:visited{TEXT-DECORATION: none}
A:active{TEXT-DECORATION: none}
A:hover{TEXT-DECORATION: underline
overline}
A:link{text-decoration: none;}
.t{LINE-HEIGHT: 1.4}
BODY{FONT-FAMILY: 新細明體; FONT-SIZE:
9pt;}
caption,TD,DIV,form
,OPTION,P,TD,BR{FONT-FAMILY: 新細明體;
FONT-SIZE: 9pt}
INPUT{FONT-SIZE: 9pt;}
textarea, select {border-width: 1;
border-color: #000000;
background-color: #efefef;
font-family: 新細明體; font-size: 9pt;
font-style: bold;}
</style>
<!--end css info-->
</head>
<link href="$imagesurl/leobbs.ico"
rel="SHORTCUT ICON">
<body $lbbody>
<div id="popmenu" class="menuskin"
onMouseover="clearhidemenu();highlightmenu(event,'on')"
onMouseout="highlightmenu(event,'off');dynamichide(event)"></div>
<SCRIPT>
<!--
function valigntop(){}
function valignend(){}
-->
</SCRIPT>
$lbboard_main
</body>
</html> |
|
其中:
A:hover{TEXT-DECORATION: underline overline}
是關於鼠標的修改 (underline
overline的意思就是下劃線和上劃線,就是當鼠標移動到超連結上的時候的樣子)
舉個例子: MacOS外觀的鼠標設定是當指向超連結的時候為十字形~並有虛下劃線和凹進去的樣子,控制碼為:
A:hover { LEFT: 1px; POSITION: relative; TOP: 1px;
CURSOR: crosshair;BORDER-BOTTOM: #808080 1px dotted
A:hover ;}
更多特效可以在網上搜集
最重要的就是這個部分
<SCRIPT>
<!--
function valigntop(){}
function valignend(){}
-->
</SCRIPT>
為論壇所有表格的上美化邊框和下美化邊框的JS使用控制碼,
因為leobbs風格裡沒有這兩部分美化邊框,所以控制碼是空的。
如果有上下美化圖片
就用Macos蘋果風格為例子
<SCRIPT>
<!--
function valigntitle(){
document.write("<table width=95% border=0
cellpadding=0 cellspacing=0 align=center>")
}
function valigntop(){
document.write("<SCRIPT>valigntitle()</SCRIPT><tr><td><img
src=$imagesurl/macos/top_1.gif></td><td
background=$imagesurl/macos/top_2.gif width=100%
align=center></td><td><img
src=$imagesurl/macos/top_3.gif></td></tr></table>")
}
function valignend(){
document.write("<SCRIPT>valigntitle()</SCRIPT><tr><td><img
src=$imagesurl/macos/end_1.gif></td><td
background=$imagesurl/macos/end_2.gif width=100%
align=center></td><td><img
src=$imagesurl/macos/end_3.gif></td></tr></table>")
}
-->
</SCRIPT>
所以大家做外觀的時候如果有上下美化邊框的話,只需要按照這個圖片名字然後設定自己要設定的路徑就可以了,
具體更多方法可以通過了解鎖相關HTML控制碼來學習。
需要注意的是,與論壇其他檔案不同,在模版檔案中,$imagesurl指代non-cgi/images
最後
lbboard_main
就是指代論壇的主體部分了, 你可以在這裡的上方和下方加入論壇頂部和底部的圖片。
所以如果你想在論壇的頂部增加圖片的話,只要不涉及到頂部導航欄,直接加在這個控制碼的上面就可以。
如果涉及頂部選單欄樣式,則需要在頂部樣式檔案中修改。
以Macos蘋果風格為例子
就可以在這個上面加入,就是頂部圖片了。
控制碼:
<table width=95%
border="0" cellspacing="0"
cellpadding="0"
align="center"><tr><td
width=131><img
src=$imagesurl/macos/toplogo.jpg></td><td
background=$imagesurl/macos/toplogobg.jpg
width=100%></td><td width=131><img
src=$imagesurl/macos/toplogo2.jpg></td></tr></table>
<table width=95% border="0"
cellspacing="0" cellpadding="0"
align="center"><tr><td
width=131><img
src=$imagesurl/macos/1.gif></td><td
background=$imagesurl/macos/2.gif
width=100%></td><td width=131><img
src=$imagesurl/macos/3.gif></td></tr></table> |
|
或者加入到cgi-bin/myskin下的相對應的外觀的頂部pl檔案裡也一樣,但需要加輸出,格式為$output
.= qq~你要編輯的在網頁上顯示出來的內容~;
下面是搜集來的CCS常用控制碼介紹:
A:link,A:active,A:visited{
TEXT-DECORATION:none ;
Color:#000000
}
A:hover{
TEXT-DECORATION: underline;
Color:#4455aa
}
上面這指的是鼠標在對連結文字進行操作、操作後和操作時所產生的效果
A屬性
link:文字連結的預設顏色、效果等
active:按時產生的效果
visited:按後的效果
hover:鼠標懸停在連結上時所產生的效果
Decoration屬性
none:無效果
underline:下劃線效果
大家可以根據這兩種常用屬性來配出喜歡的連結文字效果。
BODY{
FONT-SIZE: 11.5px;
COLOR: #000000;
FONT-FAMILY: Verdana,新細明體;
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;
}
body:指HTML內<body>標籤的屬性
font-size:字體大小,單位分為px(象素)和pt(磅),一般我們常用的是象素尺寸為12px或者11.5px,磅的大小為9pt或者8pt,兩種單位最終顯示的大小都是一樣的,用哪種單位就看個人習慣了。
color:預設情況下是字體顏色,顏色大家可以使用RGB顏色,也可以使用16位顏色控制碼。推薦使用16位顏色控制碼。
FONT-FAMILY:字體樣式,大家會經常看到在font-family設定裡一下出現3種字體(例:FONT-FAMILY:
Verdana,Tahoma,新細明體),一般前兩種為英文字體,最後的是中文字體。英文字體設定兩種是為了防止如果客戶端沒有第一種字體,馬上使用第二組英文字體。大多數情況下,中文作業系統中都會支援新細明體,所以我們也就不必要再設定第二種中文字體了。
scrollbar:指滾動條
scrollbar-face-color:表面顏色
scrollbar-highlight-color:高亮區顏色
scrollbar-shadow-color:陰影顏色
scrollbar-3dlight-color:3D顏色
scrollbar-arrow-color:箭頭顏色
scrollbar-track-color:軌道顏色(滾動條底色)
scrollbar-darkshadow-color:深陰影顏色
IE5.5以後的版本都會支援這種自定義滾動條的效果。 |