自定义博客样式
用了一天时间简单的更改了下博客的样式,前端技术不甚了解,暂且粗制至此。
有一些问题没解决,还有些功能没实现。
模板使用博客园的官方模板: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;
}