Free CSS Design Element: 300x34 Title Box (Easy to add to your current template)

This will show you how to add a nice looking "title box" to your blog using a simple CSS snippet and a simple HTML code. I created it for my site and I thought I would share it with you as it has a multitude of uses. Change the color to match your theme and viola! You can use it to highlight certain links or to caption images and various other things.

300x34 Title Box

Here's what it looks like:

Enter Your Text Here

Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration
Example Link - A Demo Link of Demonstration

Here is the CSS Snippet:

#titlebox {
width: 300px;
height: 34px;
letter-spacing: 1px;
margin-bottom: -24px;
padding: 2px 0px 0px 9px;
background-repeat: no-repeat;
background-image:url('http://YOURWEBSITE.com/titlebox.png');
}

Here's how to use it on your site:

Step #1: Choose and download the color you want or download the PSD file to change the color.

Download:

Download the original PSD file to change the color to match your own sites color scheme.

Step #2: Upload your selected title box image to your website or file hosting service.

Step #3: Copy the code snippet and add it to your style sheet.

To add to Blogger go to Dashboard > Design > Template Designer > Advanced > Add CSS and insert code.

Step #4: Replace "http://YOURWEBSITE.com/titlebar.png" with your Image URL that you uploaded and save/apply the new CSS snippet.

Step #5: Now the fun part here's how to do this on your page anywhere you want anytime.

Use this HTML to insert it where ever you want on your page:

<div id="titlebox">Type Whatever You Want</div>

Using that example it should look like this:

Type Whatever You Want

You may need to tweak it a bit so here's some notes on how to do that.

CSS NOTES:

Remember it's only 300 pixels wide so you're limited to how much text you can fit in there. Removing the "letter-spacing: 1px;" line will help.

Edit the "margin" line to fix the space between the bottom of the title box to whatever's below it. It may need shrunken up depending on your taste.

Edit the padding values to adjust where the text sits inside the box. Depending on the font you for sure will have to change this.

My test blog for example uses Veranda for the font so I had to add 2 more pixels padding for the top to make it look right so 4 instead of 2. Just play around with it, and if you don't know much about CSS it's a good way to learn by experimenting.

Let me know of sucesses, failures, opinions comment below!