Murder by Death

Some of the blog templates here on BookLikes have a Followers / Following count at the top of the personal blog page; these use images that give them a button-like look and when you customise your header, it's obvious because it goes from looking like this:

 

to this:

 

Up until recently, I'd thought there wasn't really a good way of changing this, and I've been lazy; it was just my own blog and as the Aussies say I couldn't be stuffed.

 

Then someone else asked if it could be done, giving me the motivation I needed to sort it out.  So, here are the instructions for changing those images so they blend in with your custom header.

 

Note: This only applies to those templates that use images - specifically and certainly the "Smart Casual" theme (that's the one I used as the basis for my personal blog, so that's the one I know it works with).  You may or may not succeed with these instructions if you use a different template.

 

There are a lot of steps to this, but they're easy.  Here we go:

 

Step-by-step:

1.  Visit your own blog and if you have the F/F numbers at the top, in your header, try to click and drag them.  Don't double click; click/hold and drag: if an image or file icon starts following your mouse around, you have an image behind your F/F numbers.  Drag that to your desktop - you can use it to copy the dimensions of the file (mine were ~60x61 pixels).

 

2.  Create the new image (using the old images pixel dimensions) that you want to use in whatever image editor you're comfortable with.  Save it as a .jpg, .gif, or I'm pretty sure you can use .png if you want.  If you don't know the difference between these, just save it as a .jpg.

 

3.  Once you're finished, create a new post in BookLikes - trust me on this.  Make it a text post; call it whatever you want, doesn't matter.  (I titled mine "Blog image stuff" so I could find it.)  In the body of the post, upload your new image.

 

4. Tick the back to edit after saving changes box, then click "Save as Draft" (alternatively, you can save it with a really old post date so people don't see random weird posts from you in their newsfeed).  

 

5.  After the post saves and reloads the edit post page, click "Preview".  This will show you the post in a new tab.  

 

6.  You have two ways of doing this step:  A. You can right click on the image and choose "Copy Image Address", or if you don't see anything that looks like that in your contextual menu, you can B. right click on the image, choose "Load image in a new tab" and then go to that tab and copy the URL address that is in that tab's menu bar.

 

7.  Once you've done that you need to paste that address somewhere: I used my TextEdit program, but whatever notes or wp you have is fine; you just need to keep it handy somewhere, because you're going to have to do another copy/paste before you're ready to use that URL.  The other option is to go back and repeat step 6 when you're ready for it, which also works too.

 

8.  Now you're actually ready to change your template.  Go to the Dashboard menu and go to Settings.  Click on the Blog tab and then scroll down to Theme: customise and click customise.  Now you're in that split page with a preview of your page on the right and a black bar of settings down the left.

 

9.  Scroll down to the Custom CSS input box all the way at the bottom.  If you have text in this box already, make sure you get your cursor placed at the end of it and add a line or two of spacing to be safe; this box can be hard to work with because it's so small.

 

10.  Copy the following and the paste it exactly into your Custom CSS box:

 

div.header-followers a,
div.header-followings a {
  padding: 11px 0px 27px;

  display: block;
  background: url("img/follow.jpg") top center no-repeat;
  font-size: 26px;

  color: #FFFFFF;

  text-align: center;
}

 

Make sure you get it all - including that last } bracket or else it won't work.

 

11.  Once you've got that pasted in (and made sure you haven't accidentally pasted it into the middle of something else), you need to make at least one change to it.  This is where you'll have to either go to the URL you saved in your notepad/wp and re-copy it, or repeat step 6 above.  You need the whole URL, http:// and all.  Once you've re-copied, it you need to replace "img/follow.jpg" with it.  So this line:

 

background: url("img/follow.jpg") top center no-repeat;

 

is going to look something like:

 

background: url("http://booklikes.com/upload/post/b/f/bf4e1ea963200d00c31ff039b30a7bcc.jpg") top center no-repeat;

 

Yes, that's much uglier, and no, yours won't look exactly like that - if you use that link above you're going to be stuck with my bright red and white buttons.  You're welcome to use them, but they'll probably clash.

 

If that's all you want to do, scroll back up and click the Save button, load your blog page and ooh and ahh over your new F/F buttons.

 

If you want to do a couple more tweaks, read on:

 

 

If you want to change the colour of the Follower/Following numbers:

 

Go back to customise theme and scroll back down to the Custom CSS input box and find that block of text we pasted in there (repeated here):

 

div.header-followers a,
div.header-followings a {
  padding: 11px 0px 27px; 

  display: block;
  background: url("img/follow.jpg") top center no-repeat;
  font-size: 26px; 

  color: #FFFFFF; 

  text-align: center;
}

 

Changing the color is as easy as changing the hexadecimal code in this line:

 

color: #FFFFFF;

 

to the color code of your choice, taking care to keep the # and the ; in place.  If either of those are missing it won't work.  A handy hex code color chart can be found here: HTML Color Picker - W3Schools.

 

You can take this further and change the font-size:

font-size: 26px;

 

smaller or larger.

 

You could change the font face by adding:

font-family: add your fonts here, each one separated by a comma ;

 

but these might give you some funky results and unless your confident or daring, I'd leave these alone.  Especially the font-family:  fonts only work on other people's computers if those fonts are installed and each font displays differently, so font A might display larger and take up more room than font B at the same size.

 

 

The last thing I'll include here is how to change the size and color of the text under the buttons that actually says "Followers" and "Following" (or whatever you might have changed those to say previously).

 

This also is done in the customise theme section, in the Custom CSS input box.  Go back to the box, scroll to the bottom of the text that's already there, put a safety space or two at the bottom and paste the following in (yep, it looks very similar, but it's not the same at all):

 

div.header-followers,
div.header-followings {
  top: 55px;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  }

 

Again, paste it exactly and don't leave off that trailing }.

 

The only bits here that are safe to change unless you're well-versed in CSS are the font-size and color.  These work the same way as the ones we've just talked about: change the "16" in

font-size: 16px;

to a larger or smaller number, and change the hex code in

color: #FFFFFF;

to a different hex code to change the color. 

 

Please make sure that stupid semi-colon remains at the end of those lines.  Without that ; you don't exist to the stylesheet gods.

 

Once you think you have it the way you like it, click Save and go check it out.  Wash, rinse and repeat until you're pleased with the results.

 

Happy days!