Customizing BookLikes Tutorial - Part 5 - Back to basics. Changing the look of your follower buttons.
In part 4 of my tutorials I moved the follower buttons below my avatar, but they still carried the graphic that belongs to template 1's leather look. So, now I get to change that graphic into something that matches my own colour scheme.
There are two ways to do this and I'm picking the easiest for 3 simple reasons.
- 1. It's easy.
- 2. It's easy.
- 3 It's easy.
I may write a part B of this tutorial to explain how to make the follower buttons more like I have mine now, if anyone would like that?
But for now...here we go...
The graphic used at the moment is this one and it's size is 61x60 pixels. 
I'll be replacing that with the new one I made a new which is the same size but in my colours.
If you are unable to or don't want to make a new one you could use any graphic or image that you have already, just make sure to crop it to the right size so that both buttons sit side by side in the space. (60x61)
(I've made a few buttons in different colours in case they're useful to anyone for this tutorial. Feel free to snag them. If you'd like one in specific colours, to match your background, just holler and I'll be happy to make one for you :) ) These one's here all have a white background.
Right, so now we need to sort out where our new image goes, so that we can replace what's already there.
Your new image needs to be already hosted somewhere on the web because the new code will need a link for it. If you have somewhere you use already to store your images online (ie tumblr, photobucket, flickr, etc) you can put it there, or on your blog - just upload it onto one of your old posts somewhere out of the way, (or it could even be my blog here if you're using one of those graphics above). The point is, we need the 'address' of where your chosen image is hosted.
I'll be using the one above that I made to go with my background colours so if I right click on that image and choose 'view', a new window will open with just that image in it. When the time comes it will be that address in the address bar that needs to be copied.
So where does the new image go? Well, it's back to the custom CSS box for this bit so no messy HTML juggling this time. Nice and easy does it. It's a one copy and paste dealy and you'll be home free.
Via the customize menu head down to the very bottom for your custom CSS box...
Now this is the little bit of code that you should copy and paste into the CSS box. All this does is tell browsers to ignore what is written in the html code and only see what you want them to see. What you want them to see is your nice new, matching buttons.
div.header-followers a, div.header-followings a {
background: url("http://YOUR-BUTTON-GRAPHIC-ADDRESS-GOES-HERE")
no-repeat scroll center top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
font-size: 26px;
padding: 11px 0 27px;
text-align: center;
}
Now's the time to get your image's address mentioned earlier, so that you can paste it into your override code shown above. Once your image address is in place and the code has been pasted into the CSS box every follower/following button with be replaced with your new one, on all your pages where you have those buttons. It won't change the position of any of them, just the look of them. As long as your image is a similar size to what's there already (61x60) it'll work out great.
The #FFFFFF in the code is the colour of your Followers/following text and the number count. If you have a light background in your sidebar and would like a dark font then black is #000000 or you can choose one of your own from a Hex colour picker like this pretty one.
So...
All that's left to do is copy the code into your CSS box, remembering to replace the YOUR-BUTTON-GRAPHIC-ADDRESS-GOES-HERE with the address of the image you picked and you're done. It's that easy.
Tip* Just make sure when you're copy/pasting you're image link into the code that you don't end up with double http:// as that bit is already in the code for you.
div.header-followers a, div.header-followings a {
background: url("http://YOUR-BUTTON-GRAPHIC-ADDRESS-GOES-HERE")
no-repeat scroll center top rgba(0, 0, 0, 0);
color: #FFFFFF;
display: block;
font-size: 26px;
padding: 11px 0 27px;
text-align: center;
}
All done.
Well, it's late and I'm starting to get fuzzy headed so I hope I remembered all the stages. If you think I've missed anything or want to get in touch, please do :)
Part 6 will be about....actually, I'm not sure yet. I'll sleep on it :P
Part Two - Adding a new header
Part Three - Changing your main page background colour
Part Four - Moving follower buttons
Part Six - Changing the colour of your sidebar background
Part Seven - Changing your comment section background colour
1
8
16