Sidebar HTML Tutorial!

One of the things a lot of you asked about was my sidebar, how did I get the different color block around the menus etc.

It's really simple and once you see how easy it is I'm sure you will all start experimenting too.

Remember the template I gave you the other day?

Scroll down to the code that looks like this:

.side {
padding: 5px;
margin: 5px;
font-size: x-small;
BACKGROUND-color: #ffffff; border: solid 2px #b8707b;
color: #54556c;
text-align: justify;
line-height: 140%;
}

See the code that is highlighted???? The first part is going to be the background color of your block, in this case #ffffff which is white. The next line is the border around it, that will determine the color of that.
The following line color: is what color the text will be in that box. Go ahead and experiment with that to get the colors you want.



One other thing you can do is the heading for the sidebar menus.

.sideheader {
padding: 3px;
margin-top: 4px;
margin-bottom: 4px;
font-family: Mariah;
font-weight: bold;
font-size: large;
color: #b8707b;
text-align: center;
line-height: 140%;
}


See how the heading is in a different font now??? All you need to do is download the fonts you like, there's tons of free fonts out there. Here's some to get you started, 1001 Free Fonts, SimplytheBest and DaFont. Download the font you like, install it into your Windows/Fonts folder and then you can use it.

All you need to do is insert the name of the font in the code font-family: Mariah; I changed mine to Anglican Text above and you can see the difference.


If you want to add a graphic, first find the one you like, make sure you have the URL for it, then go down to your sidebar links and above each menu you enter the image code.....here's an example:

Click on the image to make it bigger.........the code is highlighted for you.


And there's how it looks, I used a graphic from Country Clipart.

Hope this helped a bit, like I said already, I'm no expert but what I've learned I did on my own through trial and error :) Can't wait to see what you guys come up with.