2DJGAME! NOVO

標題: 2DJ自修改CSS风格不瞎眼系列欢迎使用 [打印本頁]

作者: keyminori    時間: 2014-11-14 11:45
標題: 2DJ自修改CSS风格不瞎眼系列欢迎使用
本帖最後由 keyminori 於 2014-11-14 12:12 編輯

本CSS基于Stylish完成
修改了 首页 | 帖子列表 | 正文 等部分 实际效果自己安装了斟酌使用吧
效果
[attach]44649[/attach]

请到谷歌商店下载安装Stylish才能使用
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?utm_source=chrome-ntp-icon

安装完成后新建样式

载入以下CSS

/* CSS3变换属性 */
a { color: #333; text-decoration: none;
-webkit-transition:color 0.5s ease-in, color 0.3s ease-out, background-color 0.5s ease-in, background-color 0.3s ease-out, border-color 0.5s ease-in, border-color 0.3s ease-out;
-moz-transition:color 0.5s ease-in, color 0.3s ease-out, background-color 0.5s ease-in, background-color 0.3s ease-out, border-color 0.5s ease-in, border-color 0.3s ease-out;
-o-transition:color 0.5s ease-in, color 0.3s ease-out, background-color 0.5s ease-in, background-color 0.3s ease-out, border-color 0.5s ease-in, border-color 0.3s ease-out;
transition:color 0.5s ease-in, color 0.3s ease-out, background-color 0.5s ease-in, background-color 0.3s ease-out, border-color 0.5s ease-in, border-color 0.3s ease-out;}
a:hover { text-decoration: none; color: #2EA6FF; text-shadow: 1px 1px white;}
a img { border: none; }

/* 页面布局 */
#pt, .bw0 {
background: transparent !important;
-moz-box-shadow:none !important;
-webkit-box-shadow:none !important;
box-shadow:none !important; }
.ct1 { margin-top: -5px !important; }
.tdats .tfxf { width: 630px !important; }
.alt, .alt th, .alt td { background-color: #F2F2F2; }
.lk img {margin-right: 3px;margin-bottom: 3px;}
.hdc {min-height: 100px;}
.tedt .pt {height: 135px;}
.avtm img { width: 160px; height: auto; } /*大头像*/
#hd h2 {padding:0;}

/* 导航栏 */
#nv {background: #92CFF0;}
#nv li.a {background: #86AABE;}

/* 发帖页面布局 */
#postform  .ct2_a {background: transparent !important; -moz-box-shadow:none !important; -webkit-box-shadow:none !important;box-shadow:none !important; }

/* 贴内消息框 */
.pmb {height: 180px;}

/* 板块列表 */
.bm {border: 1px solid #CDCDCD;background: #F5F5F5;}
.pls {background: #E0E0E0;}
.fl {border: 1px solid #CDCDCD}
.fl .bm_h {border-bottom:0px solid; border-color:rgba(255, 255, 255, 0.9);}
.bm_h { background: -webkit-linear-gradient(top,rgb(228, 248, 255),rgba(255,255,255,0)); background: -moz-linear-gradient(top,rgb(228, 248, 255),rgba(255,255,255,0)); }
.bmw .bm_h { background: -webkit-linear-gradient(top,rgb(228, 248, 255),rgba(255,255,255,0)); background: -moz-linear-gradient(top,rgb(228, 248, 255),rgba(255,255,255,0));}
.fl .bm_c, #online .bm_c, .lk .bm_c {background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(0, 0, 0, 0.04));background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(0, 0, 0, 0.04))}
.ttp {margin-bottom: 5px;padding-top: 10px;border-width: 2px 0 0;background: transparent;}
.tl .th {margin-top: 1px;padding: 0 10px;border-bottom: 1px solid #CDCDCD;background: -webkit-linear-gradient(top,rgb(228,248,255),rgba(255,255,255,0));}
.tl tr:hover th, .tl tr:hover td {background-color: #F8F8F8;}
.tedt .bar {padding: 0 10px 0 0;height: 25px;line-height: 25px;border-bottom:1px solid #CDCDCD ;background:#E4E4E4 ;}
.pl .quote blockquote {padding: 5px 10px 5px 10px;background: #FFEAEA;}
.pl .quote, .pl .blockcode {padding: 10px 10px 10px 10px;}
.ftid a {border:1px solid #CDCDCD}

/* 搜索条 */
#scbar {margin: 10px 5px 0; border: 1px solid #C7E6EA; background: #E3F2FA; height: 43px; line-height: 43px;}
        

/* 两栏布局 */
.ct2_a { margin-bottom: 10px; border-radius: 5px; }
.tbn ul { margin: -1px 1px 0 0; border-top: 1px solid #EAE8E8; border-bottom: 1px solid #FFF; }
.tbn li { margin: 0; padding: 0; border-top: 1px solid #FFF; border-bottom: 1px solid #EAE8E8; }
        .tbn li a { padding: 0 9px 0 10px; }
        .tbn li.a { margin: -1px -1px 0 0; padding: 0; background: #F0F0F0 url({IMGDIR}/bg_tbn_a.png) no-repeat 100% 50%; }
        
/* 标签布局 */
.ie6 .tb, .ie7 .tb { height: 35px; }
.tb li { margin: 0 3px 3px 0; }
.tdats #c1,.tdats #c2,.tdats #c3,.tdats #c4 { margin: 0 3px -1px 0; }
.tb a { padding: 0 9px; border-color: #CDCDCD; background: url({IMGDIR}/bg_tb.png) repeat-x 0 50%; font-size: 14px; border-radius: 5px; }
.tb .a, .tb .a a, .tb .current, .tb .current a { margin-bottom: -4px; padding-bottom: 4px; color: #2EA6FF; border-radius: 5px 5px 0 0; }
.tb_w { padding-left: 20px; }
        .tb_w a { padding-left: 30px; padding-right: 30px; }
        .tb_w .y a { padding-left: 5px; padding-right: 0; }
        .ie6 .tb_w .a { position: relative !important; }
.tb .o { float: right; }
.tb .o, .tb .o a { margin-right: 0; height: 26px; line-height: 24px; border-radius: 5px; }
        .tb .o:active, .tb .o a:active { background-position: 0 -60px; }
        
/* 标签 */
.tb_h li { margin: 3px 3px 3px 0; }
.tb_h .a { margin-top: 0; }
        .tb_h .a a { padding-top: 3px; }
.tb_h .o { margin: 4px 5px 0; }

/* 论坛皮肤下用户页面头部 */
.uhd { margin-bottom: 10px; padding: 20px 320px 20px 20px; border: 1px solid #CDCDCD; background: #F8F8F8; zoom: 1; border-radius: 5px; box-shadow: 0 0 10px #FFF inset; }
        .uhd .ctrl { display: inline; float: right; margin-right: -300px; width: 290px; }
        .uhd .d { padding-left: 140px; }
                .uhd .mt { padding-top: 0; }
                .uhd .avt { display: inline; float: left; margin-left: -140px; }
                        .uhd .avt img { padding: 5px; width: 120px; height: auto; border: none; }
.flw_hd .tns { padding: 0; border: 1px solid #DFDFDF; background: #F8F8F8; border-radius: 5px; }
        .flw_hd .tns th, .flw_hd .tns td { padding: 5px; }
        .flw_hd .tns th { border-right: 1px dashed #DFDFDF; }
        .flw_hd .tns span { font-size: 16px; }
        .flw_hd .tns p a { color: #369; font-weight: 700; }
.flw_hd .flw_specialfo, .flw_hd .flw_specialunfo { float: left; margin: 0 10px; }

/* 发帖回复按钮 */
.pg a, .pg strong, .pgb a, .pg label {border-color:#CDCDCD;}
#pgt .pg, #pgt .pgb { margin-top:0; }
#post_extra_tb label { margin-right: 8px !important; }
.notice_pm, .notice_mypost, .notice_interactive, .notice_system, .notice_manage, .notice_app { margin: 11px 5px 5px 5px;}
#autopbn { border-radius:0px !important; }
.pg strong { border-radius: 90px 2px ;}

/* 自定颜色 */
.tip { background :#fff;}
#threadlisttableid tr:hover, .mod-post:hover .item:hover { background:rgba(235, 255, 255, 0.5); }

/* 自定hover状态 */
.pg a:hover, .pgb a:hover, .sllt:hover, .tedt:hover, .px:hover, .ps:hover, select:hover, #post_extra_tb label:hover, .ttp a:hover, .ttp strong:hover, .tip, .pgbtn a:hover, .avt img:hover, .fl_icn a img:hover {
-moz-box-shadow: 0 0 8px rgb(150, 200, 220);
-webkit-box-shadow: 0 0 8px rgb(150, 200, 220);
box-shadow: 0 0 8px rgb(150, 200, 220);
border-color: #93C3DD;}
.p_pop, .p_pof, .sllt {border: 1px solid  #CDCDCD;}
.pg a:hover, .pgb a:hover { border-radius: 90px 2px }
.pg a, .pgb a, .p_pop:hover, .p_pof:hover, .sllt:hover, .tedt, .px, .ps, select, .edt, #post_extra_tb label, .ttp a, .ttp strong, .tip, .pgbtn a, .avt img, #threadlisttableid tr, .pg_task td img {
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s  ease-in-out;
-o-transition:all 0.5s  ease-in-out;
transition:all 0.5s  ease-in-out;
}



/* 通用属性 */
#chart, #uhd, .ct1, .bdl, .ct3_a .mn, .ct2_a { margin:5px; }
#qmenu_menu, .ct2_a, .bm, .bdl, .pgl a, .pgb a, .avt img, .tedt, .px, .ps, select, .edt, #post_extra_tb label, #uhd, .ct1, #autopbn, .ttp a, .ttp strong, .pgbtn a{ -moz-box-shadow:0 0 2px #CDCDCD; -webkit-box-shadow:0 0 2px #CDCDCD;box-shadow:0 0 2px #CDCDCD; }
   
.px, .pt, .ps, select{border: 1px solid #CDCDCD;}
.ttp a, .ttp strong {border: 1px solid #CDCDCD;}


.pls { width: 200px;  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 90%,rgb(235, 235, 235) 100%,#ffffff 100%); background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 90%,rgb(235, 235, 235) 100%,#ffffff 100%); background: linear-gradient(left, rgba(255, 255, 255, 0) 90%,rgb(235, 235, 235) 100%,#ffffff 100%); overflow: hidden; border-right: 1px solid {CONTENTSEPARATE}; } /* 修正帖子页边栏 by key */
.pls .avatar img { padding: 5px 5px 8px; background: #FFF; width:160px; }  /* 修改大头像 by key */
.bui .m img { width:160px;}
.bui .i {width: 320px;}
.bui {width: 500px !important;margin-top: -6px!important;}/* 修正头像帖内悬浮 by key */
.pl .quote { background: rgba(249, 249, 249, 0.8)  no-repeat 20px 6px;} /* 修改引用透明 by key */
.pls p, .pls .pil, .pls .o {margin: 5px 10px;}

应用 对象为 网址前缀 https://bbs4.2djgame.net/
之后保存就可以啦 。

因为以前做过DZ的风格, 这些都是搬运以前做的稍加修改而成 。 随便用用吧 ,不喜欢的部分可以自己修改删除 。 就是这样
作者: mininowe    時間: 2014-11-14 15:29
纯支持,总是有能人来改变这操蛋的现实
作者: Dandelion    時間: 2014-11-14 15:38
嘛,粉粉的感觉只能说有点不习惯......总会好的
作者: Noyb    時間: 2014-11-14 20:47
LZ真有心, 辛苦了

現在眼睛也開始慢慢習慣了。。。
作者: 只爱tolove    時間: 2014-11-15 00:25
楼主辛苦了,感觉下面这一堆东西好高端
作者: 真凤凰天舞    時間: 2014-11-15 01:21
LZ的帖子太高深了,理解不能
作者: Lanfebit    時間: 2014-11-15 01:32
之前主要没太多考虑不同显示器上的效果……

过阵子有时间的时候会再调整下的。

欢迎会员推荐自己设计的风格……就算不采用也会有奖励的。
作者: jiang52673    時間: 2014-11-15 13:57
这  额 感觉好复杂不会搞
作者: タマ姉の夫    時間: 2014-11-15 17:21
如果覺得刺眼也是可以調整螢幕的亮度之類,就不會覺得太亮了
作者: 平逃笨蛋神    時間: 2014-11-20 06:21
作為新人可能是沒有經過以前的時代
所以意外的還是很能接受現在的感覺

作者: opopkoloi    時間: 2014-11-22 15:56
感觉好不习惯,好像女孩子的论坛,我还是喜欢原来那个PHPBB的版面
作者: 枫华凝露    時間: 2014-11-22 16:09
喜欢粉色>_<
作者: Lelou    時間: 2014-11-23 22:10
改版后的名片排版确实惨不忍睹。
其实我比较倾向轻美观,重效率。
一切都为了最快的页面打开速度,毕竟国内的访问速度压力蛮大的。
作者: iazelda    時間: 2014-11-23 23:54
论坛界面改了之后当日新帖的颜色标示没有了啊,希望能恢复
作者: keyminori    時間: 2014-11-24 09:37
iazelda 發表於 2014-11-23 23:54
论坛界面改了之后当日新帖的颜色标示没有了啊,希望能恢复

现在没问提了 ,  不是颜色标识没了 ,是看不太清 。 现在2DJ风格又变了 现在OK了
作者: keyminori    時間: 2014-11-24 09:37
不过改了之后字好大的样子
作者: 新月夜    時間: 2014-11-24 09:50
这次的似乎不错,配色比较和谐
作者: keyminori    時間: 2014-11-24 10:01
新月夜 發表於 2014-11-24 09:50
这次的似乎不错,配色比较和谐

你不觉得字好大 ,好丑么
作者: Lanfebit    時間: 2014-11-24 10:08
keyminori 發表於 2014-11-24 10:01
你不觉得字好大 ,好丑么


麻烦截图一下,我这里看没感觉太大……


作者: keyminori    時間: 2014-11-24 10:35
本帖最後由 keyminori 於 2014-11-24 10:40 編輯
Lanfebit 發表於 2014-11-24 10:08
麻烦截图一下,我这里看没感觉太大……


现在font 改成14px了 。 以前是11px

[attach]45026[/attach][attach]45027[/attach]

还有超链接的颜色 换个淡一点的比较好 , 边框颜色也换下
作者: Lanfebit    時間: 2014-11-24 10:41
keyminori 發表於 2014-11-24 10:35
现在font 改成14px了 。 以前是11px


那个其实是以前一直就觉得小所以改大了……

这年头大部分人是宽屏吧。。折中调13px好了……

超链接的颜色问题是会影响到整个首页的链接颜色…说真的很蛋痛……
作者: keyminori    時間: 2014-11-24 12:49
本帖最後由 keyminori 於 2014-11-24 12:51 編輯
Lanfebit 發表於 2014-11-24 10:41
那个其实是以前一直就觉得小所以改大了……

这年头大部分人是宽屏吧。。折中调13px好了……

  这样好多了 。     自己再重新改了下
作者: YeYX    時間: 2014-12-28 10:57
没上一段时间,怪不得感觉焕然一新似的了,给楼主32个赞
作者: neolorrnoke    時間: 2015-01-20 13:49
感觉css抹代码好复杂,我只会用图形化
作者: wangjiahui1126    時間: 2015-01-23 23:43
感谢楼主的分享。不过原版也不错啊
作者: flandrecirno    時間: 2015-02-22 01:54
一般 改天有空我也写个
作者: TransAmax    時間: 2021-11-04 21:46
代码大佬,赶紧学学
作者: sunjx97    時間: 2021-11-05 11:10
很好看
作者: fs4ffd    時間: 2022-11-15 08:50
这是什么。。。不明觉厉
作者: mick9618    時間: 2023-07-26 15:23
粉的感觉只能说有点不习惯
作者: mick9618    時間: 2023-07-26 15:29
改了之后当日新帖的颜色标示没有了




歡迎光臨 2DJGAME! NOVO (https://bbs4.2djgame.net/home/) Powered by Discuz! X2.5