博客园博客皮肤修改与页面定制

介绍

个人喜欢简洁一点的博客皮肤，比如：

• SimpleClear（目前在用）
• BlueSky
• LessIsMore

用博文记录一下自己的定制内容。

SimpleClear

页面定制 CSS 代码:

/*博客正文左边距246px*/
#navigator, #blogTitle, #main, #footer {
    left: 246px;
    margin: 0 auto;
}

/*博客标题字体22px*/
.postTitle, .postTitl2, .entrylistPosttitle {
    font-size: 22px;
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #2175bc;
}

/*文章正文字体18px*/
element.style {
    font-size: 18px;
}

BlueSky

页面定制 CSS 代码:

/*总体宽度1280px*/
#navigator, #blogTitle, #main, #footer {
    width: 1280px;
    position: relative;
    margin: 0 auto;
}

/*最上方导航栏字体16*/
#navList li a {
    font-size: 16px;
    text-decoration: none;
    color: #111111;
    padding: 10px;
    background-color: #F5F5F5;
}

/*最上方导航栏高度56px*/
#header {
    height: 56px;
    width: 100%;
    background-color: #F5F5F5;
}

/*侧边栏宽度380px*/
#sideBar {
    width: 380px;
    padding: 16px;
    display: inline-block;
    overflow: hidden;
    color: #2D2D2D;
}

/*主内容栏宽度800*/
#mainContent {
    width: 800px;
    background: white;
    box-shadow: 0px 0px 8px #999;
    -moz-box-shadow: 0px 0px 8px #999;
    -web-kit-shadow: 0px 0px 8px #999;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -web-kit-shadow: 6px;
    float: left;
    display: inline-block;
}

/*博客标题字体22px*/
.postTitle, .postTitl2, .entrylistPosttitle {
    font-size: 22px;
    padding-right: 64px;
    padding-left: 10px;
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: #2175bc;
}

/*文章正文字体18px*/
element.style {
    font-size: 18px;
}

body {
    background: #F5F5F5;
}