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:

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:

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

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:

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

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 😉

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

257 thoughts on “How to style AutoFocus by Allan Cole

  1. Jay… Hi…
    I too am a big fan of Auto Focus and would like to use it as my visual blog. This would be an adjunct to my regular website. I’m a professional photographer. I’ve tried to contact Allan Cole, without success. One thing I would like to change about AutoFocus, is to add my own graphic identity in place of the generic titles that the basic theme offers. I see from this post that you have provided advice toward that end. I have a couple of further questions though: 1] As you know, WordPress has a built in ‘editor’ function for making changes like this. But it seems that some themes require that you put the code into an editable form with an outside Text Editor. I’ve obtained an editing app called TextMate for this purpose. But I have NO experience using these, so I am asking if you could point me in the right direction. I think with a little help, I can make this change on my own without professional help. 2] When changing the header.php I am to insert a URL for the graphic header I want to display. Right now, that graphic file is simply on my hard drive. I’m not sure how to make it available in this way. Thanks for any advice you can provide. Best, Michael

    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 Lynda.com.

      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 http://www.yoursite.com/wp-content/uploads/yourimage.jpg) – 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. hey al, a quick question here, how do you make .gif in post to work? cuz when i post .gif they tend to freeze in the post page… how to do make it work? i’m using v1.0.1 btw.

    thx ahead!

  3. 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:

    http://themesupply.co/

    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.