How to customize csdn styles

From:

Http://blog.csdn.net/anlisten/archive/2009/11/20/4843741.aspx
Http://dev.firnow.com/course/1_web/webjs/2008515/116548.html

If you already have a more personalized counter, I will teach you how to create a custom skin function for csdnblog. If you do not have a personalized counter for your csdnblog, see another article I wrote.

About Adding counters to csdnblog
Http://blog.csdn.net/hbzxf/archive/2004/06/26/27040.aspx

1. Use the system-defined skin
The system has provided several defined skin interfaces for us. We can use the ''option''-''configuration''-''skin ''to select what we like.

2. Custom Skin

The following describes how to change the cogitation skin.

1. Options-configuration-skin-select cogitation

2. csdnblog uses http://blog.csdn.net/skins/cogitation/style.cssas the sample table file by default (how do I know, huh, huh, there is in the source code)

3. Open http://blog.csdn.net/skins/cogitation/style.cssthrough notepad or other editing tools to see the following content (screenshot part)

.HeaderTitles a:visited,.HeaderTitles a:active,.HeaderTitles a:link,.HeaderTitles a:hover{ color: White; text-decoration : none; font-size: .75em; font-weight: normal;}.HeaderBar{ font-weight: normal; font-size: 8pt; border-collapse: collapse; background-image: url(images/BlueTabBack.jpg);   background-repeat:repeat-x;}.HeaderBar a:visited,.HeaderBar a:active,.HeaderBar a:link{ color: WhiteSmoke; text-decoration: none; font-weight: normal;}.HeaderBarTab{ background-image: url(images/BlueTabFace.jpg);   background-repeat:repeat-x;   border-collapse: collapse;   padding: 0px;}.BlogStatsBar{ text-align:right; font-weight: normal; font-size: 7pt; color: Silver; border-collapse:collapse;}

4. Now let's redefine # top, # top defines the layout top style

The original style content is as follows:

#top { background-image: url(images/BlueTabBackground.gif);   background-repeat: repeat; color : WhiteSmoke; border-top : 4px solid Black; border-bottom : 4px solid Black; padding: 0px; margin: 0px;}

Check the source code of your csdnblog and find that # The top application is located as follows:

<Div id = "TOP"> <div> <Table> <tr> <TD class = "headertitles"> 

The new style is as follows: (we need to modify the background image now)
# Top {background-image: URL (images/bluetabbackground.gif); // change the background image URL to the background-repeat: Repeat; color: whitesmoke; border-top: 4px solid black; border-bottom: 4px solid black; padding: 0px; margin: 0px ;}

5. paste the defined style into the ''option''-''configuration''-''custom CSS selector''
6. Save the changed configuration and check the page of your csdnblog. Is it a custom image?
7. Follow these steps to modify each other one by one to create a distinctive and personalized csdnblog.