, pub-6750398400224078, DIRECT, f08c47fec0942fa0

If you thought my last blog post was a bit geeky (trying out new Windows 10 Preview on old laptops), well I’m about to tell you about how I’ve fine tuned this blog using CSS and widget plugins.  If you’ve got your own WordPress Blog, this might be interesting or even helpful with your own site.

My personal blog (that you’re reading now) uses the Smartline Theme from ThemeZee.  Even though I really like the Smartline Theme, there’s a couple of little things that have annoyed me for a while; the gap at the top and the sidebar that scrolls down to show blank space.

Smartline has a gap at the top, reserved for a menu I don’t use, plus a bit more.  The gap consists of the background grey and a thin blue strip.  To me, this is just wasted space.

Smartline WordPress theme by Themezee has a gap at the top of the screen

Sorry, I don’t code!

I understand the importance of code, the behind the scene language of websites and computer programing, but I don’t know how to write, or even edit, code properly.  Not to worry, there’s a Plugin for that!  I found the SiteOrigin CSS Plugin which makes it easy to select the element of the site you want to change, adjust the settings and add code in the back ground.

It turns out I only needed to get rid of 34px with a couple of lines of code, all done without actually touching any code myself, but the plugin does show you the code as you make changes.

CSS code added by the SiteOrigin plugin to remove the gap at the top of screen.

The process really was painless.  If you already understand code, or you’re a WordPress guru, then you’re probably thinking “woop-de-doo”, but to me this is a revelation in deep customisation of WordPress themes.  I’m wrapped that it was so easy to get rid of that annoying gap at the top of this site.

Gap removed from the top of my site which uses Smartline by Themezee.

Now, the sidebar

The other element of this site I wanted to fix up was the sidebar.  Even with multiple widgets, scrolling down a long page would go past all of the menus, adds and other widgets and just leave the sidebar blank.  I tried to use the CSS plugin again to adjust the properties of the sidebar, but wasn’t successful.  Next option was to find another plugin to fix the sidebar.  The most popular response to a Google search was the q2w3 Fixed Widget plugin.  It will make any widget(s) you choose “sticky” so that it doesn’t scroll.  In the setting you can adjust buffer pixels above and below to determine when they start scrolling again.

In my case for this site, I’ve made the last two AdSense widgets sticky, but added a considerable buffer to the bottom so they start scrolling again to avoid going over the footer content at the bottom of the page.  While scrolling down a long page however, those two widgets stick to the side of the screen until reaching the footer – no more blank sidebar!

Fixing the sidebar was a little bit more involved, just because of the trial and error required to get the settings right, but still pretty easy considering no coding was required for that either.

q2w3 fixed sticky widget screenshot

More full size screenshots from the work described above can be seen HERE.

UPDATE 10 Sept 2015;
I’ve changed my WordPress for this blog to “ColorMag” and given it some fine tuning, hopefully this will be a better format.
I’ve written a short blog post about the theme change HERE.

Everything above is irrelevant not because I’ve updated the WordPress theme for this site again to the highly customisable “Divi”.
See more in this post –