自定义博客样式

简介: 自定义博客样式用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。有一些问题没解决,还有些功能没实现。模板使用博客园的官方模板:En_summerGarden。基于此模板进行自定义。

自定义博客样式


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

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

前后对比:

img_da0edc20f72278d04f26c636f08d88a1.png
img_cb197ce78ccf9cd295dab49387777c5d.png

定制 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天前
常见的链接样式
常见的链接样式。
6 3
|
搜索推荐 前端开发 开发者
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
886 0
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
|
前端开发
自定义博客cnblogs样式的必备前端小知识——css
自定义博客cnblogs样式的必备前端小知识——css
99 0
|
移动开发 JavaScript 前端开发
博客园博客排版(js样式实例)
昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,当然要分享给各位; 大神的链接:https://www.cnblogs.com/hafiz/p/9276689.html,里面讲的很细很细,每一个功能的讲解都有。
1618 0
为博客园添加目录的方法总结+自定义博客园样式
参考链接: http://www.cnblogs.com/real-me/p/8336741.html https://www.cnblogs.com/xuehaoyue/p/6650533.html http://www.
2010 0
|
前端开发
博客园主题修改中用到的css属性
样式覆盖 id选择器大于class选择器。 对于原主题中想要覆盖的id选择器,使用!import覆盖。 对于原主题中想要取消的css属性,使用inherit. 响应式 当屏幕宽度不同时,隐藏部分元素。 @media (max-width:1360px) { #div_digg { ...
1039 0
|
Web App开发 JavaScript 前端开发