Wednesday, November 4, 2009

Tutorial: How to Add a Sidebar Element Divider

This is a tutorial I have been meaning to do for a while now, but haven't yet gotten around to it until today... you know, holidays and all.

So here we go!

Okay, you have two options when it comes to a divider for your sidebar elements:

1. You can make it just a plain kind of line (for line codes see this post).


2. You can design your own cute or fun one.

Let's start with the custom image first!

Custom Image Divider:

Okay, first you are going to have to design your own. I designed mine in Photoshop Elements 7, but you can use some of the free programs like or Gimp (links on the right sidebar). I also made sure to create my image to be transparent (and save as a PNG file), so it didn't have a white background. Here is what it is: (I wanted to stick to my Jelly Bean theme going on here)Note: you can also get pre-made ones all over the net.

Now, be sure to make sure it is the right size for your sidebar. To check the length of of your side bar, go into your HTML editor and look for this line:

#sidebar-wrapper {
padding: 0 5px 0 5px;
background: #99ccff;
border: 5px solid #ffffff;
width: 210px;
float: $endSide;

The line in red is the length in pixels your sidebar is -- this or smaller is what you want your picture to be. Since mine is 210 px, it will be about an inch long.

NEXT: you need to upload it unto one of the online hosts (Ex. Photobucket, Imageshack, etc.) to get an html code.

Okay once you do that, you are going to go here: DASHBOARD --> LAYOUT --> EDIT HTML
and find this little tidbit:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;

padding:0 0 1.5em; }

Now it gets a little ticky, so make sure you save your template before you go tinkering around!

You are going to need to edit this code, and spilt it into two parts. (Or you can just copy and paste this to replace the above code).

.main .widget {
border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;


.sidebar .widget {
border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;


Now that you did that, you need to add your picture!

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://yourdirectlink.png);
background-position: bottom;

background-repeat: no-repeat;

Notice that we changed the default border to 0 and added a little padding (50 px).

Now check out my sidebars to see how fun it looks!

Now for the plain old line -- don't get me wrong, I like the line, it can look VERY classy and sharp.

Customizing Sidebar Dividers with Border Lines:

This is pretty simple. Find this line:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;

The part in red is what you need to play with. You can now change the "styles" of the border (width, type, color). For the list of some codes look here. <----- to see examples too. Actually, let me make it a little easier on you: Here are the codes The "1px" is the thickness of the line... you can play with that.

Line Styles:

dotted (as shown above)

Color Codes:
So say you want your border to be a thick, dashed maroon line. It would look like this:

border-bottom:5px dashed maroon;

That's it! Have fun!


1 comment:

Anonymous said...

YES! Thanks for the tutorial :)

Blog Widget by LinkWithin