How to style AutoFocus by Allan Cole

One of my all time favourite themes is AutoFocus by Allan Cole – it’s a superb portfolio theme that lets your pictures to the talking. Great for sites that show off images.

I wanted to use it over at Cloud-TV but thought that a different colour scheme would better suit my pictures – so I took some notes on how to amend certain aspects of the theme. You may find these useful if you’d like to style the theme to your own needs.

Please note that at the time of writing AutoFocus is at Version 1.0.1 – it is likely to be the final standalone theme and it’s no longer under active development. These tweaks will NOT work for Autofocus Plus or Plus Pro.

Version Differences

There are THREE different versions of Autofocus out there:

  • Autofocus 1.0.1 available from the WordPress Repository. You can get this simply by searching for “autofocus” under Appearance – Themes – Install New Themes. This is the version I’m discussing here. It is no longer in active development.
  • Autofocus Plus (or Autofocus+) available from Allan Cole’s super unpronouncable site fthrwght.com. This is a child theme for the Thematic Framework. You need both these themes to run it. This version is in active development but not discussed here.
  • Autofocus Plus Pro (or Autofocus+ Pro) also available from Allan’s site for a small fee.

I know this is confusing… that’s why I’m mentioning it here. Functionality is very different for the Plus version, which which we are not discussing in this article.

Background Colour

For my project I needed a darker background colour like grey. Have a look in the style.css file for these lines under the  /* =structure */ section:

Change the background-color value (#FFF) to something else like #333 to change its colour. Doing this will require a bit of tweaking on the old Page Titles – I’ll explain that further down.

If you’d like to add a background graphic, add the following code inside the {} brackets:

Website Title

To change the size of your website title, have a look at this line of code under the /* =header */ section:

Change font-size to 3.8em for something with a lot more impact. The title is defined by the default link colour (since the title is a link) – if you’d like to change this independantly from the link colour, add this bit of code (it’ll make the title red):

If you’d like to change the colour of the tag line, change the value in this bit of code:

Adding a Header

To add a header graphic to this theme, have a look at the header.php file and find this bit of code:

Change the second line to something like this:

Make sure your header is not too big, otherwise it’ll obscure the nav menu. Delete the second line if you don’t want WordPress to display your tag line.

Default Link Colour

To change this, go back to the style.css file and have a look for this inside the /* =miscellaneous */ section:

You guessed it: the first line changes the link colour, the second line deals with what happens when you hover. Sweet! Notice that changing either value will have an effect on the site title and all items in your Nav Menu, unless you override those individually.

The Nav Menu

The Nav Menu is called from within the header.php file via a function which lives in the functions.php file. Here’s the full php code you need to find:

By default, every page you’ve got in your WP installation will be shown. That may not be what you want. Instead, you could write a link to every page you want to show like this:

If you don’t care for the RSS Link at the bottom of that block, delete the entire line and replace it with

You can also change the size and colour of the entire nav block – have a look at the sttle.css file for this. Under the header section you’ll find a block of code – we’re only interested in the very last line which describes text in the nav menu:

/* =header */
...
#access #menu a{font-weight:800;}

If you wanted to make it red and slightly bigger for example, amend that last line to this:

#access #menu a{font-weight:800; color: #f00; font-size: 1.2em;}

Add tags to your heart’s content.

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

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.