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

光子
约定の守侯
热心会员奖 优秀斑竹奖
级别: 论坛版主


精华: 1
发帖: 1284
威望: 681 点
金钱: 359 RMB
贡献值: 535 点
贡献值: 0 点
LQB: 0 个
注册时间:2006-05-05
最后登录:2008-09-23

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

管理提醒:
本帖被 lanyer 执行取消置顶操作(2008-05-15)
由于Home首页不能直接定义样式,造成了现在大家的Home页基本样式千篇一律的格局,个性全无,Home页风格与自己的论坛风格大相庭径。怎么解决这个问题,让Home首页也玩css?

其实Home首页是有样式表的,可惜他在Home页插件目录上,地址是:http://XXXXXX.x.lunqun.com/hack/home/image/home.css(其中:XXXXXX.x为任意LQ二级站名)。我们不能直接编辑他,但我们可以想办法自己做个类似的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://crystal.a.lunqun.com/home.php 因时间关系粗糙了点,相信大家会做得更漂亮~




友情提示:本贴内容纯粹提供大家一个方法,本人不代做,有问题请在风格版求助解决。因css修改有一定难度,对css不熟或者刚接触LQ的新手建议暂不要做他。





请尊重他人劳动,转载请注明出处

Posted: 2007-11-23 11:25 | [楼 主]
gjjx
级别: 骑士


精华: 0
发帖: 241
威望: 157 点
金钱: 536 RMB
贡献值: 0 点
贡献值: 0 点
LQB: 0 个
注册时间:2007-11-11
最后登录:2008-07-15

 

厉害呀,。好帖。。谢谢提供,我们新手有福了
我的论坛:http://bbs.2y2r.org
Posted: 2007-11-23 12:41 | 1 楼
gx12365
优秀斑竹奖
级别: 论坛版主


精华: 0
发帖: 658
威望: 374 点
金钱: 5151 RMB
贡献值: 500 点
贡献值: 0 点
LQB: 0 个
注册时间:2006-05-28
最后登录:2008-05-19

 

顶起来
Posted: 2007-11-23 12:45 | 2 楼
wlj
级别: 精灵王


精华: 1
发帖: 1100
威望: 665 点
金钱: 2869 RMB
贡献值: 0 点
贡献值: 2 点
LQB: 0 个
注册时间:2006-03-16
最后登录:2008-05-06

 

光子  你这个版主真是厉害!
我论坛有垮台教程/多种新多井栏/新垮台风格包下载!
我的论坛:http://wangliujv.a.lunqun.com/
我的首页:http://o.thec.cn/sxhktv
Posted: 2007-11-23 13:04 | 3 楼
级别: 精灵王


精华: 1
发帖: 1412
威望: 1143 点
金钱: 2858 RMB
贡献值: 318 点
贡献值: 0 点
LQB: 0 个
注册时间:2006-02-08
最后登录:2008-09-10

 

强大
qyzh.cn
Posted: 2007-11-23 14:06 | 4 楼
無痕
级别: 精灵王


精华: 0
发帖: 773
威望: 643 点
金钱: 1646 RMB
贡献值: 0 点
贡献值: 0 点
LQB: 0 个
注册时间:2006-03-11
最后登录:2008-11-10

 

期待有教程
欢迎访问尘缘如梦论坛
http://cyrm.a.lunqun.com
两性论坛http://bbs.1sqy.net.cn
Posted: 2007-11-23 14:12 | 5 楼
大群
方便别人 提高自己
特殊贡献奖 优秀斑竹奖
级别: 论坛版主


精华: 2
发帖: 1821
威望: 1045 点
金钱: 1246 RMB
贡献值: 531 点
贡献值: 0 点
LQB: 0 个
注册时间:2006-02-22
最后登录:2008-11-21

 

好方法!没有做不到只有想不到!只要想得到就能办的好!
我的论坛地址:  http://qun.a.lunqun.com
众里寻他 为会员提供一切尽可能的帮助
Posted: 2007-11-23 14:57 | 6 楼
lanyer
〓管管新手.....
级别: 管理员


精华: 1
发帖: 2635
威望: 1242 点
金钱: 7641 RMB
贡献值: 831 点
贡献值: 2 点
LQB: 0 个
注册时间:2007-11-12
最后登录:2008-11-22

 

感謝分享,光子。
论群非官方群 13274839  里面都是老会员了 如遇管理员和版主不在的情况 老会员也会解答你的问题的
Posted: 2007-11-23 16:19 | 7 楼
javadz
级别: 圣骑士


精华: 0
发帖: 541
威望: 320 点
金钱: 1010 RMB
贡献值: 11 点
贡献值: 0 点
LQB: 0 个
注册时间:2007-10-12
最后登录:2008-11-09

 

  好帖子,顶,
欢迎访问JCE技术论坛:http://javadz.c.lunqun.com    QQ: 360193243
Posted: 2007-11-23 20:20 | 8 楼
hybmn
级别: 新手上路


精华: 0
发帖: 32
威望: 18 点
金钱: 55 RMB
贡献值: 0 点
贡献值: 0 点
LQB: 0 个
注册时间:2007-01-26
最后登录:2007-12-21

 

谢谢!收藏!
Posted: 2007-11-24 00:23 | 9 楼
« 1 234» Pages: ( 1/4 total )
帖子浏览记录 版块浏览记录
免费论坛 » 新手教程