Caroline's Theme Tutorials @carolinestutorials - Tumblr Blog

Hey guys,

I'm sorry about all the requests I haven't done yet. Truth is I probably won't do them anymore because I really don't have enough time, and I really don't feel like keeping this blog up anymore. I'm not deleting it because people might still want to use my existing tutorials, but I'm not gonna make any new ones for an undetermined amount of time.

I am however still available on my main blog to help you with specific theme questions :)

Caroline

Lesson 11 ~ Adding a reblog button (text or image)

(Again requested by sirstrength. Again sorry, late, busy.)

Okay, so this is something that is not in the theme reference doc, but it's not hard either.

Say I had a theme with post info that looks like this:

And I wanted to add a reblog button. The link for reblogging a post is just the variable {ReblogURL}, so I just add a link to that in style with the rest of the info.

See, already fixed it. That wasn't hard. If you want really different styling on the reblog link you can always put it in a separate div and style that.

For the reblog button to be an image, say for some reason I wanted a pokéball as reblog button - let's take this one. So first step, find your image as a link or make it and upload it somewhere on the internet. It should preferably be transparent.

Simply replace the word 'reblog' by the image, like this:

Of course it's a bit big now, so we add a bit of styling to it. More specifically, width and height. If my div for postinfo is called info, then we do it like this:

Now, you see that the image lines up with the text at the bottom. But we may want to get it nicely in the middle. For this we can use a vertical align:

And indeed now we get:

I hope that covers everything you wanted to know, these are the basics anyway. But really, experiment with things as much as you can, it's the best way to learn :)

#theme tutorial #add a reblog button #reblog button #html help #html #css

Lesson 10 ~ Styling tags

(Requested by sirstrength. Sorry this took so long, things have been quite busy lately.)

On itself, styling tags isn't that much different to stying regular links. For styling of tags, you'll only need two things: one div for all the tags together, and one to style them apart (mostly used for spacing). Looking at the theme reference we also need two blocks: {block:HasTags} and {block:Tags}. Very basically, we start with this.

We can immediately put a display:inline one our .tag div, because usually we want tags to show next to each other, not underneath. This basic code makes our tags (with post info) look like this:

Now we have a lot of things we could do. We could for example add a hashtag or something else in front of each tag, like this:

We can seperate them a bit more by adding a right padding (or margin) on the .tag div. We can make them bold or italic, lowercase or uppercase, add a background, whatever you want to do. You can also align them centered or right on the #tags div.

Here's some examples:

Example one

Which gives:

Example two

Which gives:

Example three

Which gives:

You can do whatever you want to them, really.

Don't forget that adding colors or animations on links needs an extra CSS block, in this case that would be .tag a{ .. }

There you go! The tutorial on reblog buttons is coming as well :)

#sirstrength #theme tutorial #html #css #html tutorial #code help #styling tags

princeoberynn

Hello my dear :) may I ask how you got the link hovers to all go to the same spot? It's quite interesting and I would love to understand how if it is not too much effort to explain! Have a lovely day anyways hun <3

Hey!

(fun fact: I didn’t mean to do it but I was messing around and it did the thing and I liked it so I left it like that)

okay but let me show you

#hey i did this thing #other

Hi! Is there a way to give the asker image in asks a border?

There is! You just do everything as usual, you put the asker image in a separate div, let's call it #askimg. Then you just add style explicitly to the images in this div, like this:

#other #donnaswinter #answers

Hello! Can you link me to your update/drop bar tutorial? Please and thank you.

I don't have one for that! You can make one by combining the things about divs and the one about animation. Unless you want me to make one specifically for update bars? :)

#zapstiel #answers

Amazing as usual! But what kind of meta's do I have to use for those?

For links? Just one texual for the name and one textual for the url :)

And so on for 2, 3, 4.. :)

#other #shadowlockmalec #answers

Lesson 9 ~ Styling links

Hello there! I got another request last week (sorry this took long!)

So, I'm doing a thing on links.

I'll start by making a little sidebar, which right now just consists of an image. The image is 120px wide and has a border. I'll add links in three different ways.

1. Underneath the image, all next to each other.

2. On the image on hover, with one background.

3. Next to the image, all links in a separate block.

It's fairly simple to make variations with links once you get the basic principle. We use the same sort of protocol for all three of the examples in the HTML. We have a div for all the links together, and a div for every link apart, so we can give them spacing and whatnot. Of course we're not gonna write 5 different divs for 5 different links if we want them to be uniform, we just use one and put it on the five different links.

Remember that if we use a div for multiple elements, we use a class instead of an id. I'm using meta's called linkX and urlX for resp. text and url of the links.

The HTML looks like this, and will look like this for every example:

Example 1: Links underneath the sidebar.

(For this example I'm gonna use four links, since the width of the image is limited.)

We want the links to be under the sidebar and next to each other. Under the sidebar is no problem, since that's where we put them in the html, that's where they will logically be.

Next to each other might be a problem, see, because every link is in a different div, they will appear underneath each other. And indeed, with only some style on the font, the theme looks like this:

Fortunately, there's a simple solution for this: the CSS element display. More specifically, display: inline; will make a div go next to another one. We add this to the link class.

Which gives us the effect we expected:

Now I'd just add a bit more styling to make them look a bit prettier. A bit of margin on the top to start with. I also want them to be centered, and a bit further apart. For the 'apart' part, what we're gonna do is add a bit of padding left and right.

Doing all that, our CSS will look like this:

Now what we get on our theme isn't what we want. We centered the text, and yet it's far off the center.

Why is this happening?

Well, our CSS is trying to put our text in the center of a div. But the div has no fixed size, so it takes the size of what's inside it. This shows easily when you put a bit of color on the div:

What we want is that the links are centered in the width of the sidebar, so we need to give our links div the same width of the image plus its padding and its border (don't forget this!). The padding is 6px on each side, the border is 1px, so I'll make my div 120+14 = 134px wide.

And we get the result:

Example two: on hover

(the tutorial on how to do animations is here, go read it if you haven't)

I'll go over this a bit quicker now that you have a general idea of how to do links. For the CSS, I need the links to be centered, the div to be just as big as the sidebar image (120x140) and to have a background, but give it a bit of opacity for a nicer effect. The big links div has to get margins as well since it needs to be over the image. I'm also already adding the animation style.

The CSS now looks like this,

Which gives us

So, the padding needs to change. Let's see; we want some padding on the big div, say about 5px, so the links don't stick to the top of the div. Then we need some padding in the link class, so that they aren't so close to each other.

A note here: if you change the padding on a div with a fixed width, you need to change the width as well. Padding adds to the size of your div!

Our CSS is now

Which makes our result

All we need to do now is fix the hover animation (see lesson 7), and we're done!

Example three: next to the image, each in a different block

For this one we need the links div to move to the left and to the top. We'll do that first.

The next thing we need is the separate links to have a background and a fixed width, and a bit of padding. So we add:

Which gives us:

Now all we need is for them to not stick to each other. We need them to have a margin. However, we don't want the first link to go down. We can fix this with a margin-bottom on the link class:

So we see we get exactly what we wanted!

(I realise this isn't the prettiest thing but well, I'm just here to show you the possibilities ;D)

Well, I think that's all I can teach you about links. Feel free to send in more requests, I love doing these :) As usual give me a like if you found this useful, and you're always welcome to ask me for help if anything isn't working!

← previous lesson

#shadowlockmalec #html #css #theme tutorial #theme #html tutorial #html help #code help #styling links

These tutorials are so incredibly helpful and easier to follow than all others I've tried to read. Thank you!!!

Thank you for using them! I’m always happy when I get these sort of messages ^^ <3

#mrlyonheart #answers #other

omg im so confused i wanna make themes but do i use a base code first? where do i get one??

A base code is a great way to learn how to make themes, cause you already have a bit of the code there and you don’t have to start from scratch :) But you don’t have to use one, if you don’t want to :)

here’s a great base code by a friend of mine and here’s another one I use sometimes

#yummarcel #answers #other

Lesson 8 ~ Styling asks

What? I'm still alive?

Yeah, yeah. I've just been quite busy with other stuff. Plus I've already covered most things so I didn't really know what to talk about anymore.

Either way, I got this request:

So I figured, I'll do a tutorial on how to style answer posts!

First things first: you'll need a general idea of what you want them to look like.

You can't really start coding something without at least knowing a little bit what you want them to look like. I'll go over two examples with you that will end up looking like these:

Number one:

Number two:

We'll first have a look at what variables we can use. I refer again to this page.

So we have pretty basic: the question, the answer, the asker, and a few different sizes of asker icons.

Example one

We'll first lay out the basic html, very simple, like this:

Which looks like

Secondly we'll take a look at what divs we'll need. The asker is different from the question, and we'll need a wrapper for asker and question. Then we'll need one for the whole post. So to start, we'll make three divs.

I want everything to be centered, the asker to be uppercase and have some letter spacing, and the wrapper to have a double border.

With this fairly simple code, it already looks very similar to what we wanted to achieve:

All we need is a little padding to the wrapper and the asker:

And we're done! The resulting post looks like

Which is exactly what we wanted. So far so good!

The second example

The second one is a bit more complicated than the first. We'll now need separate divs for asker, image and question.

Without any styling done, it looks like

Which is frankly not really close to what we want. A bunch of stuff needs to happen, first of all, I want the asker to be uppercase and the question to have a background color. We'll give it some padding as well, to make it look somewhat nicer.

Which gives us

Which is already somewhat closer. Now we need to mess around with margins a bit to get what we want. The image needs to move to the right, and so does the asker. The question itself needs to move too, but the background doesn't, so there we don't use a margin, but a left padding. Since the image is 48 px wide, and we're gonna move it 15px to the right, we'll move the rest about 70 px.

(I also made the padding on the question a bit larger because it looks nicer. Sometimes you just have to guess a bit and see what looks better)

Which now gives us

So now all we need to do is move the asker up. Because all the divs are positioned relative, all the rest will move up too. To do that, we need a negative top margin of around 35px.

So, our final code is this:

Which makes the ask as we wanted,

There you go! As usual, feel free to send me questions, suggestions for tutorials, and don't forget to give me some attention by liking this post if it was helpful :)

Happy html'ing!

← previous lesson | next lesson →

#rosestylah #html help #html tutorial #theme tuorial

Lesson #7: Animations!

Time for another tutorial!

This time I will go over some fancy hover animation stuff you see so much on themes nowadays.

As an example I will use the links on my first theme (since that's the only one that really has animation). If you hover over the sidebar (which is the parent div for everything in it), the links show up.

It's actually a lot simpler than you would think. Let's start from the beginning: at first, I would always make the theme without animation. You need to see how the div positions itself and such - put all your positions, fonts, margins and stuff in there. For the html there's nothing you need to change - just regularly make your divs.

So I start out with this:

which just looks like

Now what I want is the links div to be invisible at first. We use the CSS attribute opacity for this. Opacity can take any value from 0 to 1 - 0 being completely invisible and 1 being fully visible (which is standard). So we add:

Now the div is still there, but we just can't see it. The next thing we want to do is make it appear when we hover over the sidebar.

To make the hover thing happen, we need to make a new CSS block. We take the name of the div we want to hover over, in this case sidebar, and add :hover. You might have already seen this for links (in that case it's a:hover). When we hover though, we don't want something to happen to the sidebar div, we want it to happen to the links div. We do that by adding #links to the name, like this:

What we really say here is: if sidebar:hover happens, make #links do what's in the block.

And what we want it to do is appear, so we put the opacity back at 1.

That's step one.

But what we see now is that the div just jumps on when we hover: it doesn't have a smooth transition like it should. For that, we need to use web transitions. They're different for all browsers, so we actually need to add three lines: one that starts with -webkit- (chrome and safari) one with -moz- (firefox) and one with -o- (Opera). The syntax is

-...-transition: property duration timing-function (delay);

'Property' is which property of the div should change, for example the width. In the example the whole div has to move, so we use all.

The duration speaks for itself (how long the transition takes, in my case 0.7s).

Timing-function defines the speed curve and it has a few different values:

I usually go with ease because I think it's the nicest, but then again it's all up to you.

At last, you can optionally set a delay time for the hover animation.

We add our transitions to the sidebar:hover div:

If we apply this, we notice the div nicely fades in, but it doesn't fade back out. The exit is still very sudden. That's because we want it to go away when we're not hovering the sidebar, so we're not in the sidebar:hover block anymore. So we also need to add the transitions to the links div.

(nevermind it going red here: the tumblr customizer does this with everything after you use a variable in CSS. I don't know why either. It still works.)

So now we have a nice fade in and out. The only thing left to do is the positioning: I want it to start a bit lower, and then come to the right position. So instead of putting the initial div on a top margin of -30px, I give it -10px and go to -30px in the hover div.

You can of course do this with anything! You can make it slide from the left or the right, make the font go bigger, the width smaller, basically every attribute of a div can change on hover.

You can also use transforms to rotate, translate, scale, and other things!

Well, we've just finished another tutorial on something that seemed hard but is actually rather easy, don't you think?

Okay now I'm actually REALLY gonna need you guys to send me things to do tutorials on, because I'm out of basic things to teach you. You basically already know everything you need to know to make a theme!

(oh by the way if you do make one please send me a message because i would love to see how you guys are doing.)

← previous lesson | next lesson →

#html tutorial #how to make themes #theme animations #tutorial #theme tutorial

Lesson #6: Tumblr things ~ posts

Okay, so last time we got to know a thing or two about blocks. This also happens to be how posts work! Again, we need the custom theme page close to us, cause it holds all the information we need.

Remember that I told you blocks are only rendered when it's necessary? Like if there is a pagination, then show it (and show it in this way). With posts, it's similar. For example if this post is a text post, then do this. There's three big sections to styling posts. So let's begin!

One, the post itself.

There's a few different types of posts, and we have a block for each of them. We also have one block, posts, which is rendered on every post. This is useful to add post info on every post.

So, what we need is a block:Posts with in it, all types of posts to render differently.

As you can see, I added a div around the whole thing, for style and positioning. You know how to do that already.

Inside these blocks, we can style everything with the variables we get from Tumblr (again, see custom theme page) and divs we make ourselves. For example, for a text post, Tumblr gives us the following variables:

knowing all about variables and blocks, we can all see a very basic text post would become

Of course, it's all plain text now, so it just looks like

So what we could do is put <h1> tags around the title, to make it look a bit better, and give some style to h1 in the CSS. That way you could also use <h1> around titles of other kinds of posts, to make them look a bit uniform.

( Naturally, you don't have to make them all uniform, it's your theme and you can do whatever you like with it. )

You can do this kind of thing for every type of post. Just look at what variables Tumblr gives you, and use them to shape your posts. You can add any kind of style to any element, just put them in a div and give them some CSS!

Two, the date.

Another thing I would want on posts is post info - the notes, the source, stuff like that. We wrap them in a block Date - that way they won't show up on non-post pages, like your ask page. I've seen a lot of theme makers forget about this, so try to remember it. It looks sloppy if there's notes on something that is not even a post.

There's a lot of things we can put in here - via, source, date, notes, and tags. I'd suggest you look at the custom theme page again for all the variables. Okay, so let's say I wanted every post to end with a greyish block, with the post info as follows:

Posted on (date) with (number of) notes - reblogged from (x) - source: (y)

Tags: #tag, #tag, #tag.

I'll need a wrapper div, a div for the info and a div for the tags. Also, there's blocks for everything: if it has tags (HasTags), if there's notes (NoteCount), if there's a reblog source (RebloggedFrom). Now it looks like

Now we need to replace the dots with variables. We have a few options for this, just choose what you want from the reference page. My html now looks like

My post info looks okay now, but there's just one thing I've forgotten: links! I want to add a permalink for the post when you click the date, and when you click a name go to that page, and when you click a tag go to the tag. Fortunately Tumblr also has variables for all of this. And you all know how to do links, so we edit the html a bit, and voila:

So with a little style added to my own divs, what I get on the posts looks like what I wanted!

Three, the postnotes.

Postnotes are the notes that appear on the permalink page of the post. (user1 liked this, user 2 reblogged this from you,etc etc.) They're not a part of the actual post though, so put them outside the block:Posts. Other than that, they're really simple to add:

You can always add a div inside to style them, of course, but the standard output looks okay in my opinion. It's your choice :)

That concludes my tutorial on posts - unless any of you want me to make something on every type of post, like more detailed? You can always send me a message if you do, or if you want me to explain something else, requests for tutorials, or if something in my tutorial is unclear - please do give me feedback! (also knowing you guys still read these even just by liking the post makes me super happeh so just give me attention ok)

I'm gonna conclude this fairly long post with something cool: we did six tutorials and you already know the basics to theme making. Maybe you can even already try to make a simple one! And if you do, I'd really love to see it, so please send me links :D

See you next time!

← previous lesson | next lesson →

#how to make themes #theme tutorial #HTML Tutorial #html help

Lesson #5: Tumblr things ~ blocks

Welcome back to Caroline's Totally Tremendous Tumblr Tutorials!

(ahem)

Let's continue where we left off. You know all about how to use variables now. There's another thing specific to Tumblr, which is blocks. A block is a bit like a variable and a bit like a div. Let me explain.

A block is only rendered when it's necessary. This means: IF there is a thing, we show that thing. For example, pagination: on the first page of your blog, there is no "previous page". Or if your blog has only one page, the pagination won't show. We do this by using blocks.

The trick is to put the html you want for your "optional" div in between {block:Name} and {/block:Name}. (the name is predefined by Tumblr: check the custom theme page I linked in the previous tutorial)

If we take the example of pagination, and we check what the page says, we find the following:

So, there's a lot to choose from! You can either just use a prev and next link, or a jump pagination, or you can combine the two! Let's say I wanted a pagination that looked like

« 1 2 3 4 5 »

With the current page bolded. Well, I'd start off by putting a pagination block, because well, that's the first thing we need. Inside it, I want a previous page link, then a jump pagination with a length of 5, and then a next page link.

There's nothing in these blocks yet, so nothing will be rendered yet. I add a div to the whole pagination block, so I can style it with CSS. Note that I put it inside the block, because it needs to only be rendered if there is a pagaination. For previous and next page, there needs to be a link to the previous or next page, in the form of little arrows. The html now looks like:

Now there's only the jump pagination that needs to be fixed: if there's a jump page, it needs to link to that page number. If it's the current page, it needs to be bolded. Ergo:

That's all! If I now add this to the html we did last time, with a little styling to the pagination div, it shows up like this:

And voila, pagination!

The good thing about what I just learned you is that you now know everything you need to know about how to style posts. But that's for next time!

← previous lesson | next lesson →

#html #html tutorial #theme tutorial #how to make themes

Lesson #4: Tumblr things ~ variables and metas

Guess who's back! Miss me?

I hope you all tried out some stuff while I was gone. Feel free to send me stuff you made by using my tutorials by the way, I'd love to see how all of you are doing ^-^

During this day, I'll publish some lessons about things specific to Tumblr. For these lessons, I'll be larfgely referring to this page, which you should now bookmark because it has a lot of important information.

So, last time I showed you how to make a sidebar. Let's recapulate how our html looked:

Of course, on Tumblr, we don't hardcode the description and the title and the image link in the html. We put them in pretty white boxes on the Customize page and they appear. How do we do that? Well, we use Tumblr variables.

Basic variables

Basically, variables are used between braces { }. A title and a description are basic variables, and they're standard; we don't have to make the boxes ourselves. So we use {Title} and {Description} instead of the hardcoded text.

This will make the title and description that users fill in in the boxes appear on the page, like we're all used to. There's a few other basic variables, they can be found on the page I linked above; however, these two are the most important ones.

Other variables or meta's

Now, there's another thing we need to replace by a variable, which is the sidebar. A sidebar picture is not a basic variable from Tumblr, so we need to put it in ourselves. That's where meta's come in: a meta is a way to make a variable ourselves. It's placed in the head, usually above the CSS, and it works like this:

It's very important here to not forget the "/" at the end, to close the tag.

The type lets tumblr know what kind of variable you want. The options here are color, font, if (an option box you can check on or off), select (a dropdown box), text or image. The name you can pick yourself, just like the standard content. In this case we will need an image, with no standard content, so it will look like this:

Now we can use the variable like we used the standard one, as type:name and in between braces. We replace the image link by the variable (note that the img tag is still there!)

This also works in CSS: for example if you want the user to pick a color for the title, you add a meta:

and you put the variable in the CSS of the title div:

And you're done! See how easy it actually is?

I suggest you try this out and I'll be back in a few hours with more on Tumblr specific things ;)

← previous lesson | next lesson →

#HTML #HTML Tutorial #theme making #theme tutorial #how to make themes

Your tutorials are great, They explain things and make theme making very easy. I've always thought theme making was very difficult. Thank you for making this blog! It is very helpful. :D

Awe, thanks, I’m really glad to hear that, cause I’m never sure how detailed I should explain things for ‘beginners’ to understand :)

#colinmorgan-james #answered #other

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.

A sidebar image

A title

A description.

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.

Method one: Margins

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:

And there's our result:

Looks about right, and it wasn't even that complicated!

Method 2: Float

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

Google is your friend

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 →

#theme tutorial #html tutorial #html

Trending Blogs

Recently Viewed Blogs

Caroline's Theme Tutorials