博客 博客vno主题(我正在用的这个博客主题)
将你自己博客园博客的主题设置为lessismore，
#divRefreshComments {
text-align: right;
margin-right: 10px;
margin-bottom: 5px;
font-size: 9pt
}
.topicListFooter {
text-align: right;
margin-right: 10px;
margin-top: 10px
}
* {
margin: 0;
padding: 0
}
body {
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
font-size: 1em;
color: #666666;
-webkit-font-smoothing: antialiased;
background: #fff;
line-height: 1.5
}
img {
border: 0;
max-width: 100%;
}
ul {
list-style-type: disc;
}
ol, ul {
margin: 0 0 1.3em 2.5em;
}
ol li, ul li {
margin: 0 0 .2em 0;
line-height: 1.6em;
}
li p {
margin-bottom: 0;
}
input,textarea {
border: 1px solid #999
}
h1,h2,h3,h4,h5,h6,th {
margin-top: 1.0em;
margin-bottom: .5em;
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
font-weight: lighter;
color: #333333;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: #bf1827;
}
a:hover {
color: #7b0f19;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
p {
margin-bottom: 1.3em;
line-height: 1.7em;
}
blockquote {
margin: 1em 0;
background: #f8f8f8;
border: 1px solid #eeeeee;
border-radius: 3px;
font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
font-weight: lighter;
}
blockquote, q {
quotes: none;
}
h1.postTitle {
margin-top: .5em;
font-size: 2.5em;
line-height: 1.2em;
letter-spacing: .05em;
font-weight: normal;
}
#cnblogs_post_body h1 {
font-size: 2.1em;
font-weight: normal;
}
#cnblogs_post_body h2 {
font-size: 2.0em;
font-weight: normal;
}
#cnblogs_post_body h3 {
font-size: 1.6em;
font-weight: normal;
}
.cnblogs-markdown code {
padding: .1em .4em !important;
background-color: #e8f2fb !important;
border: 1px solid #c9e1f6 !important;
border-radius: 3px !important;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif !important;
font-size: .9em !important;
vertical-align: bottom !important;
word-wrap: break-word !important;
}
.cnblogs-markdown .hljs {
display: block !important;
overflow-x: auto !important;
padding: .5em !important;
background: #e8f2fb !important;
color: #666 !important;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif !important;
font-size: 15px!important;
}
#header {
display: block;
position: fixed;
z-index: 900;
width: 100%;
max-width: none;
height: 100%;
background: url("http://images.cnblogs.com/cnblogs_com/brycezhang/352192/o_background-cover%20(1).jpg") top left no-repeat #666666;
background-size: cover;
width: 30%;
max-width: 500px;
text-align: center;
}
#header a {
color: #FFFFFF;
}
#mainContent {
float: right;
z-index: 800;
width: 70%;
margin-left: 30%;
}
#sideBar {
display: none;
/*position: absolute;
width: 300px;
border-left: 1px solid #ccc;
border-top-width: 0;
overflow: hidden;
padding: 0 8px 20px 30px;
top: 120px;
right: 0*/
}
.forFlow {
margin: 0 80px;
}
#footer {
text-align: center;
border-top: 2px solid #dddddd;
font-size: .7em;
color: #b3b3b3;
margin-left: 30%;
width: 70%;
line-height: 80px;
}
#lnkBlogLogo {
display: none
}
#blogTitle {
padding: 100px 16px;
position: relative;
}
#blogTitle h1 {
font-size: 17pt
}
#blogTitle h2 {
font-size: 10.5pt;
color: #999
}
#blogTitle .title {
font-size: 2.5em;
letter-spacing: 4px;
}
#blogTitle .subtitle {
font-size: 1.2em;
font-weight: lighter;
letter-spacing: 3px;
color: #cccccc;
}
#navigator {
height: 30px;
line-height: 30px;
padding-left: 15px;
padding-right: 5px;
}
#navigator img {
display: none
}
#navigator ul {
margin: 0;
list-style: none;
}
.blogStats {
display: none;
}
#navList li {
display: inline-block;
margin: 5px 1px 0 0;
line-height: 3em;
}
#navList li a {
padding: 10px 20px;
position: relative;
border: 1px solid #FFF;
color: #FFF;
opacity: .8;
border-radius: 20px;
font-size: .9em;
font-weight: bold;
letter-spacing: 1px;
text-shadow: none;
-webkit-font-smoothing: antialiased;
}
#navList li a:hover {
color: #FFF;
border-color: #FFF;
opacity: 1;
}
#sideBar li,.divRecentCommentAticle {
text-indent: -1.5em;
margin-left: 1.5em
}
#sideBar h3,#MyIng .ing_title {
margin: 16px 0 0 0;
font-size: 14px;
text-align: left
}
#calendar {
margin-top: 16px;
text-align: center
}
#calendar table {
width: 90%;
margin: 0 auto
}
#calendar .CalOtherMonthDay {
color: #999
}
#sideBar .divRecentComment {
color: #666;
margin: 0 0 8px 8px
}
#sideBar .recent_comment_body {
color: #666;
margin: 5px 0 8px 18px;
text-indent: 0
}
.ing_title a:link,.ing_title a:visited,.ing_title a:hover,.ing_title a:active {
font-weight: bold
}
div.commentform textarea {
width: 450px;
height: 300px
}
.dayTitle {
display: none
}
.entrylistTitle,.thumbTitle,.PostListTitle,.forFlow h3 div,.galleryTitle {
font-size: 14px;
font-weight: bold;
margin-top: 20px;
text-align: left
}
.entrylistDescription,.thumbDescription {
margin-left: 16px
}
.postTitle,.entrylistPosttitle,.feedback_area_title {
margin-top: 1em;
margin-bottom: .2em;
font-size: 1.5em;
line-height: 1.3em;
}
.postTitle a {
color: #333333;
}
.postTitle a:hover {
color: #7b0f19;
}
.postBody h5 {
font-size: 10pt
}
.postCon {
margin: 0;
font-size: .9em;
color: #999999;
overflow: hidden
}
.postCon a{
border: 1px solid #bf1827;
border-radius: 20px;
padding: 1px 5px;
font-size: .8em;
margin-left: 10px;
}
.postBody a,.feedbackCon a {
}
.postCon a:hover,.postBody a:hover,.feedbackCon a:hover {
border-color: #999
}
.postDesc,.entrylistItemPostDesc {
display: block;
margin: .7em 0 0 0;
font-size: .9em;
color: #c7c7c7;
}
.postDesc a:link,.postDesc a:active,.postDesc a:visited {
color: #c7c7c7;
text-decoration: none
}
.postDesc a:hover {
text-decoration: underline
}
.c_b_p_desc {
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
line-height: 1.7;
}
.PostList {
float: none;
clear: both;
text-align: right;
width: 96%;
margin: auto;
padding: 6px 0;
overflow: hidden;
border-bottom: 1px dotted #ccc
}
.postTitl2 {
float: left
}
.postText2 {
text-align: left;
color: #666
}
.feedbackItem {
padding: 8px;
border-bottom: 1px dotted #ccc
}
.feedbackManage {
float: right
}
.feedbackCon {
margin-left: 1em;
color: #666;
line-height: 1.5
}
.commentform td div span {
margin-left: 12px
}
.gallery img {
margin: 8px
}
#taglist {
margin: 20px auto
}
.pfl_feedback_area_title {
font-size: 16px;
margin: 16px 0;
font-weight: bold
}
.pfl_feedback_area_title a {
font-size: 12px;
color: #999;
font-weight: normal
}
.pfl_feedbacksubtitle {
height: 30px
}
.pfl_feedbackname,.pfl_feedbackManage {
float: left;
margin: 10px 20px 0 0
}
.pfl_feedbackCon,.pfl_feedbackAnswer {
clear: both;
margin-left: 12px
}
.btn_my_zzk {
border: 0
}
#sideBarMain {
padding-left: 0
}
#MyIng {
padding-left: 10px
}
div#sideBar div#side_ing_block ul li {
margin-left: 0;
text-indent: 0
}
#side_ing_block {
line-height: 180%
}
#EntryTag {
margin-top: 10px
}
#blog_ad_google h3 {
margin-bottom: 10px
}
#digg_block a:link,#digg_block a:visited,#digg_block a:active {
color: #015fb6
}
#digg_block {
color: #015fb6
}
span.diggnum {
color: #015fb6
}
span.burynum {
color: #015fb6
}
.newsItem p a:link,.newsItem p a:visited {
color: #06c
}
.newsItem p a:hover,.newsItem p a:active {
color: red
}
/*Skins*/
.cover-blue {
background-color: rgba(37, 104, 163, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8));
background-image: linear-gradient(140deg,rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8));
}
.cover-green {
background-color: rgba(21, 111, 120, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8));
background-image: linear-gradient(140deg,rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8));
}
.cover-purple {
background-color: rgba(73, 50, 82, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8));
background-image: linear-gradient(140deg,rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8));
}
.cover-red {
background-color: rgba(119, 31, 18, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8));
background-image: linear-gradient(140deg,rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8));
}
.cover-orange {
background-color: rgba(174, 80, 4, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8));
background-image: linear-gradient(140deg,rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8));
}
.cover-slate {
background-color: rgba(61, 66, 96, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8));
background-image: linear-gradient(140deg,rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8));
}
.cover-disabled {
background: none;
}
.panel-cover--overlay {
display: block;
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: rgba(68, 68, 68, 0.6);
background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9));
background-image: linear-gradient(140deg,rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9));*/
}
#under_post_news, #ad_under_post_holder, #opt_under_post, #site_nav_under, #google_ad_c2, #under_post_kb {
display: none;
}
.avatar, .logo {
height: 80px;
border-radius: 50%;
border: 3px solid #FFF;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
}
#p_b_follow {
color: #FFF;
opacity: .8;
}
#p_b_follow a:hover{
color: #FFF;
opacity: 1;
}
#cnblogs_post_body h4 {
font-size: 1em;
font-weight: bold;
}
然后，禁用模板默认CSS。
接着添加页脚代码，通过JS动态修改左侧cover层的颜色，总共有6种颜色可选，CSS里搜索/*Skins*/即可找到：
<script type='text/javascript'>
(function() {
$('#blogTitle').before('<div class="panel-cover--overlay cover-blue"></div>');// 这里是cover-blue样式，修改为cover-red试试
})();
</script>
非常感谢：http://www.cnblogs.com/brycezhang/p/5219510.html
Stay hungry,stay foolish.
