Vno博客样式分享

不知不觉有一年多没有更新博客了，还是几位园友因为喜欢这套博客样式发了消息，否则我都快忘记自己还有一个博客了，哈哈。
言归正传，这套博客样式是当时闲来无事copy的iOS界喵神的博客Vno，确实很漂亮，喜欢的赶紧进入后台设置页面开始吧。

设置为自定义主题

博客皮肤设置为LessIsMore，继续往下看真的是Less is more！！

页面定制CSS代码

#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;
}

页脚Html代码

通过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>

That's all, have fun^_^