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.

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. Ah, interestingly the self-hosted version uses a class whereas the WordPress.com version uses an ID. Try the following instead and let me know if it works:

      #entry-content {text-align: center;}

        1. That’s not possible on WordPress.com as posts and pages get the same CSS styling (because posts and pages are more or less the same thing). To receive different CSS styling you’d have to add separate classes/ID’s to your php files (page.php and single.php) and then apply the centered CSS to your posts and not to your pages. Tweaking those php files can only be done in the self hosted version 🙁

        2. Thanks Jay but I actually don’t mind if everything is centered, but right now only pages are centered. How do I center posts as well?

        3. Sadly I haven’t got the CSS upgrade on WordPress.com so I can’t test this at my end. I’m guessing that this may help:

          #entry-content {text-align: center;}
          #entry-content p {text-align: center;}

          The added p tag in the second line should help to override explicit left-aligned p tags. No guarantees though 😉

  1. OMG I am dying trying to figure out auto focus right now. Can you help me or point me to a good tutorial?

  2. Sure appreciate your generosity with WP knowledge. My question: In terms of AutoFocus Lite, how do I get rid of all the sidebar (is that the sidebar area?) junk in my portfolio categories — date, By, Filed under, Bookmark the permalink and, especially, Leave a comment when I’ve disabled comments. Can’t figure out which php template has this text so I can delete it. Thanks much.

    1. Hi Cheryl,

      I would just suppress those messages via CSS – it’s much easier than ploughing through the PHP files. Add this to the bottom of your style.css file:

      .entry-meta {display: none;}
      #comments {display: none;}

      The first line gets rid of the meta data in your sidebar, while the second removes the entire comments section.

  3. have I found THE Autofocus guru??I think so…

    Instead of the post’s date on the thumbnail, I want to add a name – I managed to remove the date, but I have no idea how to add each portfolio’s/post’s name… do you know how to do this?

    Thank you so much!
    Heidi

  4. Great breakdown! I just switched to Autofocus Pro and was wondering if there was any way to get the front page images to simply show up. My images only appear when I scroll over them. Any help would be much appreciated and end my googling hunt for the answer lol

    1. Hi Findling,

      Those front page images should just show up without a hitch. If you’ve switched from a previous theme then perhaps your thumbnails were set to a different size. Autofocus Pro sets a new size which it needs – try uploading a new post and see which one that is (under Settings – Media).

      There’s a handy plugin called AJAX Thumbnail Rebuild by junkcoder. This will resize your previous thumbnails to what Autofocus needs. Not sure if it will solve your problem but it’s worth a try.

  5. Hi Jay,

    I just stumbled upon that great free version of Auto Focus, and I’m in love with its typography and the whole arrangement.
    Nevertheless, I faced one problem: I don’t want to use it for a photo site, but for a site about book reviews. That means that all the images I use (the book covers) are the same size, and I don’t need this automatic resizement thing on the index page. Is there any way to simply show the images on the front page without the need of arranging them in different widths?

    Best from Germany,
    Alex

  6. Hi there.

    Fantastic tutorial. Easy to understand. My problem is that the header.php does not have any lines like the one above. I use the Autofocus 2.0 and would like to place a custom logo instead of the header. I hope that someone can point me in the right direction….

  7. I’m trying to delete the side bar on my posts and having some difficulty. I saw above that you said to enter this code into the style.css file:

    .entry-meta {display: none;}
    #comments {display: none;}

    I did that and it still didn’t get rid of the sidebar. Any suggestions?

    1. @ Sejal
      That code gets rid of the meta data inside the sidebar, not the actual sidebar. Deleting the sidebar completely is not an easy task: you’d have to widen the content area and then reposition every item inside it. You then probably want to make the picture wider to fill said space, and that sadly isn’t a one-liner. I remember trying it and completely messing up the theme.

      Sorry I can’t help with this.

Comments are closed.