Blog garden template CSS modification experience and methods.

After continuous improvement, I still feel satisfied with this style.

Next I will post my experiences and methods for later viewing or other new users to check. (Because it is my first time to get things about CSS, it must be very rough. Experts can only entertain themselves or bypass them directly .)

 

At the overall structure level:

First, the blog garden has a set of top-level CSS styles,

Then, select the CSS style of a template. This template inherits the CSS style of the blog garden, and then rewrite some of the classes to achieve the style effect of the template.

Finally, based on the template CSS style, we rewrite some classes to achieve the desired effect. The code you write is pasted in (custom page style through CSS.

It is basically the same as the inheritance in C ++. Self style: Template style: top-level style.

 

Specific implementation:

We don't need to look at the top-level style, because the top-level is basically a whiteboard and will be overwritten by the template.

Directly select a template, view the blog source file, find the template's CSS file address, and open the template here. I chose http://www.cnblogs.com/Skins/LessIsMore/style.css.

Then, view your own interface and modify the dissatisfaction. Specific Operation: First open the source file and find the place to be modified. There is a class = "XXX" in front, where XXX is the class name to be modified. Then rewrite the class by yourself. Override method, such as body {background-color: # f3f8fc;} to modify the overall background color. Another way to find the class name is to see the blog garden documentation,: http://skintemplate.cnblogs.com/

The rewritten content is not written by yourself. It doesn't matter much. Use the most efficient copy and paste method. You can directly open the CSS file, find the implementation of this class, and copy it to others.

 

The following is all the code I have written:

/* Overall background */body {background-color: # f3f8fc;}/* link style on the left */. catlistpostcategory ul Li ,. catlistpostarchive ul Li ,. catlistimagecategory ul Li ,. catlistcomment ul Li ,. catlistview ul Li ,. catlistfeedback ul Li ,. catlistessay ul Li ,. catlistlink ul Li ,. newsitem ul Li {margin-top: 1px; margin-left: 3px ;}. catlistpostcategory ul ,. catlistpostarchive ul ,. catlistimagecategory ul ,. catlistcomment ul ,. catlistview ul ,. catlistfeedback ul ,. catlistessay ul ,. catlistlink ul ,. newsitem A {text-Decoration: none; color: #3b5999 ;}. catlistpostcategory ul a: hover ,. catlistpostarchive ul a: hover ,. catlistimagecategory ul a: hover ,. catlistcomment ul a: hover ,. catlistview ul a: hover ,. catlistfeedback ul a: hover ,. catlistessay ul a: hover ,. catlistlink ul a: hover ,. newsitem A: hover {text-Decoration: underline;}/* navigation bar */# navigator {Background: URL (http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/r_navbg.gif) Repeat-X;}/* left category title */. catlisttitle {Background: URL (http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) Repeat-X; padding: 2px 5px 1px 5px;}/* right body title background */. posttitle {Background: URL (http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) Repeat-X; padding: 2px 5px 1px 5px; margin-top: 10px;}/* input box */. input_my_zzk ,. comment_textarea ,. author ,. URL {background-color: # f3f8fc}/* button */. comment_btn ,. btn_my_zzk {Background: URL (http://images.cnblogs.com/cnblogs_com/aoyihuashao/223549/t_navbg1.gif) Repeat-X;}/* Hide the announcement word */. newsitem {padding-top: 15px; padding-left: 5px; padding-Right: 5px ;}. newsitem. catlisttitle {display: none;}/* right body title word */. posttitle A {font-size: 15px; font-weight: bold; text-Decoration: none ;}