分享一个论坛水区极简主题样式 (CSS / Stylish) - 【更新 1.6】

*发表于：3 天前* 2 · 发表于：3 天前

[table][tr][td]

感觉论坛的主题帖子里每个回复（楼层）空白太多了，看起来很乱，也很长，在水区看帖实在很累，所以制作了个自定义样式，主要目的是让每个楼紧凑些，用这个样式能让页面短 50 % 以上：

登录/注册后可看大图

截图：

登录/注册后可看大图

帖子列表：

登录/注册后可看大图

默认字体增加了一号。
背景色暗了一些为了阅读不那么刺眼。
然后去掉了积分、威望、那些用户信息（鼠标放头像上可以显示）。
把广告图改小了点（去掉不好）。
头像和用户名简化了一下
发帖时间等信息从楼层顶部移到楼层底部
2016/05/30 - v1.3 增加可选择的帖子列表简化代码
2016/05/30 - v1.4 修改使用帖子列表简化会影响到导致帖子内容的问题2016/05/30 - v1.6 给有帖子背景图片的帖子上增加了渐变，减少背景对文字的影响

使用方法，用各浏览器上的样式管理扩展，比如 Chrome 上可以安装 Stylish 插件：

登录/注册后可看大图

注意要设置成只对 www.tsdm.me 使用哦

使用下面的 CSS 样式代码：

/* tsdm 水区极简 - v1.6 - 2016/05/30 D */
#p_btn,
.a_pb,
.sign {
display: none;
}
.po {
border-top: none;
}
.fastre,
.add_callme,
.editp,
.showmenu,
.showmenu+a,
.showmenu+a+a {
background: none;
color: rgba(76, 158, 177, 0.71);
}
.qdsmile,
.tsdm_norm_title,
.tsdm_statbar,
.authicn,
.md_ctrl {
display: none;
}
.pls .avatar img {
padding: 0px;
border-radius: 922px;
background: rgba(146, 128, 128, 0) url(../../static/image/common/midavt_shadow.gif) 0 100% repeat-x;
max-height: 64px;
max-width: 64px;
}
.post_username_1,
.post_username_3 {
filter: glow(color=#00BFFF, strength=3);
height: 18px;
color: #34B3A8;
padding: 1px;
margin-top: 8px;
font-size: 16px;
text-align: center;
text-shadow: 0 3px 2px rgba(0, 191, 255, 0.52);
}
.post_username_2 {
filter: glow(color=#00BFFF, strength=3);
height: 18px;
color: #F7247A;
padding: 1px;
margin-top: 8px;
font-size: 16px;
text-align: center;
text-shadow: 0 3px 2px rgba(255, 20, 147, 0.6);
}
.post_nickname {
text-align: center;
color: rgba(0, 0, 0, 0.28);
/* position: relative; */
margin-top: 6px;
}
.pls .avatar {
margin-top: 22px;
}
.pi {
opacity: 0.4;
}
.ad .pls {
height: 1px;
}
.t_f,
.t_f td {
font-size: 15px;
color: rgba(0, 0, 0, 0.74);
padding: 10px;
padding-top: 20px;
padding-bottom: 32px;
background: rgba(0, 0, 0, 0);
}
.plc {
position: relative;
}
.po {
display: none;
}
.tsdm_post_t:hover .po {
display: block
}
.pi {
opacity: 0.6;
position: absolute;
width: 500px;
text-align: right;
bottom: 4px;
right: 2px;
margin-bottom: 10px;
padding: 7px;
border-bottom: none;
}
.ad .plc {
background: #D8D6D6;
padding: 0;
overflow: hidden;
}
.tsdm_post_t {
background-color: #F1F1F1;
}
.pl .quote {
padding-bottom: 5px;
border: 1px solid rgba(93, 93, 93, 0.09);
}
.rate {
margin: 20px 0;
font-size: 12px;
margin-bottom: 33px;
}
.a_pt a img {
height: 30px;
opacity: 0.6;
}
.bm {
border: 1px solid rgba(93, 93, 93, 0.29);
}
.tsdm_post_t tbody tr:nth-of-type(1) {
background: linear-gradient(to bottom, #F1F1F1, rgba(242, 242, 242, 0));
}
.by_nullice {
opacity: 1.020;
}
/* 帖子列表： */
.tl th,
.tl td {
padding: 9px 0;
border-bottom: 1px dashed #D6D6D6;
}
.bmw .bm_c th,
.bmw .bm_c td {
background: none
}
.bmw tr cite {
opacity: 0.4;
}
.bmw tr .by:nth-of-type(2) cite {
opacity: 0.6;
}
.bmw tr .by:nth-of-type(2) cite+em {
opacity: 0.5;
}
.bmw tr cite+em {
opacity: 0.3;
}
.bmw td.num a {
opacity: 0.4;
}
.bmw td.num em {
opacity: 0.3;
}
.bmw span.tps {
opacity: 0.2;
}
.bmw tbody th img {
opacity: 0.3;
}
.bmw tbody:hover {
background-color: rgba(0, 176, 255, 0.03);
}
.bmw tbody:hover tr cite {
opacity: 0.8;
}
.bmw tbody:hover tr cite+em {
opacity: 0.7;
}
.bmw tbody:hover td.num a {
opacity: 0.8;
}
.bmw tbody:hover td.num em {
opacity: 0.7;
}
.bmw tbody:hover span.tps {
opacity: .7;
}
.bmw tbody:hover th img {
opacity: 0.45;
}
.bmw .by_nullice {
opacity: 1.020;
}

复制代码 MK.II

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

分享一个论坛水区极简主题样式 (CSS / Stylish) - 【更新 1.6】

发表回复

作者推荐