Sidebar HTML Tutorial!

Written by 6 Comments


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.

Tags:

Share:

6 comments

  1. I can tell you are wayyy smarter than me! I will have to print these out and study them, then see what I can do.

    ReplyDelete

  2. Ita agree Mari..Sandra is very good at html.. thanks for doing this...

    ReplyDelete

  3. Sandra,I enjoy comming to visit you.I like that you are willing to share your knowledge,unfortunaly this old dog just gets confused.

    ReplyDelete

  4. So that's how they use clipart..:lol:
    that's great. Thanks for the lesson. Happy Easter!

    ReplyDelete

  5. Thanks for the advice, your blog is always so beautiful.

    Hugs and love

    Sarah x

    ReplyDelete

  6. I just switched over from Xanga to Blogger - wow what a difference in ease!!!!! Thanks for all the help! Now I can individualize my blog a bit. I was wondering if you know how to put a subscribe button on, so that other friends of mine can keep track of when I post via email, like Xanga does! I've noticed that some have a little link to click on that they have added that is obvious and not written in small print at the end of the posts with the comments.

    Thanks! Pam

    ReplyDelete

Thank you for reading and taking the time to comment. Please be respectful of each other and my blog. Rude comments will be deleted.

Thank you for stopping by, hope you are having a Blessed day!

♥Sandra♥