jj's books

Many - myself included - either have only rudimentary knowledge of Custom Style Sheets (CSS) or none whatsoever. Whichever category you fall in, there is a way to easily edit your CSS to customize the layout of your blog. Many browsers have addons to live edit your CSS and preview it at the same time. For Google Chrome I use Stylebot. 

I have used the first theme for my blog so please be aware that some edits shown here may not work with the other themes but if you get the basic idea behind my post I am sure you can apply a lot of it for the other two themes. :) 

Once Stylebot is added to my browser I have a new CSS icon in the top right corner of my Google Chrome. 

So basically I got to my BookLikes page that I would like to change, click on my new CSS icon and then click on Open Stylebot. 

It should look something like this. If you click on the Select an element icon on the left side of the Stylebot you can then select any element in your blog. A green frame is showing you which part you are about to select. If you click it to select it, it will appear in your Stylebot showing you the name of the selected item (div.side-left.set-left in my example) so basically the left sidebar of my blog. 

Of course you can select single items within it, select your header, your footer, your blog post area, the title, etc. The moment it is selected and appears in Stylebot you can edit its various settings if they do apply. Sometimes things aren't visible so changing its values won't show on the screen but in my case I chose a brown background for my left sidebar. You can edit the colour by simply clicking on the colour picker thing next to "Background color" or you can enter manually the hex-code (#42342e in my example) that you have chosen in a picture editing program like Gimp, MS Paint or Photoshop. 

I think most of the things are self-explanatory so just try it out, play around and change the layout of your blog until you are happy with it. 

Now, the changes you have made here are only visible to yourself which means you have to get those changes to apply to your blog for everyone who sees it. 

On the bottom of your Stylebot window you have those buttons. Here you can reset recent changes you have made or the changes for your entire page. Edit CSS is the button you want to click on to get to your CSS code that will apply your changes to your blog. 

Click on Edit CSS and Stylebot should change to something like this. Click on Copy (or select all CTRL+A and then CTRL+C) and this code will be copied to your clipboard. 

Now go to your BookLikes Dashboard and click on the settings icon. 

In your Settings page click on Blog

Then scroll down until you can click on Customize: 

At the bottom of your Customize Theme window you have a field that says Custom CSS. Just paste your copied code in here (rightclick - paste or CTRL+V)

Then safe your changes by clicking on Save and go back to your BookLikes page. The changes should now show up (in every browser and on every computer from which you view your blog). 

I hope this helps you to get started.