优化博客园显示效果(基于“构建之法”主题)

选了选博客园的主题,发现“构建之法”这个主题还不错,不过应用之后发现字体有些小,页面元素的边距有些问题,底部评论框大小没有铺满,以及针对移动设备适配的不好。好在博客园可以自定义css,就顺手调了调。

效果预览

应用方法

在博客园设置中主题选择“BuildToWin”,然后将下面这段代码复制到css中:

#home {
    width: 85%;
}
#mainContent {
    width: 75%;
}
#sideBar {
    margin-left: 10px;
}
#sideBarMain {
    margin-top: 30px;
}
#blog-news {
    margin: 0 20px;
}
#sidebar_search_box {
    margin: 0 20px;
}
.catListEssay ul, .catListLink ul, .catListNoteBook ul, .catListTag ul, .catListPostCategory ul, .catListPostArchive ul, .catListArticleArchive ul, .catListImageCategory ul, .mySearch ul, .catListComment ul, .catListView ul, .catListFeedback ul {
    padding: 0 15px;
}
.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListArticleArchive ul li, .catListImageCategory ul li, .mySearch ul li, .catListComment ul li, .catListView ul li, .catListFeedback ul li {
    margin: 5px;
}
.mySearch .input_my_zzk {
    width: 150px;
}
#main {
    min-width: 100%;
}
#cnblogs_post_body p {
    font-size: 15px;
}
body {
    font-size: 14px;
}
#btn_comment_submit {
    padding: 0;
    margin-top: 0;
}
#ad_t2 {
    margin-bottom: 15px;
}
#comment_nav {
    margin-right: 14px;
}
.commentbox_main {
    margin-right: 12px;
}
div.commentform textarea {
    width: 100%;
}
.commentbox_title {
    width: 100%;
}
.postTitle {
    padding: 5px 10px;
}
#topics .postTitle {
    padding: 5px 10px;
}
.postTitle {
    font-size: 20px;
}
#navList a {
    font: 16px/1.5em 'PingFang SC','Helvetica Neue','Helvetica','Arial','Microsoft Yahei',sans-serif;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", monospace, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
.cnblogs-markdown code, .cnblogs-post-body code {
    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", monospace, sans-serif !important;
    font-size: 14px !important;
}
.blogStats {
    margin-top: 0;
}
#blogTitle h1 a, #blogTitle h2 {
    text-shadow: 0 0 0.2em #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
}
@media only screen and (max-width:767px) {
    #home {
        width: 100%;
    }
    #mainContent {
        width: 100%;
    }
}

猜你喜欢

转载自www.cnblogs.com/recovic/p/cnblogs-theme-buildtowin-css-modify.html