How to Create a. Text blog Custom Skin

How to Create a. Text blog Custom Skin

Yesterday, I posted a post on csdn about making a. Text blog Custom Skin.ArticleFor those who are new to. textblog, refer
View. (The veteran will surely be there. Haha, John is playing a big game here)

Create a custom csdnblog skin

Hbzxf (Hao)
Http://blog.csdn.net/hbzxf/

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 select the one we like through the 'option '-'configuration'-'skin.

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 this,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;
}

View your own csdnblog SourceCodeI found that the position of # top application is 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 to 'option'-'configuration'-'custom CSS selector'

6. Save the changed configuration and check your csdnblog page again. Is it a custom image?

7. Follow these steps to modify each other one by one to create a distinctive and personalized csdnblog.