How to style AutoFocus by Allan Cole

- by

Styling the Home Tab

The Home Tab is styled in italic and has a slighlt different font than the rest of the layout. If you find this just plain ugly, there is an easy fix for this – and the solution lies in the style.css file. Under the menu heading the last line in the block styles the home tab:

.menu ul li a[title="Home"] {top:1px;font-family: "Hoefler Text", "Garamond", Times New Roman, Times, serif;font-style:italic;font-size:13.5px}

The easiest thing is to take that entire line out completely so that Home looks like all the other tabs. Alternatively style it anyway you like.

Page Titles

If you’ve changed the background colour, you’ll notice a white border around your Page Titles. To get rid of that, let’s have a closer look in the /* =page */ section in your style.css file:

.page h2.entry-title {-moz-opacity:0.95;filter:alpha(opacity=95);opacity:0.95;background:#FFF;font-size:3.6em;font-weight:100;letter-spacing:-0.05em;line-height:1.2em;margin:0.5em 0 0.25em;padding:0;width:800px;position:relative;z-index:12;}

I know this is a rather long line, but it’s all there to make this theme so funky. Change the background value to your site’s background value. This will get rid of the box around your page title.

To change the colour of your page title, change the color value in the following statement:

.page .post .entry-content {background:#FFF;color:#888;font-size:1.2em;float:left;padding:0 5px 5px 5px;margin:0;width:594px;position:relative;z-index:10;min-height:200px;}

Post Titles

We can apply the same principle to Post Titles too. The boxes around Post Titles are set to transparent though, so all we have to do is change the colour if we wish. Have a look in the /* =single */ section and find this very long line of code:

.single .post h2.entry-title, .single .attachment h2.entry-title{background:transparent;font-size:3.6em;font-weight:100;letter-spacing:-0.05em;line-height:1.2em;margin:0.5em 0 0.25em;padding:0;}

If you add color:#fff; right in front of the background property, you’ll change the Post Title to white.

Post Meta Description Extravaganza

If – like me – you think that HUGE amount of babble under the big post date is a tad verbose shall we say, there’s an easy way to trim it down to the essentials. Have a look in the single.php file and find a large bit of code staring with

<div class="entry-meta">

Feel free to cut, chop and dice to your heart’s content from here. Just remember to leave the closing </div> tag intact 😉

Single Posts

There is one annoying thing about this theme: when you’re looking at a single post, the first picture gets displayed above the post as well as in the post. That’s probably a good idea when you have several images in one post.

I’d rather remove the first picture while retaining the big headline. It’s tempting to remove this entire <div> section below in the single.php file – however that reduces the headlines to something very small:

<div id="post-<?php the_ID(); ?>">
<span>&copy; <?php the_time('Y'); ?> <?php the_author(); ?></span>
<?php the_post_image('large'); ?>

Instead, change this block into this – leaving only the image and copyright call out:

<div id="post-<?php the_ID(); ?>">

More Features

If you want a ton of other features, consider upgrading to Autofocus+ Pro, based on the free Thematic framework.

Until next time, have fun 😉

If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

257 thoughts on “How to style AutoFocus by Allan Cole”

  1. Hi Michael,

    that’s a tough one to answer. In short there’s no quick fix that does what you want. You need a bit of prior HTML/CSS knowledge for my advice to make sense, sadly I can’t give you that knowledge in a quick comment. But if you’re interested in delving deeper, have a look at some of the excellent courses at

    The editor function in WordPress allows you to make changes to your theme (and plugin) files which often suffices for a quick fix – IF you know what you’re doing. Technically they do what your external editors do, but without the need to save and upload a file.

    Here’s how you’d add a graphic to you header file:
    1.) upload the file using the WordPress media uploader
    2.) this will give you a direct URL to the image (like – copy this URL
    3.) find the file you want it to appear in (I guess in your case header.php)
    4.) find the right place where you want it to appear in the code (perhaps after the call to blog description)
    5.) enter this code: <img src=”your-image-link”> replacing your-image-link with the URL you’ve copied earlier

    That’s it in principle. Now the image may not appear where you want it, it may have a different size then you like, but those problems can be addressed with CSS.

  2. I’ve just received news from Allan Cole, the developer of AutoFocus. He has a new website and offers AutoFocus Pro over there. Existing customers from fthrwght will have to RE-PURCHASE AutoFocus Pro in order to get updates…

    As an existing customer and big supporter of AutoFocus this doesn’t feel right… but developers have to make money somehow. For all further AutoFocus Support please have a look at Allan’s new site THEME SUPPLY CO. There’s a support link at the top of the page:

    Even though this is a very popular topic on my site, I’m going to close comments on this thread now due to the age of the theme. WordPress has moved on such much since then, and the free version of this theme has not. If you’re interested in using AutoFocus on your production site, I highly recommend purchasing it and getting support directly from the developer.

    Thank you for all your lovely comments 😉

Comments are closed.