由于
Home首页不能直接定义样式,造成了现在大家的Home页基本样式千篇一律的格局,个性全无,Home页
风格与自己的
论坛风格大相庭径。怎么解决这个
问题,让Home首页也玩css?
其实Home首页是有样式表的,可惜他在Home页
插件目录上,地址是:http://XXXXXX.uu1001.com/hack/home/image/home.css(其中:XXXXXX为任意站名)。我们不能直接编辑他,但我们可以想办法自己做个类似的css覆盖原来的。具体操作如下:
(一)熟悉Home页css
下面是Home页原版css,他是修改Home页css的依据:
Quote:
body{font-family:"Trebuchet MS" simsun;font-size:12px;background:#2E556B;}
h1,h2,h3,h4,h5,h6,form,body{padding:0;margin:0}
td,th,div{word-break:break-all;word-wrap:break-word}
table{empty-cells:show;}
img{border:0;}
textarea,input,select{font:12px Arial;padding:1px 3px 0 3px;vertical-align:middle;margin-bottom:1px}
.c{clear:both;height:1px; overflow:hidden; margin-top:-1px}
.b{font-weight:bold}
.tal{text-align:left}
.tac{text-align:center}
.tar{text-align:right}
.fr{float:right}
.fl{float:left}
.fn{ font-weight:normal}
a{text-decoration:none;color:#3070ce}
a:hover{text-decoration:underline;}
#tbody{ width:810px; margin:auto;}
#tbodyWrap{ width:100%; float:left; background:#fff; height:100%}
#header,#main,#footer{ width:796px; margin:auto}
.layoutTableA { width:796px; table-layout:fixed; background:#fff}
.mainTableA1{ width:260px;}
.mainTableA2{ width:360px}
.mainTableA3{ width:160px}
.wrapTd{ width:5px;}
#picplayer{ width:242px; margin:auto;}
#picplayer img{ width:240px;border:1px solid #000; float:left; clear:right}
.t2{width:100%}
.cl1{color:#003DD8}
.cl2{color:#FF7000}
.cl3{color:#07519a}
.cl4{color:#98C0DE}
.gray,.listD li em cite a{ color:#aaa}
.bgA{ background:#E0F0F9;}
.bgB{ background:#F3F8EF;}
.bgC{ background: url(bluebg.gif) repeat-x 0 0; float:left; width:100%}
.bgD{ background:#F3FCFF}
.h2A{ font-size:14px;padding:.5em 0; font-weight:bold; text-align:center; }
h3{ font-size:13px; padding:.6em .5em}
h3.h3A{ background:url(bgC.gif) repeat-x center; border:1px solid #B3DAE6; margin:.1em; padding:.2em .2em .1em;}
h3.h3B{ padding:.5em .5em .2em; margin:0}
h3.h3C{ border-bottom:1px solid #eee}
h3 span{ font:11px Tahoma;color:#CCC}
h5{ padding:1em .5em; text-align:center; font-size:13px;}
.topbar{ padding:.3em; border-bottom:1px solid #A6CBE7; }
.logo{ float:left}
.topgg{ float:right; margin-top:1em}
.guide{ padding:.3em; border:1px solid #DAEBCD; line-height:1.5em; height:100%;}
.guide ul{ list-style:none; padding:0; margin:0;}
.guide ul li{ float:left; padding:0 1em ; border-right: #eee 1px solid; }
.guide ul li a{ float:left; }
.tags ul{ margin:.5em; padding:0;text-align: justify;list-style:none;}
.tags li{float:left; padding:.3em .2em .3em .3em; list-style:none; font:12px/16px simsun; height:14px; width:30%; overflow:hidden; text-align:center}
.dlA { padding:.2em 0 .3em 105px; margin:0 1em; list-style:none; height:7em; min-height:6.5em }
.dlA dd{ padding:0; margin:0;}
.dlA dd.txt{ line-height:1.1em; text-indent:2em }
.dlA .pic img{ margin:1em 0 ; background:#fff; padding:.4em; position:absolute; margin-left:-110px; border:1px solid #eee}
.dlB { padding:.2em 0 0 70px; margin:.5em .5em ;}
.dlB dt{ font-size:14px; margin-bottom:.5em; height:16px; overflow:hidden}
.dlB dd{padding:0; margin:0; }
.dlB dd.txt{ line-height:1.1em; text-indent:2em; color:#999}
.dlB .pic img{ margin:0 ; background:#fff; padding:.1em; position:absolute; margin-left:-70px; border:1px solid #ccc}
.mainTableTd{ border:1px solid #A6CBE7; vertical-align:top; overflow:hidden}
.gg{ margin:.5em auto;}
.listA { padding:.5em 0; margin:0; float:left; width:100% }
.listA li{ list-style: none; width:44%; padding:0 1% 0 4%; float:left; overflow:hidden; height:20px; line-height:20px; display:block; background:url(dotC.gif) no-repeat .5em .2em}
.mainTableA3 .listA { width:90%}
.mainTableA3 .listA li { float: none; padding-left:1.5em; width:90%}
.listB{ padding:.5em; margin:0; float:left; width:65%}
.listB li{ list-style:none;width:100%; padding:0; height:20px; line-height:20px; overflow:hidden}
.listB li a{ color:#000}
.listC{ padding:.5em; margin:0; }
.listC li{ list-style: none; padding-left:1em;background: url(dotD.gif) no-repeat .2em .5em; height:16px; overflow:hidden }
.listC li em { padding-left:1em}
.listC li em,.listD li em{ font-style:normal; float:right; color:#aaa; text-align:right}
.listD {padding:.5em; margin:0;}
.listD li{list-style: none; padding-left:.8em; background: url(dotD.gif) no-repeat .2em .5em ;height:16px; line-height:16px; overflow:hidden}
.listD li a{ color:#333}
.listD li em { width:30%}
.listD li em cite{ float:left; text-align:left; font-style:normal}
.listE a{ font-size:12px}
.boxA { padding:.5em .8em}
.paihang td{ padding:.2em 0 0 .3em; line-height:1.4em; border-bottom:1px solid #eee}
.gg img{ padding:0; margin:0; display:inline}
.footguide { width:100%; float:left; padding:.5em 0; text-align:center}
.footguide ul{ padding:0; margin:0}
.footguide li{ display:inline; padding:.2em .5em 0; font-size:14px;}
#siteInfo { padding:2em ; text-align:center;}
(二)修改Home页css
有了Home页基本css我们就完全可以对Home页开始全新的布局和配色了。在Home页css原版基础上根据自己论坛样式、配色做相应修改,怎么改得看自己的css工夫了,大致上与论坛css方法差不多,但也有些是Home页特定的定义段。这个是本贴难点,改css不是一两天的事,自己多摸索
例如:修改背景、鼠标样式 body{font-family:"Trebuchet MS" simsun;font-size:12px;color: #色码(整体的);background:url(背景图片地址);CURSOR:Url('鼠标指针地址')}
其他自己可以试着改了
(三)放置css模块 修改好这个css后放在哪里?按下面方法做吧
后台——插件中心——点 HOME首页 插件管理——自定义模块 添加新模块 唯一标志符:
100 (只允许数字)
模块描述:
css 模块内容:
Quote:
<!--css--> <style type="text/css">
你修改好的Home页css内容
</style> <!--css-->
将css模块拖到最前面位置
(放在最前的目的是第一时间用新css覆盖原来系统配置的css),然后点
保存布局,
更新(每调整css内容后可以单个更新css模块),最后Home首页看效果
呵呵,这是我的
效果演示地址:http://uutest.uu1001.com/home.php 因时间关系粗糙了点,相信大家会做得比我的漂亮~
友情提示:本贴内容纯粹提供大家一个方法,本人不代做,有问题请在风格版求助解决。因css修改有一定难度,对css不熟或者刚接触UU的新手建议暂不要做他。
由于近来天天忙于UU新手版工作及年底工作忙,N久没出东西了,昨天的灵感今天就出给大家了,仓促中难免有误,发现将及时更正。更希望各路朋友多予以指教,希望大家更多的支持Uu~ 请尊重他人劳动,转载请注明出处。此贴 Uu后援站℡ 拥有最后解释权