« 1 2345» Pages: ( 1/7 total )
本页主题: 打破千篇一律Home首页样式,Home首页也玩css 打印 | 加为IE收藏 | 复制链接 | 收藏主题 | 上一主题 | 下一主题

光子
我素我行
优秀版主奖 终身成就奖
级别: 荣誉会员

 打破千篇一律Home首页样式,Home首页也玩css

11
管理提醒:
本帖被 吗啡 执行加亮操作(2007-11-27)
由于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后援站℡ 拥有最后解释权
本帖最近评分记录:
  • 威望:+30(荒漠孤影) 优秀文章
  • 威望:+5(牛小魚) 光子的贴全部精品
  • 威望:+50(吗啡) 刚刚看到.太有才华了
  • 威望:+20(风油精) 原创内容
  • 威望:+1(水中月) 最后一分,也加了~~
  • 威望:+3(水中月) 佩服ing,正需要~~
  • 威望:+3(水中月) 感谢喽~~


  • 友情提示:由于事务繁忙,本人不接承论坛各类制作

    PHPWind for Uu1001制作点滴
    PHPWind for Uu1001新手教程
    顶端 Posted: 2007-11-22 20:05 | [楼 主]
    小七。
    不,我还没醉~
    级别: 精灵王

     

    支持光子
    你彻底败了。
    顶端 Posted: 2007-11-22 20:14 | 1 楼
    大嘴鳄鱼
    级别: 骑士

     

    正需要!感谢光子大侠
    我是可爱小菜鸟,前来向老鸟学习。
    神农论坛,畅所欲言
    神农山水美如画,论坛精彩纳百家。
    顶端 Posted: 2007-11-22 20:19 | 2 楼
    月光轻吟
    ★时间的仆人★
    级别: 荣誉会员

     

    光子姐姐又雪中送炭了哦,模板区正举办最靓HOME首页比赛呢,这教程一定能让更多的朋友做出更漂亮的首页来的哦,谢谢姐姐分享教程:)

    个人签名、论坛动静态顶图制作,宠物交流,点击LOGO进~
    顶端 Posted: 2007-11-22 20:58 | 3 楼
    michael
    级别: 精灵王

     

    感谢光子姐姐。
    顶端 Posted: 2007-11-22 21:33 | 4 楼
    123qq
    看签名
    级别: 精灵王

     

    支持光子 
    顶端 Posted: 2007-11-22 21:52 | 5 楼
    daphne
    级别: UU新手帮助组

     

    赫赫....我去研究研究....
    之前就等配色的...赫赫....超感謝滴....
    顶端 Posted: 2007-11-22 22:08 | 6 楼
    mnfac
    繁忙,请假状态
    十佳会员
    级别: 荣誉会员

     

    嘿嘿,支持!
    繁忙,请假状态
    友情广告位:
    1.免费500Mphp空间
    2.打工赚U豆,1天10U豆
    3.30粒U豆卖10元,买越多折扣越多。。。

    有兴趣者短消息我http://bbs.uu1001.com/message.php?action-write-touid-27810.html
    顶端 Posted: 2007-11-22 22:44 | 7 楼
    bbsdh
    级别: 圣骑士

     

    佩服的就是你啦
    顶端 Posted: 2007-11-23 00:48 | 8 楼
    伍德
    级别: 骑士

     

    永远支持光子
    顶端 Posted: 2007-11-23 04:31 | 9 楼
    « 1 2345» Pages: ( 1/7 total )
    帖子浏览记录 版块浏览记录
    Uu1001免费论坛官方站 » 模板风格


    Time now is:10-11 14:30, Gzip enabled 浙ICP备06052510号
    Powered by PHPWind & Uu1001 v2.0 Certificate Code © 2003-08 PHPWind.com Corporation