知更鸟主题样式修改CSS

知更鸟主题各方面功能已经很完备了，界面也漂亮，但是对样式总会有自己的一些小需求，下面是搜集摸索出的一些CSS样式修改。

更多分类文章：

网站建设 | Python | Linux | 大数据 | 数据库 | Git | Nodejs | Golang | 电脑技巧 | 计算机技术

关于本站图标内容修改

隐藏侧边栏关于本站中微信图标

/* 选择器：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;
}

---

原文链接：知更鸟主题样式修改CSS