知更鸟主题各方面功能已经很完备了,界面也漂亮,但是对样式总会有自己的一些小需求,下面是搜集摸索出的一些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