自定义博客样式

自定义博客样式


用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。
有一些问题没解决,还有些功能没实现。

模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。

前后对比:

自定义博客样式
自定义博客样式

定制 Css

#container pre code {
    display: block  !important;
}
body {
    font-size: 12px;
    font-family: sans-serif;
    min-height: 100%;
    background: url("https://images.pexels.com/photos\
        /1438254/pexels-photo-1438254.jpeg?auto=compress\
        &cs=tinysrgb&dpr=2&h=650&w=940") no-repeat
    center center fixed;
    border-radius: 6px;
    background-size: cover;
 }

#header {
    background: inherit;
    height: 146px;
    padding-top: 30px;
}


#blogTitle {
    height: 80px;
    clear: both;
    color: #333;
    /*border-bottom: 1px solid #333;*/
    background-color: #eff1f7d1;
}

div#post_detail {
    font-size: 16px;
}

p {
    font-size: 16px;
}

#topics .postDesc {
    font-size: 10px;
}

#sideBar {
    background: #fffdfaed;
    border-radius: 6px;
}

.postBody {
    padding: 15px 10px 10px 15px;
    background: #fffdfa;
    border-radius: 6px;
}

/* new post,Admin color*/
#navList a:link {
    color: #a9b5b7;
}

#navList li {
    margin-right: 4px;
    color: #a9b5b7;
}


/*博客列表页面--------------*/
/*博客列表的部分效果*/
#mainContent .forFlow {
    border-radius: 6px;
    padding: 10px 15px 10px 15px;
}

/* 去掉博客列表的底部图片*/
#footer {
    background: unset;
}

/*使博客园文章列表分块*/
.day {
    background: #fffdfa;
    padding: 0px 10px 0px 10px;
    border-radius: 6px;
    border-bottom: unset;
}
/* end block ------------*/

/* 让日历居中*/
#sideBar {
    text-align: center;
}

/*调整日历排版*/
#sideBarMain ul {
    line-height: 1.75;
    padding-top: 10px;
}

/*隐藏“发表评论”这段字*/
#commentform_title {
    display: none;
}

/* 隐藏评论编辑框的功能条*/
.commentbox_title_right {
    display: none;
}

/* 隐藏“评论内容” 这段字*/
.commentbox_title_left {
    visibility: hidden;
}

/* 调整评论编辑框大小*/
.textarea#tbCommentBody {
    width: 55%;
    height: 40%;
}

/* 隐藏编辑框的退出按钮(我觉得他没什么用,简单的挺好*/
#commentbox_opt a {
    display: none;
}

/*隐藏文章底部新闻部分*/
div#under_post_news {
    display: none;
}

/*隐藏底部文本*/
div#under_post_kb {
    display: none;
}

/* 将文章底部的文本域调整为条状*/
div.commentform textarea {
    width: 55%;
    height: 45%;
}

/*可能的话,用 js 每次评论随机生成颜色(待实现)*/
/*评论的头部的颜色*/
.feedback_area_title {
    background: #83a;
    border-radius: 3px; 
}

/*评论块的颜色*/
.feedbackCon {
    background: #83a;
    border-radius: 6px;
}

/* 因为对比度的问题,需要根据动态生成
的 块 的颜色更改合适的评论颜色 (待实现)*/
/*暂时将评论文本设置为白色*/
.blog_comment_body {
    color: white;
}

/*从日期档案入口进入的页面----------*/
.entrylistItem {
    background:  #fffdfa;
    border-radius: 6px;
    padding: 15px 10px 15px 10px;
}
/*end block -------------------*/

/* 刚递交的评论的样式 */
.bq_post_comment {
    background: #83a;
    color: white;
    border-radius: 4px;
}

/*下一页背景色*/
.topicListFooter {
    background-color: #2e6ab1;
    border-radius: 3px;
}

/*下一页颜色*/
#nav_next_page a {
        color: white;
}

/将上一页,下一页颜色改为白色*/
#homepage1_HomePageDays_homepage_bottom_pager .pager a:visited {
        color: white;
}

/*去掉 下一页,上一页的边框*/
#homepage1_HomePageDays_homepage_bottom_pager .pager a {
    border:unset;
        color: white;
}

/*隐藏顶部的 上一页 一栏*/
#homepage_top_pager {
display: none;
}
上一篇:【对讲机的那点事】业余电台执照样式参考


下一篇:带你读《多媒体技术教程(原书第2版)》之一:多媒体导论