Hostess

Synthoxide

Main Menu

Clear About Awards Credits Joined Contests Linkage Taggie

Contest

Current Rules Entry Form Contestants Past Winners

Graphics

TOS 100x100 Icons Brushes Designs Textures Wallpapers

Icons Resource

Bases Textures Tutorials

Tutorials

HTML PHP Photoshop Other

Custom Subheaders Tutorial Intro

You can use HTML to make your own custom subheader. You can also make your own in Photoshop, but that's more complicated. Here, I'm going to teach you how to make custom subheaders using HTML. Use your imagination and your HTML knowledge to create a beautiful header!

Custom Subheaders Tutorial

1. First, code your layout like normal. If you use CSS and stylesheets, apply these codes into your stylesheet. If you don't use stylesheets, just place these codes somewhere around where you make link effects, scrollbar colours etc.

2. Now add this to your stylesheet:

.head {
color: #000000;
font-size:12px;
font-weight: bold;
font-family:Georgia;
height:13px; }

and edit it to your heart's desire. Try different designs; you don't have to use all 4 borders of a rectangle to surround your text. Change it around, make the letter spacing more/less, change the font, have background colour. An example of a nice header would be:

.head {
color: #5DC3F8;
font-size:12px;
font-weight: bold;
font-family:Georgia;
height:13px;
border-bottom: solid 1px #12ADFD; }

This header will give you a blue header. The text will be underlined with a blue, solid line 1 pixel thin. The text will be a lighter blue, 12 pixels high, and of Georgia font.

3. In your index page, everytime you want to add a subheader, add this code:

<p class="head">Text</p>

Note that the word between the "" has to match the name you gave your subheader in your stylesheet. So in Step 2, the name was .head, so your code in your index should be "head" as well. (no period) Make the text to whatever youw want.

4. Use these subheaders in your main content as well as your sidebar. The headers would just be smaller in your sidebar; they will be resized thanks to the div positioning you coded. (assuming that you used divider codings)

Final Note

I hope this tutorial helped you lots! I worked hard writing this tutorial, so I would appreciate it if you provided a link back to me if it helped you in any way. If you have any questions about this tutorial, don't hesitiate to email me.

Aureus and all content © 2004-2007 to Celes. All Rights Reserved. No part of this site may be duplicated, altered, claimed, sold, changed, or in any way or form without permission from the owner. You may view the credits here. Thank you so much Chie for hosting me!