就拿最基本的摸版leobbs风格摸版来说
代码:
<html>
<head>
<title>$page_title</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312">
<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以后的版本都会支持这种自定义滚动条的效果。 |