How to style AutoFocus by Allan Cole

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(); ?>">
<div>
<span>&copy; <?php the_time('Y'); ?> <?php the_author(); ?></span>
<?php the_post_image('large'); ?>
</div>

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

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

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 😉