New Website Design: BlogoLife Bright and Clean WordPress Upgrade

Well, if you are a returning visitor to my website, you probably have noticed a different template design. I was looking to brighten things up a bit, by bringing a clean new style to the website, and found this WordPress template that seemed to be quite versatile in what could be done with it.

BlogolifeBlogoLife 1.8 by wplook

BlogoLife is a simple and perfect HTML5 & CSS3 theme for personal blogging that supports post formats, and several customization options. The custom background, custom header, and multiple color schemes gives you the possibility to adapt your blog as you wish.
Options: Widgets | Menus | Wplook Panel | Background | Header

With the BlogoLife template, I customized it to the size width that I wanted. Though, I had to do some figuring out the widths in order to create some new graphics for the wider width that I was changing it to. I ended up increasing both the left column (main text area) slightly, and increased the width of the right column significantly to allow for the usage of wider graphics.

Prior to using the new template, I decided to upgrade WordPress to the latest and greatest. That was quite a story in itself and required troubleshooting an upgrade that went awry. If using WordPress for your website, I suggest reading about how to recover from a failed WordPress update here.

Once I was upgraded with WP and all the Plugins, I tackled the template area. As with any website, there are tons of things behind the scenes, which are not seen by most folks visiting a website. However, if you are a website developer, you know what I am talking about. Spacing, alignment, color, graphics, text size, and even the header and footer spacing is a puzzle with having to make sure all the pieces fit together properly. Everything is looked at with a critical eye (mine), and still there are always things that you want to improve. Then on top of all of that, making sure that Web functionality is still intact, navigation, analytics, and other smaller items of importance such as how the admin area for comments, access, and page and post edits work in conjunction with the template are all inner-linked and functioning well together.

So, I hope you like the new design to the website. In this template, you might see some different colors every once in awhile, along with different header images too. Let me know what you think.



Jim Warholic

There are a number of ways of changing the font size, depending on which blogging platform you are running on.

With Blogger, and the new templates, you can either adjust the font sizes from the template customize control panel area or you can edit the CSS using edit HTML from the template control panel also.

In WordPress files localized on your own hosted server, you would need to edit CHMOD Permissions (making the CSS file writable). This will allow you to edit the CSS file to the font sizes you wish.

Sometimes, you can also add auxiliary CSS files, or enter separate styles through the template areas.



Could you please help me?

How can I move the “leave a comment” box right under the article posting, instead of under the comments that have already been submitted?

Jim Warholic

Interesting idea. Keep in mind, the normal comment form box would typically (logically) be located after the comments that have already been submitted. However, if you wanted to play with where the “leave a comment” form is shown, you can take a look at the comment function command in WordPress. Copy and paste the form code where you want the form to show up. As always, it is a good idea to do a backup of the files in WordPress before you start editing them.




How did you add content to the according to jim white space above your menu? It only lets me use the default font and write on the left side.

Jim Warholic

First off, I found out where the social-icons code was located at in the header file. I then added the lines of code below, and customized the CSS styles to place it where I wanted it to be using p code within the div code of the far right side – fright class. Take a look at that actual section of code below:

<header id="branding">
<hgroup class="fleft">
<h1 id="site-title"><a href="; title="According to Jim – The Internet Place for a Wide Variety of Topics" rel="home">According to Jim</a></h1>
<h2 id="site-description">The Internet Place for a Wide Variety of Topics</h2>
<div class="header-desc fright"><p>Welcome to the online information zone. Topics of Marketing, Internet, Google, Apple, Advertising, Blogging, Computers, Hardware, Software, Hard Drives, Routers, and Networking to name a few. </p></div>
<div class="clear"></div>
<div class="social-icons fright">

<a href="; target="_blank"><img src="; alt="!/jimwest&quot; height="22" width="22"></a>

<a href="; target="_blank"><img src="; alt="; height="22" width="22"></a></div></header>

Hope that helps you to understand a bit more about the customization of the template. It’s pretty cool what you can do with just about all the templates today. Simply follow some basic HTML programming, and then implement some basic CSS styling, then you can have something that matches up across the whole website.


Hi, I ran into your site which I have for our business and am struggling to work out how to decrease the header space above our logo. It is taking too much space. What is the way to decrease this size ? I went into “editor” in wordpress and went to stylesheet style.css however there is nothing in there that may indicate any sizes to decrease. Thanks in advance

Jim Warholic

To adjust the height of the header area, you will see something like the following in the CSS code:

#header-image a img {margin:0px; padding:0px;}

Add to that ID area the following:

#header-image a img {margin:0px; padding:0px; height:75px;}

Whereby the height:()px represents the height of the header area.

Then you will have to make sure your images are that height (instead of the 200px height) when you upload them to the header section. Note that the code shown is for an image with a hyper link. If you do not link the image with a url, then you might have to also add the following line for a non-linked image:

#header-image {margin:0px; padding:0px; height:75px;}


Jim, I like this theme but I would like to move the header image to the top of the page above the page title and tag line or in place of the page title and tag line. I can see the code that needs to be moved by using inspect elements from Chrome, but I can’t find that code in stylesheet.php or Header.php using the WordPress editor. Can you give me any guidance on where to find this information and how to make the change?

Jim Warholic

The location of those items are in the Header.php file. I suggest you make a backup of the file before doing any editing.

Look for the following:

<div id=”header-image”>

Then look for the first closing </div>

Cut out that entire section and paste it where you want it to be in the header.

Let’s say you want it before the menu, you can paste it before the <nav></nav> section.

Jim Warholic

I think it is:

.right-sidebar #secondary



You might have to adjust the size of the image border. I don’t recall for sure.


I have been using Blogolife for a while and I love it. But I do have two questions. Can you tell me what the value might be to upgrading to the Pro version? Also is there a way to add a second (top) navigation bar?

Jim Warholic

Hello Maria,

Have not looked at the Pro version, so I can not say.

As far as the top navigation bar, and adding a second, I would suspect that you could do it by adding another division area. Though, I think you are going to have to deal with the graphics too. If you can try to have all your main menu items smaller, then they will not take up so much space on the entire width of the menu area.

Also, you might consider having a subscribe and contact link at the very top instead of having it in the menu, and that way the menu area can be shortened somewhat.

Your email address will not be published. Required fields are marked *