转载：https://www.cnblogs.com/hafiz/p/7573464.html

一、背景

　　最近在自己博客园逛的时候，总会有一个感觉，真是太丑了，然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统，上网一搜才发现，原来我们可以自定义博客的布局以及样式的，那我就在网上找到了一个哥们的自定义Hexo经典主题Ligt的CSS文件，然后根据自己的审美及需要来做改动后上传以此来使自己的博客看起来像是自己搭建的个人博客。因为我总觉得一个良好的界面才会给博友读下去的欲望，否则很恶心，连自己都这么觉得。下面我们就来分享这个替换步骤教程。

二、实现步骤以及实现原理

1.先copy经过我改良过的博客CSS样式（手机和PC响应式布局）

@font-face {font-family: 'FontAwesome';font-style: normal;font-weight: normal;src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
}
* {margin: 0;padding: 0;
}
body {background: #eee;color: #444;font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;font-size: 14px;text-shadow: 0 0 1px transparent;color:#505050;
}
@media screen and (max-width: 1260px) {body {margin: 0px;}
}
@media screen and (max-width: 600px) {body {font-size: 13px;}
}
h1,h2,h3,h4,h5,h6 {font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
h1 {font-size: 1.8em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.3em;}
a {text-decoration: none;color: #258fb8;}
a:hover {text-decoration: underline;}
#home{margin: 0 auto;width: 85%;background-color: #fff;padding: 30px;margin-top: 50px;margin-bottom: 50px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);border-radius: 20px;
}
#tbCommentBody {width: 100%;}
#blogTitle {width:22%;margin-top: -10px;text-align: center;}
.alignright {float: right;}
.clearfix {zoom: 1;}
.clearfix:before,.clearfix:after {content: "";display: table;}
.clearfix:after {clear: both;}
#header, #main, #footer {width: 100%;margin: 0 auto;}
@media screen and (max-width: 1260px) {#main {width: 95%;}
}
#mainContent {width: 75%;float: left;margin-left: 10px;
}
@media screen and (max-width: 1260px) {#main-col {width: 100%;margin-right: -300px;}
}
@media screen and (max-width: 900px) {#main-col {margin-right: 0;float: none;}
}
@media screen and (max-width: 1260px) {#wrapper {margin-right: 300px;}
}
@media screen and (max-width: 900px) {#wrapper {margin-right: 0;}
}
#header {text-shadow: 0 0 1px #fff;margin: 20px auto 30px;position: relative;height: 60px;color: #999;
}
#header a {color: #999;
}
#header a:hover {color: #258fb8;text-decoration: none;
}
#header h1 {font-weight: normal;font-size: 30px;
}
#header h2 {font-weight: normal;font-size: 0.9em;margin-top: 10px;margin-left: 30px;
}
#header #navigator {font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;width: 100%;font-size: 16px;border-bottom: 1px solid #ededed;border-top: 1px solid #ededed;height: 50px;line-height: 50px;clear: both;margin-top: 25px;
}
#header #navigator ul {list-style: none;
}
#header #navigator ul li {float: left;width: 10%;text-align: center;margin-right: 15px;
}
#header .blogStats {float: right;font-size: 13px;
}
.topicListFooter {margin-top:30px;margin-bottom: 30px;margin-right: 0 !important;
}
.topicListFooter a {display: inline !important;padding: 10px 20px;background: #ddd;color: #999;font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;text-shadow: 0 0 1px #fff;border-radius: 5px;
}
.topicListFooter a:hover {background: #258fb8;color: #fff;text-decoration: none;text-shadow: none;
}
.topicListFooter .prev:before {content: '\f053';padding-right: 10px;font-family: FontAwesome;
}
.topicListFooter .next:after {content: '\f054';padding-left: 10px;font-family: FontAwesome;
}
article {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;background: #fff;
}
article.page {padding-left: 20px;
}
article.page .icon {display: none;
}
.postIcon:before {content: '\f016';
}
article.photo .icon:before {content: '\f030';
}
article.link .icon:before {content: '\f0c1';
}
article.link .title a:after {content: '\f08e';color: #999;font: 12px FontAwesome;padding-left: 10px;vertical-align: super;
}
/******************************************以下自定义样式***********************************************/
#MySignature{
border-top: 2px solid #ccc;padding-top: 20px;
}
.pager{border-bottom: 1px dashed #ddd;padding-bottom: 30px;
margin-bottom: -30px;
}
#blog-calendar{width:0px;height:0px;display: none !important;
}
#TopViewPostsBlock ul li{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;display: inline-block;height: 30px;line-height: 30px;
}
.day .dayTitle{display: none !important;
}
//去掉广告
#ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb{display: none !important;
}
.postTitle, .entrylistPosttitle {font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 1.8em;padding: 20px 20px 15px 0px;background: #fff;border-radius: 10px 10px 0px 0px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.entrylistPostSummary, .postCon, .postBody {padding: 0 20px 15px 0px;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 0 2px 0 #ddd;background: #fff;position: relative;
}
.postDesc, .entrylistItemPostDesc {padding: 0px 20px 15px 0px;color: #999;font-size: 0.9em;line-height: 16px;position: relative;min-height: 16px;background: #fff;border-bottom: 1px dashed #ccc;
}
#blog-calendar {display: none;
}
@media screen and (max-width: 600px) {.postCon {padding-left: 0px;}
}
.postIcon {height: 0px;margin-right: 25px;position: relative;top: 25px;left: 25px;color: #258fb8;
}
@media screen and (max-width: 600px) {article header .icon {display: none;}
}
.postIcon:before {position: absolute;font: 32px FontAwesome;top: 0;left: 0;width: 32px;text-align: center;
}
article header time {color: #999;font: 0.9em "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;margin-bottom: 5px;display: block;line-height: 1;
}
article header .title {font-weight: normal;
}
article header .title a {color: #444;
}
article header .title a:hover {color: #258fb8;text-decoration: none;
}
#cnblogs_post_body {text-align: justify;line-height: 1.6;
}
#cnblogs_post_body p,
#cnblogs_post_body blockquote,
#cnblogs_post_body ul,
#cnblogs_post_body ol,
#cnblogs_post_body dl,
#cnblogs_post_body table,
#cnblogs_post_body iframe,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6,
#cnblogs_post_body .video-container {margin-top: 15px;
}
#cnblogs_post_body blockquote {border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;font-style: italic;font-family: "Georgia", serif;font-size: 1.2em;padding: 0 30px 15px;
}
#cnblogs_post_body blockquote footer {border-top: none;font-size: 0.8em;line-height: 1;margin: 20px 0 0;padding-top: 0;
}
#cnblogs_post_body blockquote footer cite:before {content: '—';color: #ccc;padding: 0 0.5em;
}
#cnblogs_post_body code,
#cnblogs_post_body pre {font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
#cnblogs_post_body code {background: #eee;color: #666;padding: 0 5px;margin: 0 2px;font-size: 0.9em;border: 1px solid #ddd;-webkit-border-radius: 3px;border-radius: 3px;
}
#cnblogs_post_body pre {background: #eee;overflow: auto;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;
}
#cnblogs_post_body pre code {background: none;padding: 0;margin: 0;border: none;-webkit-border-radius: 0;border-radius: 0;
}
#cnblogs_post_body ul ul,
#cnblogs_post_body ol ul,
#cnblogs_post_body dl ul,
#cnblogs_post_body ul ol,
#cnblogs_post_body ol ol,
#cnblogs_post_body dl ol,
#cnblogs_post_body ul dl,
#cnblogs_post_body ol dl,
#cnblogs_post_body dl dl {margin-top: 0;
}
#cnblogs_post_body h1,
#cnblogs_post_body h2 {font-weight: bold;border-bottom: 1px solid #ddd;padding-bottom: 10px;margin-top: 20px;
}
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {font-weight: normal;background: #eee;border-radius: 6px;color: Red;font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;height: 25px;line-height: 25px;margin: 18px 5px !important;padding: 8px;opacity: 0.8;border: 1px dashed #aaa;
}
.postBody img,
.entrylistPostSummary img, .postCon img,
.postBody video {max-width: 100%;height: auto;border: none;
}
#cnblogs_post_body iframe {border: none;
}
#cnblogs_post_body .caption {display: block;margin-top: 5px;color: #999;position: relative;font-size: 0.9em;padding-left: 25px;
}
#cnblogs_post_body .caption:before {content: '\f040';position: absolute;font: 1.3em FontAwesome;position: absolute;left: 0;top: 3px;
}
#cnblogs_post_body .video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;
}
#cnblogs_post_body .video-container iframe,
#cnblogs_post_body .video-container object,
#cnblogs_post_body .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin-top: 0;
}
#cnblogs_post_body .pullquote {float: right;border: none;padding: 0;margin: 1em 0 0.5em 1.5em;text-align: left;width: 45%;font-size: 1.5em;
}
#blog-comments-placeholder, #comment_form {padding: 20px;background: #fff;-webkit-box-shadow: 1px 10px 10px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 50px;border: 1px solid #ccc;
padding-top:0;
}
.feedback_area_title {margin-bottom: 15px;font-size: 1.8em;
}
.feedbackItem {border-bottom: 1px dashed #CCC;margin-bottom: 10px;padding: 5px;
}
.color_shine {background: rgb(226, 242, 255);}
.feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;}
#comment_form .title {font-weight: normal;margin-bottom: 15px;
}
#ad_under_post_holder {display: none;
}
.entrylistTitle {color: #999;font-weight: normal;margin-bottom: 30px;text-shadow: 0 0 1px #fff;
}
.entrylistTitle:before {font-family: FontAwesome;content: '\f07b';padding-right: 15px;
}
.archive {-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 1px 2px 3px #ddd;border-bottom: 1px solid #ddd;margin-bottom: 50px;
}
.archive article {-webkit-box-shadow: none;box-shadow: none;
}
.archive article .post-content {margin-bottom: 0;
}
#sideBar{width: 22%;line-height: 1.8em;float: right;
}
@media screen and (max-width: 900px) {#sideBar {float: none;width: 100%;}
}
.catListLink, .catListMyTeams, .catListComment, .catListFeedback {display: none;
}
.search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {background: #fff;-webkit-box-shadow: 1px 2px 3px #ddd;box-shadow: 10px 10px 10px #ddd;margin-bottom: 30px;word-wrap: break-word;border-radius: 10px;margin-top: 10px;border: 1px solid #ddd;
}
#blog-sidecolumn h3, .newsItem h3 {padding: 15px 20px;font-size: 1em;border-bottom: 1px solid #ddd;font-weight: normal;
}
#blog-sidecolumn ul, .newsItem #blog-news {font-size: 0.9em;padding: 15px 20px;
}
#blog-sidecolumn ul,
#blog-sidecolumn ol,
#blog-sidecolumn dl {list-style: none;
}
#blog-sidecolumn ul ul,
#blog-sidecolumn ol ul,
#blog-sidecolumn dl ul,
#blog-sidecolumn ul ol,
#blog-sidecolumn ol ol,
#blog-sidecolumn dl ol,
#blog-sidecolumn ul dl,
#blog-sidecolumn ol dl,
#blog-sidecolumn dl dl {list-style: disc;margin-left: 20px;
}
#q {background: #fff;font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;font-style: italic;font-size: 1em;padding: 10px 15px;border: 1px solid #ddd;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;color: #999;height: 100%;
}
#q:focus {color: #444;
}
/*隐藏搜索框中的无用组件*/
.mySearch {display: none;
}#sideBar .tag small {margin-left: 15px;color: #999;
}
#sideBar .tag small:before {content: '(';
}
#sideBar .tag small:after {content: ')';
}
#sideBar .twitter li {border-bottom: 1px solid #ddd;padding: 15px 20px;font-size: 0.9em;
}
#sideBar .twitter li:last-of-type {border-bottom: none;
}
#sideBar .twitter small {display: block;margin-top: 10px;color: #999;line-height: 1;
}
#sideBar .tagcloud .entry {padding-right: 5px;
}
#sideBar .tagcloud a {margin-right: 10px;display: inline-block;
}
#footer {color: #999;margin-bottom: 50px;font: 0.9em/1.6 "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;text-shadow: 0 0 1px #fff;text-align:center;margin: 30px 0px 50px;
}
.entry .gist {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;color: #666;
}
.entry .gist .gist-file {border: none;font-family: inherit;margin: 0;font-size: 0.9em;
}
.entry .gist .gist-file .gist-data {background: none;border-bottom: none;
}
.entry .gist .gist-file .gist-data pre {padding: 0 !important;font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
.entry .gist .gist-file .gist-meta {background: none;color: #999;margin-top: 5px;padding: 0;text-shadow: 0 0 1px #fff;font-size: 100%;
}
.entry .gist .gist-file .gist-meta a {color: #258fb8;
}
.entry .gist .gist-file .gist-meta a:visited {color: #258fb8;
}
figure.highlight {background: #eee;border: 1px solid #ddd;margin-top: 15px;padding: 7px 15px;-webkit-border-radius: 2px;border-radius: 2px;text-shadow: 0 0 1px #fff;line-height: 1.6;overflow: auto;position: relative;font-size: 0.9em;
}
figure.highlight figcaption {color: #999;margin-bottom: 5px;text-shadow: 0 0 1px #fff;
}
figure.highlight figcaption a {position: absolute;right: 15px;
}
figure.highlight pre {border: none;padding: 0;margin: 0;
}
figure.highlight table {margin-top: 0;border-spacing: 0;
}
figure.highlight .gutter {color: #999;padding: 7px 10px 7px 5px !important;border-right: 1px solid #ddd;text-align: right;
}
figure.highlight .code {padding: 7px 7px 7px 10px !important;border-left: 1px solid #fff;color: #666;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {color: #93a1a1;font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {color: #268bd2;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {color: #cb4b16;
}
pre .deletion {color: #dc322f;
}
.feedbackListSubtitle { position: relative;}
.feedbackManage {width: 160px;position: absolute;right: 0;text-align: right;}
.cnblogs_code_toolbar {display: none;}
#cnblogs_post_body {overflow: hidden;}
#cnblogs_post_body ol { padding-left: 40px;}
#cnblogs_post_body ul { margin-left: 35px;}
.fixedReadRank { position: fixed; top: 20px; width: 270px; }
.fixedRecRank { position: fixed; top: 360px; width: 270px; }
figure.highlight { margin-top: 0; padding: 0;}
figure table {width: 100%; margin: 0 !important;}
#cnblogs_post_body pre { padding: 0; }
#cnblogs_post_body th, #cnblogs_post_body td { padding: 0; }
.cnblogs_code pre { padding: 7px 15px !important; background: #f5f5f5;border: 0;margin-top: 0;}
.cnblogs_code th {border: 1px solid silver; padding: 3px;}
.cnblogs_code { padding: 0;}
/*评论标题*/
.feedback_area_title {padding:10px;font-size:24px;font-weight:bold;color:#aaa;border-bottom:1px dashed #ccc;
}
.feedbackListSubtitle {font-size:12px;color:#888;
}
.feedbackListSubtitle a {color:#888;
}
.comment_quote {background:#eee;padding:15px;border:1px dashed #aaa;border-radius:5px;
}#commentform_title {color:#aaa;background-image:none;background-repeat:no-repeat;margin-bottom:10px;padding:10px 20px 10px 10px;font-size:24px;font-weight:bold;border-bottom:1px dashed #ccc;
}
/*评论框*/
#comment_form {margin:10px 0;padding:25px;border-radius: 10px;height: 343px;overflow: hidden;
}
.commentform {margin:10px 0;padding:10px 20px;background:#fff;
}
/*评论输入域*/
#tbCommentBody {font-family:'MIcrosoft Yahei';margin-top:10px;background:white;color:#333;border:2px solid #fff;box-shadow:inset 0 0 8px #aaa;height:120px;font-size:14px;min-height:120px;border-radius: 10px;
}
/*评论条目*/
.feedbackItem {font-size:14px;line-height:24px;margin:10px 0;padding:20px;
}
.feedbackListSubtitle {font-weight:normal;
}/*green_channel*/
#green_channel {text:align:right;padding-left:0px;font-weight:normal;font-size:13px;width:100%;border:1px dashed #ccc;color:#fff;border-radius:4px;margin:5px auto;
}
@media screen and (max-width: 768px) {body {font-size: 13px;}#main{padding:0px !important;}#mainContent{width: 96%;float: left;margin: 0px 2%;}#sideBar {display: none;}#blogTitle {width: 100%;float:none;margin: 20px auto 0 !important;}#header{height:auto !important;margin: 20px auto 5px;}#header #navigator{width: 100%;text-align: center;float:none;}#header #navigator ul{width: 100%;margin-left: 6%;}#header #navigator ul li {float: left;width: 25%;text-align: center;margin-right:0px;}.postTitle, .entrylistPosttitle{font-size:14px;padding: 20px 20px 15px 0px;}.postDesc, .entrylistItemPostDesc{padding: 0px 20px 15px 0px;}#green_channel{padding:0px !important;}#blog_stats{display: none;}
}
#blog-news label{box-shadow:5px 5px 5px #cccccc;text-shadow:5px 5px 5px #cccccc;border-radius:5px;}
#div_digg{padding: 5px;border-radius: 5px;position: fixed;left: 0;bottom: 80px;width:80px;z-index:100;
}
.diggit{
background: url(http://images2017.cnblogs.com/blog/894443/201709/894443-20170920105433618-867225449.png) no-repeat;width: 60px;height: 60px;
}
#div_digg .diggnum{
position: absolute;bottom: -20px;left: 6px;background: #D0D0D0;padding: 2px 0;display: block;color: #555;font-size: 12px;text-align: center;width: 60px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-weight: bold;
}
.buryit{
display: none;
}
div.commentform textarea.comment_textarea{padding:10px;
}
#tbCommentBody{98%;
}
/*scroll to top*/
#scrollTop div{left:0;overflow:hidden;position:absolute;top:0;width:149px;margin:0;padding:0
}
#scrollTop .level-2{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll -149px 0 transparent;display:none;height:250px;opacity:0;z-index:1
}
#scrollTop .level-3{background:none repeat scroll 0 0 transparent;cursor:pointer;display:block;height:150px;z-index:2
}
#scrollTop{background:url(http://images2015.cnblogs.com/blog/894443/201707/894443-20170716165243785-2122236756.png) no-repeat scroll 0 0 transparent;cursor:default;display:block;height:250px;overflow:hidden;position:fixed;right:0;top:80%;width:149px;z-index:11;margin:-125px 0 0;padding:0
}
/*评论带头像，且支持旋转*/
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

最近有博友反应，评论回复以后出现了评论框和按钮被遮盖的问题，这里给出解决办法：只需要把上面CSS样式中：#comment_form的height: 343px;及overflow: hidden;删除即可。

2.到自己博客的设置页面

3.把copy的CSS样式粘贴到如下的位置并勾选禁用模板默认CSS

4.点击保存，自定义样式成功，而且博客详情里评论位置烦人的广告也没有了。

5.原理说明

　　我首先拿到哥们的基础CSS以后，然后在我的博客首页进行按F12，调出页面Debug工具，然后根据自己的需求修改对应元素的样式，修改后所见即所得。很方便，满意以后，再把这些CSS在基础CSS里面替换掉，保存就好了，再按照上面的方法替换博客默认CSS。也很简单，不过需要你有一定的CSS功底！

三、效果展示

既有元素阴影，还有爽翻人的圆角，是不是感觉瞬间逼格就高大上了呢，还有一点，你发现那些很恶心的日历控件也被干掉了，变得越来越干净和纯粹了，烦人的广告通通走开吧！赞一个！