知更鸟主题各方面功能已经很完备了,界面也漂亮,但是对样式总会有自己的一些小需求,下面是搜集摸索出的一些CSS样式修改。
关于本站图标内容修改
隐藏侧边栏关于本站中微信图标
/* 选择器:id为feed_widget的class为.weixin的所有后代*/ #feed_widget .weixin{ display:none; }
隐藏侧边栏关于本站中微博图标
#feed_widget .tsina{ display:none; }
让剩余两个图标居中
#feed_widget .feed-t { float:left; width:50%; height:40px; line-height:38px; }
注意
“自定义样式”里的修改会覆盖掉主题目录下style.css中样式
导航栏多色彩美化
#site-nav .down-menu>#menu-item-30>a:hover .font-text,#site-nav .down-menu>#menu-item-30>li.sfHover>a .font-text{background:#992e1e !important}#site-nav .down-menu a{color:#444;margin:0}#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #3690cf;transition-duration:.6s}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom:2px solid #3690cf}#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #333d46}#site-nav .down-menu>
幻灯片缩略图园角美化
#slideshow #slider img{border-radius:5px;border:0} .thumbnail{border-radius:5px;border:0}
widget选中微光特效
.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2}
文章标题点击平移
.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.new_cat ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a,.widget.related_post ul li a,.widget.same_post ul li a,.widget.recently_viewed ul li a{position:relative;}
文章标题前添加箭头美化
.widget.new_cat ul li a:before,.widget.related_post ul li a:before,.widget.same_post ul li a:before,.widget.recently_viewed ul li a:before{ content: "\e77a"; font-family: be; font-size: 16px; padding: 0 5px 0 0; }
注
这个代码已压缩移到style.css
强制文章中图片居中显示
.single-content p img{ margin: 0 auto; }
修改正文字号大小
.single-content { font-size: 20px; font-size: 2.0rem; line-height: 2; }
去掉幻灯上的标题文字
.slider-caption {display: none; }
标题后加文字
#post-75 h2 a:after { content: "推荐"; font-size: 14px; background: #c40000; color: #fff; margin: 0 0 0 5px; padding: 1px 3px; border-radius: 2px; }