Themis-Athena's Garden of Books

 

So, the blog looks all pretty so far with the new header and the matching background, but wait...those follower buttons really spoil the look now!  They should go.  But how?

 

This was the problem I struggled with as it was a bit beyond my limited skills so I went on a search and find mission and luckily found AnHeC's brilliant post about that very thing!  There are lots of visuals there and she knows her stuff so if you're looking for a tutorial from a pro, I'd head over there for the masterclass. 

 

However, since I'm trying to gather all I've learned into one place I'm doing my own version of it here too and hopefully I'll make as good a job of it as Anhec did with her one :)

 

So, those buttons...they're annoying stuck there in the header, and clashing with everything... Let's move them.

 

{{*snip*  continues under the cut}}

 

Up to this point everything that has been changed has been simple colour changes or image swap outs and it's all been achieved in the customize menu.  Nothing too taxing and mostly just clicking a few buttons.  This next part doesn't work that way (unfortunately).  For this part we need to get down and dirty and start messing with actual code.  Scary stuff, right?  Right.

 

I won't lie, I had the fear, but it's not too bad once you get in there.  Take it slow and easy and it's do-able.

 

First things first.  This was what I didn't want -

 

Now, it was around this time that I heard mention of Stylebot on the Booklikes grapevine and it was being touted as an answer to a CSS noob's prayers so obviously I ran like the wind to see what it was all about. 

 

Basically it's a download that is used with the Chrome browser.  Once it's downloaded you can go to any webpage online (using the Chrome browser) and stylebot will allow you to mess about with colours, visibility etc on that page and then give you the CSS code needed to make it happen.  Nothing is permanently changed while messing with it via stylebot though so it's a safe playground.  It does however have it's limitations and won't actually help you to move elements into different areas on a page, so it wasn't useful to help move my unwanted header buttons.  Back to square one then...

 

This is where AnHeC's walkthrough (linked above) was invaluable, without it I wouldn't have had a clue what code went where so massive thanks went out to her at this stage.

 

From this point on it may seem intense for the uninitiated but take it slow and all will be well :)

 

The starting point is back at the brown menu column from before, but this time we're heading into the HTML vault *Cue scary music* :P

 

 

 

 

The HTML page can be quite daunting if you're not sure what you're looking for.  It's split into two sections, top and bottom screen.  The top half is the coding and the bottom half is what your site will look like if you change the code. 

 

 

Now, the html has separate code for each of your pages and it's important to make sure you're working on the right page before you start.  Along the bottom edge of the html window (on the brown bar) is a dropdown menu which has 'Blog', 'Timeline', 'Shelf', 'Following/Followers' and 'Page'. 

 

 

Mostly the code is the same in all of these pages (before any changes are made) but if you make changes in one section it won't carry over to the others.  What this means is that If you move the followers buttons in your 'blog' section that is the only page that will have the buttons repositioned.  In order to get all your pages the same you need to make any changes on each section. 

 

I won't bore you with detailing the procedure for all of the pages as they're all the same method.  I'll be covering making the changes in 'blog', just remember to repeat everything for the other pages on the dropdown too, so that you get the same look across all of your site.

 

Before going any further I have a tip - If you find you've gotten lost along the way from here on, or think you may have messed up but are not sure where, just close the window that your working in and re-open the html panel in a new window without saving.  This will reset everything back to how it was and you're free to start again. 

 

So, the changes...

 

I found that the easiest way to find where I needed to be within the html section was to use the 'find' tool.  Use your mouse pointer to click somewhere in the window pane that shows the html (it doesn't matter where as long as your curser ends up in where the html code is) and click the 'Ctrl' and the 'F' keys on your keyboard at the same time.  This will bring up a little seach window in the top right hand of your screen.

 

 

Type the word 'followers' into that little search box and click the down symbol next to it until the following text is shown, around line 94

 

 

What that bit of code (highlighted in blue) tells your browser is where to place the buttons, what they should look like and how they should function. 

 

Before doing any code changes the code itself needs to be moved down the page slightly and I want mine below my avatar so highlight your code as mine shows above (the bit in blue) and right click on the highlighted code and choose 'cut' from the dropdown menu.  That copies the text to your clipboard and cuts it out of the document at the same time.

 

Now, scroll down slightly until you reach this place in the html, around line 109.

 

 

If you've made some other changes to your template your line count may be different and may look different but you're looking for the bit of code shown in the red box above.  Use the 'find' tool if you struggle to find it.

 

Wherever you find that exact bit of code, you're going to right click > 'paste' the bit of code you 'cut' from the text earlier into the empty line below it. (I've highlighted my empty line in blue in the pic above)

 

OK, so far, so good.  But we're not finished just yet.  There's still a bit of code juggling to be done.  Just a tiny little bit though.

 

Now that your cut out code has been pasted back in where it needs to be there are just  two sections of code (marked in red below) that are all that's standing between you and repositioned follower buttons. 

 

 

Almost there....so close...

 

All that needs to be done now is to tell the code that you want the buttons side by side below your avatar, one on the right and one on the left.  Easy.

 

Just change the bit of code to left and right (shown below) and we're done!! 

 

 

Before clicking the green 'save' button you might want to check the 'preview' button to make sure all has gone well but if it all looks good in the preview pane, just hit that save button and it's all over.  Seriously, done! 

 

Whoo hoo!! Buttons are moved! 

 

Granted, they still look like they always did...but at least they've moved off the header! :D

 

 

Just make sure you follow the above steps for each of your pages.  It's exactly the same procedure for each page but they do need to be done individually. You can get to each page's html from the drop down menu in the html section's brown bar, next to the 'preview' and 'save' buttons. 

 

If I've missed anything or it's not very clear (a distinct possibility as I'm a rank amateur at this) just let me know and I'll try harder.

 

Next time, in part 5 I'll be making them look a bit nicer and changing font colours and maybe changing the names from 'followers'  and 'following' to.....something else, but I don't know what yet.  I'm open to idea's if anyone has any?

 

Customizing BookLikes Tutorial - Part 1 - Back to basics. How to get started.

 

Customizing BookLikes Tutorial - Part 2 - Back to basics. Adding a new header

 

Customizing BookLikes Tutorial - Part 3 - Back to basics. Main background change