Lesson #3: Styling things
Okay Caroline, I hear you say, we know all about divs now, let's start making some!
I hear ya. So, let's do it!
I'll take the example of my third theme again. A little simplified. I won't put in any of the actual Tumblr stuff yet, that's for later.
Let's say I wanted to make a sidebar that looks like this:
I start with just an empty page, with just posts on it, for the sake of this tutorial. These are the divs I will need:
A wrapper div, which will parent all the stuff in my sidebar.
The wrapper is important: every item inside it will position relative to the wrapper. If you move the wrapper, everything will move with it, but will stay at the same distance of the edges and each other.
We start by putting everything in the html.
Of course, there's nothing in my CSS yet, so it looks like this:
That's not really right yet, obviously. It scrolls along with the posts, too. Let's try and fix that.
We'll need a css block for each div here, and an extra one for editing the img inside the sidebarimage div:
Now, to stop the sidebar from scrolling along, we add position:fixed to the wrapper div. That means the div will become independent from other things on your page.
Okay; so, there's a few things I want. I want the whole sidebar to slide down about 150 pixels, and to the left about 20 pixels, the sidebar image to be only 200px wide, a border around it, and another, bigger font on my title, which I also want in all caps.
The CSS now looks like this:
Which makes the theme look like
A little better, but not exactly what I wanted yet.
For the next part, I'd like the title and description to move to the right. Because I want them together, I'll put them in another wrapper class.
For the next part, I'll colour the two wrappers: the big one in yellow, and the smaller one in green. Just for you to see how they look. I also find it often handy to do this while making themes, so I can see what the div is doing.
We'll need to make the big wrapper wider, like 450px. The smaller one is 220px.
To put them next to each other, we can use two methods.
We need the div to move to the left and to the top, so the obvious choice is to use margins. We give the #wrap div a margin-left of 220px and, because we need it to move upwards, a negative margin-top of -110px. To make it prettier we add a little padding to the title and description, so the end result looks like this:
Looks about right, and it wasn't even that complicated!
Another way to achieve this is to use float. Float defines where a div is aligned in comparison to its parent div. We can align the image left and the green wrapper right, by adding respectively float:left and float:right to the divs. Then the theme looks like this:
So all we need is a little top margin for the green wrapper, and we're done! (edit: i did forget the top margin in the image below, oops.)The final code looks like this:
Well, look at that, we just did the basics of an actual theme!
Now, I'm going on vacation for 9 days, which gives all of you the opportunity to try this out. I'd recommend you find a base code somewhere and mess around with it - practise is the best way to learn this stuff!
I'll leave you with a few great tips:
Be patient, no one gets this stuff right in one day
w3schools is your best friend
Don't be afraid to try new things
Don't be afraid to screw up
Really you should try new things as screw them up really bad because
Everything you do can be undone
If anything's not clear or it's not working you can shoot me an ask (I may be able to get online a few moments on vacation and if not I'll answer all of you after I'm back)
But seriously: GOOGLE GOOGLE GOOGLE. Okay?
When I'm back, we'll have a look at things that are specific for Tumblr. Until then, happy html'ing!
← previous lesson | next lesson →