Create a custom csdn blog skin

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">
<H1> <a id = "header1_headertitle" class = "headermaintitle" href = "/hbzxf/"> hbzxf </a> <P id = "tagline"> there are more than one memories that need to be reversed. Maybe this is the philosophy of life. </P>
</TD>
</Tr>
</Table>
</Div>

The new style is as follows: (we need to modify the background image now)

# Top
{
Background-image: URL (images/bluetabbackground.gif); // you can change the background image URL to the position of your own image.
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.

Article Source: http://www.diybl.com/course/1_web/webjs/2008515/116548.html