自定义博客园皮肤黑色主题

我的css主要是参考这位博主的自定义博客园皮肤的博客。对他的代码做了一些简化，有一些我认为没有什么需要的就删去了。我选择的主题也是lessismore这个主题，记得在设置自定义的CSS的时候不要勾选 禁用模板默认CSS

自定义CSS

设置顶部导航栏的大小，并设置为横向一行
设置home居中即整体居中
设置sideBar的宽度为15% 而不是固定的

#navigator { background: #666; 	height:auto; overflow:hidden; *zoom:1;}
#navList { font-size: 16px;float:left;}
ul#navList li{display: inline; float: none; }
.blogStats { font-size: 12px;float: right;}
#home {margin: 0px auto; text-align:left; }
#mainContent { width: 100%;}
.forFlow { margin-left:17%; }
#sideBar { width: 15%; border: none; padding: 0; float: left;}
#sideBar h3 { padding-left: 8px; background-color: #666; }
#sideBarMain { padding-left: 8px; }

设置各种颜色和边框
我给h2/h3设置了单独的颜色因为我博客中这两个级别的标题会较多
另外markdown格式的用单引号包裹起来的` code`显示有误，需将字体颜色设置为黑色

body { background-color: #333; color: #fff; font-size: 14px; }
.postBody h2{color:#70d282}
.postBody h3{color: #00ccff;}
h1, h4, h5, h6, th, .feedbackCon, .blogStats {color: #fff; }

.day { margin: 20px 0px; }
.postTitle { padding-left: 20px; font-size: 20px;border-bottom-color: #666; }
.postBody, .postCon { padding: 0px 20px 10px;border-bottom: 1px solid #666; }
.postDesc { padding-right: 20px; }
a, .postCon a, .postBody a, .feedbackCon a, .pager a { color: #0dd; }
.pager a{border:none}
.pager {font-size: 14px;color:#ffffff}
a:hover, a:active, a:focus { color: #ff8; text-decoration: none; }
#navigator, #MySignature, .day, .post { border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 2px 2px 10px #aaa; }
#navigator { border-radius: 8px 8px 0px 0px; }
.post { border-right: none; border-top: none; border-radius: 0px 0px 8px 8px; padding-top: 1px; }
code { color: #000;}

设置宽度自适应大屏幕显示器会更宽

@media screen and (max-width:1366px){
#home{width:980px;}
}
@media screen and (min-width:1366px){
#home{width:1366px;}
}

设置底部IT新闻/文章

#under_post_news{width:50%;float:left;}
#under_post_kb{width:50%;float:right;}
.c_ad_block#ad_c2{margin-top:-5%;float: right;}

显示正文时不显示侧边栏

这个是利用JS实现的，代码如下

<script>
    //Date: 2016-06-06
    //Author: psklf
    var detail = $("#cb_post_title_url");
    if (detail.text() !== ""){
	$("div#sideBar").hide();
	var mainArticleArea = $("div.forFlow");
	mainArticleArea.width("100%");
	mainArticleArea.css("margin-left","0");
	$("div.forFlow #comment_form").css("margin-left","40px");
	}
</script>

自定义博客园皮肤 黑色主题

自定义CSS

显示正文时不显示侧边栏

推荐阅读

自定义博客园皮肤黑色主题