您的位置:首页 > Web前端 > CSS

自定义博客样式

2018-09-24 11:22 162 查看

自定义博客样式

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

模板使用博客园的官方模板: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;
}

/*评论区表单的样式*/
div#comment_form_container {
background-color: #fffdfa;
padding:15px;
border-radius: 5px;
}

/*评论提交表单中 “昵称” 后的 用户名 样式 */
div.commentform input.author, div.commentform input.email, div.commentform input.url {
background-image: unset;
padding: 4px 4px 4px 10px;
font-size: 15px;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: