elspeth's ephemeral musings

*Depending on what theme you have, this can turn out pretty useless (generate problems that in this case don’t exist, I know, I've tried, but that may be a story for another post).

If you have chosen the first theme, but decided to change your banner picture, you probably ended up with this:

And that’s just sad :C In this tutorial I’ll give you a few tips, so you can end up with something more like this:

SIDENOTE: By the way, html code doesn't really care about getting separated into different lines. That's what we, people care about. Some of my pictures have all commands in one, continuous line. I like it, but usually people say it makes it more difficult to understand. Semicolons are important. Quotation marks are important. How they're arranged on a page? Not so much. So if adding more empty lines in between makes it easier for you - go for it. 

So let’s start with moving those pesky counters somewhere else.  I choose to put them under my avatar.

First go to -> settings -> blog -> customize -> edit HTML

Find code referring to followers/followings

Cut  this code out and paste it below your avatar’s code (in the red area):

But this won’t be work because of this piece of code:

Now, if you simply erase it, you get this:

That’s nowhere near good enough for me.

Let’s say I want them next to each other:

That is much better. But that white font looks terrible on this background. Let’s make it some other colour. Like black.

I’ve changed only one, so this is how it looks:

*You can type in any colour you like. Google “html colors” and you’ll get codes to many more (with codes there’s no need for quotation marks, just for example: font color=#04B404) I'll use a code for a shade of green.

I could also make the font bold to make it more readable.

If you're scared of HTML you can stop there. (but I promise it's not as bad as it looks in the beginning)

That was simple, but I’m absolutely not happy with it. I want to design my own! Damn it!

I’ll focus on one of them for now, because the second one will be almost the same. 

Forget the previously added code, erase it (we’re still working at the same spot, just without 'font' and 'b' markers)

In the end you want something like this (I'm telling you now, so you don't run):

Let's proceed:

Delete the underlined part

In its stead post (yes, the whole thing):

style="

font-weight:bold;

letter-spacing: 2px;

width:220px;

height:72px;

text-align:center;

font-size: 20pt;

color:white;

background-image: url(http://25.media.tumblr.com/5c38d99956701b3cb7bf407378cbe217/tumblr_mtn040bENl1sakj51o1_250.jpg); border: 1px solid black"

That will give you exactly mine design, but I’ll explain the code so you can change it :P

Oh, and I want counters under each other so…  add “br” markers (it's telling the design 'that's the end of the line' or 'add an empty line' or 'move to the other line' or something like that. Quite useful. And the number of them you post, matters. The more  the bigger of an empty gap you get on your actual page.)

Explanation: the link is black (the link in a form of a number signifying followers), so it’s not very visible, we’ll fix that now.  And I want a number and the word ‘followers’ in separate lines.

Now, explenations of html code (once you see it separatly it makes much more sense):

div style=" font-weight:bold; letter-spacing: 2px; width:220px; height:72px; text-align:center; font-size: 20pt; color:white;

font-weight:bold (bold font, duh) (you can skip that part of the code if you don't want bold letters. You'll get a normal font)

letter-spacing:2px (you can give up entirely on that part of a code. Letters will be 'naturally' spaced)

Then we have the size of our little division of a page  (also of our background!!!) width:220px; height:72px; I guess this is something many people would like to mess with, but  if you intend to live it more or less where it is, play around with height - better chance of not messing things up. It's safer.

text align:cener (again, do I need to say anything?) (other options include left and right)

font-size:20pt

color:white

Pretty self explanatory. There are other commands you could find if you wanted to. You can even make the words sparkle! (please, don’t, for my sake at least).

Then there’s code for background image:

background-image:url(http://25.media.tumblr.com/5c38d99956701b3cb7bf407378cbe217/tumblr_mtn040bENl1sakj51o1_250.jpg);

border: 1px solid black (again, that command isn't necessary. If you don't want any borders just remove that part of a code)

Easy. It all just needs to come together. You can create your own background (make sure it’s the right size), post it on the internet and replace my url with your own.

Now I’ll post a full code (close-up is lower down the page):

 Also, for example, you can give up on a background picture altogether (and change the font colour and erase modification of link colour (it came after 'href')):

In other words customize away! (btw, if you don't change colour of the link and live it undefined, it's black, but once you hover cursor over it, it turns green ) You can change the size of the whole section, or font... You have a ton of possibilities! Play with it.

It’s really a very simple code, there are just many commands in it. ^^ I hoped it helped someone