My blog garden skin Template

The blog garden supports CSS customization. In the past, it was based on the skin prepared by others. It was inconvenient to make small modifications to achieve the desired effect. During the May Day holiday, I learned the basic usage of CSS and started to try to write a slightly larger CSS code with a custom skin.

Blog garden custom skin of the basic method, is to enter the management background, open the "Settings" (general address is http://www.cnblogs.com/<username>/admin/configure. aspx, replace <username> with your username), enter CSS code in the text box under "Custom pages through CSS", and then "save" to open the home page or refresh the home page, it will have an effect. This method can also be used for small-scale modifications. If the skin is fully customized, it is not convenient. Fortunately, the blog yuepi team provided a set of offline HTML template files and a document. The template file is a long time ago, and the HTML node has changed, increasing or decreasing.

At the end of this article is my customized CSS code. When I use it, I will mark "Disable template default CSS. The overall style imitates the previous blog template (purely by Alex. o0), and strive to brief: The colors use gray colors at all levels; and the "latest essay" and "read rankings" widgets on the sidebar are sent to hidden, this is more refreshing (there is also a reason that you don't want to worry about adjusting the style of those widgets); there is a lot of space for "Custom announcements", and now there is little content. I only tested it on Windows + chrome and did not perform compatibility tests. I will release it first and gradually improve it later.

Many blogs are used, and there are basically four categories of blog skin (themes, templates, styles, etc.) customization. The first category cannot be customized. For example, the current csdn blog provides a few sets of skin that is poor and uugly. You can only select one of them, and the skin setting function is in the beginning; category 2: Web customization, typical of which are Netease blogs and QQ spaces. On the basis of the first category, you can use a browser to add, remove, move, and modify various widgets on the interface. Category 3, CSS customization is typical of the blog Park. You can load custom CSS code to modify your skin. Category 4: Template customization. Now I know two things: diandian.com) and farbox (farbox.com), the blog website provides template interfaces and Usage Details (such as rendering engines, template syntax, page variables, etc.), users write their own web template files to customize the skin. Among the four categories, the fourth type of customization has the highest degree of freedom and is more difficult, requiring some web development skills. The third category is slightly less customizable than the fourth category, but it is easier to control details than the second category. Compared with the fourth category, it also requires Web development skills, but the requirements may be much lower, the technical requirements for websites are much lower. The second type is most suitable for common users, but the first type is not mentioned. We hope that the blog Park can provide the fourth type of customization features early.

The final part of the article is the code:

View code

#profile_block { display:none; }h3.catListTitle { display:none; }#leftcontentcontainer { display:none; }#navigator .blogStats { display:none; }.dayTitle { display:none; }ul, a, li, h1, h2 {    list-style-type:none;    text-decoration:none;    color:#000;    padding: 0;    margin:0;}a:hover {    text-decoration:underline;}body{    background: #eeeeee;    font-family: "Microsoft Yahei";    word-wrap:break-word;}::selection{    background: #e0e0e0;}#home {    margin: 0 auto;    width: 840px;    height: 100%;}#header {    margin: 10px 0;    padding: 10px 0;    position:relative;}#blogTitle h1{    display: inline;    margin: 0 10px;    font-size:80px;    font-weight:bold;    letter-spacing:-10px;}#blogTitle a { color: #555555; }#blogTitle a:hover { text-decoration: none; }#blogTitle h2{    display: inline;    margin: 0 10px;    font-size: 40px;    color: #dedede;}#navigator {    width:100%;    margin: 5px 0;    padding:10px 0;}#navigator li{        margin: 0 5px;    float:left;}#main {    position:relative;    width:840px;    background-color: #e0e0e0;}#mainContent{    background-color: #ffffff;    margin-right:240px;        padding:20px;}.day .postDesc {    border-bottom:dotted 2px #ddd;    margin: 5px 0 15px 0;    font-size: 80%;    color: #666666;}.day .postTitle, .post .postTitle{    font-size: 130%;    font-weight: bold;    text-shadow: 2px 3px 2px #cdcdcd;    margin:5px 0;}.day .c_b_p_desc{    padding: 5px 0;}.day .c_b_p_desc_readmore, .topicListFooter a{    border-left: 2px #666 solid;    font-size: 80%;    padding: 0 5px;    margin: 0 5px;    color: #666;}.day .c_b_p_desc_readmore:hover, .topicListFooter a:hover{    background: #efefef;}.catListTitle{    color:#aaaaaa;}#sideBar {    width:200px;    position:absolute;    padding:20px;    right:0px;    top:0px;}h3 {    color: #aaaaaa;    margin: 5px 0;}#footer{    text-align:center;    padding:10px 0;}