Updates

Skip to: Part 1, Part 2, Part 3, Part 4, Part 5, Part 6, Part 7, Part 8

As I promised, in this tutorial, we will be creating a sidebar for our theme.

For the sake of example, we will be including four elements which are commonly placed in the sidebar: Title, image, description, and links. The final outcome of our design will look like this, but if you’re following along feel free to deviate as much as you want. This is only a guideline.

To start with, I need to mention divs. Web pages used to rely heavily on tables for their layout but these days they rely more upon *div* elements. These create boxes around your content which can be manipulated by the rules you apply to it. We will name our div element “sidebar”. It will be written like this:

<head>…<style type=”text/css”>#sidebar {}</style></head><body><div id=”sidebar”></div></body>

While there is no content between the opening and closing <div> tags, and no height and width specifications, it will not appear on your page. We are going to specify a width but not a height, so that the box will expand with the content inside it. We are also going to give it a white background.

#sidebar { background-color: white; width: 260px;}

We also want the sidebar to sit away from the top left corner of the page (where it currently is) and not scroll. We do this using a property called “position”.

position:

static: This is the default. Kind of pointless. I never use it. It means it will scroll with the page in position you placed it in the html, which is what it would to anyway.
absolute: This is positioned relative to the page, no matter where you place it in the html¹. It will scroll with the page.
fixed: This is the same as ‘absolute’, except that it is relative to the window, not the page, so it does not scroll.
relative: This will move your div relative to the starting position. So if you have an image and want it to peek outside the surrounding div a little, you can move it up, down or sideways by a pixel value using this property.

¹ If you have, for example, div2 inside of div1, and both have a position value assigned, then div2 will be positioned relative to div1 instead of relative to the page/screen.

The last three values are all accompanied by one or two of these: “top”, “bottom”, “left”, or “right”. You can’t use left and right at the same time, and you can’t use top and bottom at the same time, but you can use a combination that doesn’t conflict each other, like top and left. For example, I want my sidebar to sit 100px from the left and 150px from the top. This, along with the two properties we established earlier, looks like this:

#sidebar { background-color: white; width: 260px; position: fixed; top: 150px; left: 100px;}

At this point I am going to introduce three more customisation options. We are going to have two main colours, which we will be using throughout the theme, so it is fair enough that the user should be able to change them. We will also have a sidebar image.

The Title

You don’t HAVE to put the title in the sidebar, but I am for this example. I am also going to show you how to use a custom font, because custom fonts are cool.

We already used {Title} to add a title to the tab. We are going to insert that tag into the sidebar too, inside a div that I am going to call “title”.

<div id=”sidebar”><div class=”title”><a href=”/”>{Title}</a></div></div>

There are a few things I would like to point out about that example. First of all, writing “/” instead of a url will just take you to the home page when you click it. I like making the title a link because it is a useful navigation feature, and since most web pages are designed that way, people have been trained to click the title to return to the home page. They may get annoyed if there is no link there. Another thing I would like to point out is that I wrote “class” in that example instead of “id”. A div can have both an id and a class, and when written in the css section, a class begins with a full stop instead of a hash tag.

#sidebar .title {}

Putting the tag “sidebar” before “.title” means that we can have multiple tags called title (which we will), all with different rules. This particular one will only apply when it is contained inside a div with the id “sidebar”. I also like to keep things ordered by writing the name of the div that contains it.

I am going to start with adding three properties: font-size, text-align, and padding. Font-size is simple, you just write a pixel value. Text-align has four possible values: left, right, center, and justify (aligns text to the left and right margins, putting extra spaces between the letters if necessary). Padding adds in space between the text and the edge of the div surrounding it, so that the text is not hard up against it, which generally doesn’t look nice. I won’t be specifying a text colour because the colour of links override the default colour. There will be a separate tag for that.

#sidebar .title { font-size: 30px; text-align: center; padding:10px;}

We also need to add in our custom font. You can find a full list of fonts you can add to your webpage here. Keep in mind that if you have too many custom fonts, your page will load slowly.

When you have picked a font, click the “Quick Use” link. Under step 3 will be something that looks like this:

You need to copy this into the <head> tag, before the <style> tag.

Step 4 has something like this:

font-family: ‘Great Vibes’, cursive;

That needs to be copied into the tag you want it to be applied to. So for our title we have:

#sidebar .title { font-family: ‘Great Vibes’, cursive; font-size: 30px; text-align: center; padding: 10px;}

Since the title is a link, we also need to specify a color for the link. You can customise links separately by writing ‘a’ after the class or id name.

#sidebar .title a { color: {color:Primary Colour}; text-decoration: none;}

Links by default are underlined. “text-decoration:none;” simply removes this underline.

Now to make it change colour when the mouse hovers over it, you need to add “:hover” to the end in yet another tag.

#sidebar .title a:hover { color: {color:Secondary Colour};}

Try hovering over the title on the example page to see how the title looks with these things combined.

Image

You can insert the persons avatar if you wish. This would be done using this code:

96, 64, 48, 40, 30, 24, and 16 can be used in place of the 128. This represents the pixel size of the square image. I don’t use it often because even 128px is pretty small, remembering that our sidebar is 260px wide.

Instead we will be inserting the image we inserted into the customise options further up this page. We are also adding the class “image”.

You don’t need much code for the image. The only thing you need to watch out for is that the image will display at its actual size unless you tell it otherwise. If someone uploads a huge image, it will spill out of the div and you don’t want that. This is an easy fix.

#sidebar .image { width: 260px; height: auto;}

The height is set to auto so that it scales evenly. If that were not there, the image would get squished sideways but stay just as tall.

In this example the image is the same width as the div. If yours is smaller and you want to center it, use “text-align:center;”.

Description

<div class=”description”>{Description}</div>

I am specifying a text colour in this one, unlike the title tag, because large parts of the description will not be links. A property you haven’t seen before is the line-height property. You can enter a percentage or a pixel value. The default is 130%. This means 130% of the font-size. When I entered 100%, this means that the line height is 11px just like the font-size.

#sidebar .description { color: black; font-size: 11px; text-align: justify; padding:10px; line-height:100%;}

Not everyone will have links in their description, but if they do, you need to make sure that they don’t turn out that ugly default blue with an underline. No one wants that.

#sidebar .description a { color: {color:Primary Colour}; text-decoration: none;}#sidebar .description a:hover { color: {color:Secondary Colour};}

Links

I have to confess a pet peeve of mine. I have seen a lot of theme designers create links like in my example by doing this:

I don’t like this because it is NOT necessary and takes up a lot of space in the customise menu. I am going to show you how to do it the easy way, with all your page links displayed, and none of those silly text options.

This is all the code you need to display the ask, submit, and page labels. The block tags that enclose them mean that they will only display if you enabled ask and submit, and actually have pages.

{block:AskEnabled}<a href=”/ask>{AskLabel}</a>{/block:AskEnabled}{block:SubmissionsEnabled}<a href=”/submit>{SubmitLabel}</a>{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}<a href=”{url}”>{Label}</a>{/block:Pages}{/block:HasPages}

Notice that the pages have two enclosing tags. That’s because if you have multiple pages, it will render multiple times, once for each page.

If you want to display the links like basic text, then you could enclose all of that in a single div and style that div like the description.

<div class=”links”>• {block:AskEnabled}<a href=”/ask>{AskLabel}</a> • {/block:AskEnabled}{block:SubmissionsEnabled}<a href=”/submit>{SubmitLabel}</a> • {/block:SubmissionsEnabled}{block:HasPages}{block:Pages}<a href=”{url}”>{Label}</a> • {/block:Pages}{/block:HasPages}</div>

• Ask Me Anything • Submit • Page one • Page two • Page three •

I am doing something a little different. To make the buttons on my example page line up without the need for all those customisation options, I gave each link in its own div. Also notice that I put the code for the hyperlink outside the div so that the whole box becomes a link. If I had put the hyperlink code inside the div, only the text would be a link.

See also Npm

{block:AskEnabled}<a href=”/ask”><div class=”links”>{AskLabel}</div></a>{/block:AskEnabled}{block:SubmissionsEnabled}<a href=”/submit”><div class=”links”>{SubmitLabel}</div></a>{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}<a href=”{url}”><div class=”links”>{Label}</div></a>{/block:Pages}{/block:HasPages}

This alone won’t help. It needs to be styled correctly too.

First of all some basic appearance options:

#sidebar .links { background-color: {color:Primary Colour}; color: white; font-size: 11px; text-align: center; padding: 3px 5px; margin: 2px;}

So we have the background colour of the boxes. The colour of the text is established here instead of in an “a” tag since the link is applied to the div, not the text. The margin property is what causes the white outline around the link buttons.

I would like to bring attention to the fact that “padding” has two numbers after it. You can actually have as many as four.

1 number: That number is applied to the top bottom and sides.
2 numbers: The first number is applied to the top and bottom, while the second is applied to the sides.
3 numbers: The first number is applied to the top, the second to the sides, and the third to the bottom.
4 numbers: The numbers are applied in order of top, right, bottom, left. Think of it as a clockwise circle.

All of this also applies to the margin tag.

Returning to the links, there are two very specific properties needed to line up the buttons. The first is:

float: left;

By default, all divs are stacked on top of each other, as if you pressed enter on the keyboard at the end of each one. By adding “float:left;” you can stack everything side by side until you run out of room, then everything moves on to the next line. I used this a lot in my Library theme to stack the books side by side. If you resize the width of the window, then the books will be bumped down to the next shelf. So logically, if we make the buttons half as wide as the sidebar, we can fit two in.

Now this gets a little mathy, so bear with me. Half of 260px is 130px. But we also added in margins. That’s 2px on the left and 2px on the right, so subtract those to get 126px. The padding also adds to the width, so we have to subtract that too. 5px on either side makes 10px, so subtract that and you get 116px. If you’re really not mathy, just guess a number, and if it doesn’t fit, make the number smaller, and if you have your two columns and there’s still a gap down the side, make the number bigger.

width: 116px;

Now just a few last things.

#sidebar .links a { text-decoration:none;}

…so your links don’t get underlined, and…

#sidebar .links:hover { background-color: {color:Secondary Colour};}

…so your background colour changes when you mouse over a button.

Well. This has been a VERY long lesson, but we are finally at the end of this section. I am sure you will want to see how this looks with everything we’ve done so far put together, so you can view the code here with a few extra notes. In the next lesson I will start on the actual content.

Previous Next

Related posts: