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:
body{background-color:#FFF;color:#444;font:1.4em/1.6 "Hoefler Text", "Georgia", Georgia, serif, sans-serif;margin:0;padding:0}
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:
background-image: url('http://yoursite.com/picture.jpg');
Website Title
To change the size of your website title, have a look at this line of code under the /* =header */ section:
#header h1 {font-size:1.8em;line-height:0.8em;padding:5px 0 0;}
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):
#header #blog-title a {color:#f11;}
If you’d like to change the colour of the tag line, change the value in this bit of code:
#header #blog-description {color:#888;}
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:
<div id="header">
<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<div id="blog-description"><?php bloginfo('description') ?></div>
</div><!-- #header -->
Change the second line to something like this:
<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="http://yoursite.com/yourlogo.jpg"></a></h1>
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:
a{color:#444;display:inline;}
a:hover{text-decoration:underline;color:#000;}
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:
// Produces a list of pages in the header without whitespace
function sandbox_globalnav() {
echo '<div id="menu"><ul><li><a href="'. get_settings('home') .'/" title="'. get_bloginfo('name') .'" rel="home">Home</a></li>';
$menu = wp_list_pages('title_li=&sort_column=menu_order&echo=0'); // Params for the page list in header.php
echo str_replace(array("\r", "\n", "\t"), '', $menu);
echo '<li><a href="'. get_bloginfo_rss('rss2_url') .'">RSS</a></li></ul></div>';
}
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:
function sandbox_globalnav() {
echo '<div id="menu"><ul><li><a href="'. get_settings('home') .'/" title="'. get_bloginfo('name') .'" rel="home">Home</a></li>';
?>
<li><a href="yoursite.com/page1/">Your First Page Here</a></li>
<li><a href="yoursite.com/page2/">Your Second Page Here</a></li>
<?php
echo '<li><a href="'. get_bloginfo_rss('rss2_url') .'">RSS</a></li></ul></div>';
}
If you don’t care for the RSS Link at the bottom of that block, delete the entire line and replace it with
echo '</ul></div>';
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.
UPDATE: I’ve figured it out – Super Cache tricked me 😉
For the Archives to display a different amount of posts from what’s set under Settings – Reading, you need to amend a Thematic file called content-extensions.php (located in wp-content/themes/thematic/library/extensions/content-extensions.php). Find this piece of code:
// The Archive Loopif (function_exists('childtheme_override_archive_loop')) {
function thematic_archive_loop() {
childtheme_override_archive_loop();
}
} else {
function thematic_archive_loop() {
while ( have_posts() ) : the_post();
thematic_abovepost(); ?>
<div id="post-<?php the_ID();
echo '" ';
if (!(THEMATIC_COMPATIBLE_POST_CLASS)) {
post_class();
echo '>';
} else {
echo 'class="';
thematic_post_class();
echo '">';
}
thematic_postheader(); ?>
<div>
<?php thematic_content(); ?>
</div><!-- .entry-content -->
<?php thematic_postfooter(); ?>
</div><!-- #post -->
<?php
thematic_belowpost();
endwhile;
}
} // end archive_loop
All this generates your list of archive posts. We need to replace the WHILE loop with a FOR loop so we can control it with a counter. Let’s comment out this line by placing a couple of slashes in front of it, followed by our own loop:
// while ( have_posts() ) : the_post();for ($scherz = 1; $scherz <= 20; $scherz += 1) {
Nice. This will display 20 posts in our archives now, but feel free to change the counter ($scherz) to something else.
Now we need to comment out the closing statement of our previous loop and close our own loop properly:
// endwhile;}
Save, upload and test – eternal happiness guaranteed 🙂
The only downside to this approach is that I didn’t manage to implement this as an Autofocus+ Child Theme function. Believe me I’ve tried to no avail! Which means that if you update Thematic, these changes will be lost.
Hi,
Fantastic advice on a fantastic theme. I’ve found it all really helpful. I’m very new to all of this, and have been teaching myself basic css so that I can manipulate the theme a bit. However, I’ve hit a stumbling block on one thing, is there any way to make the images featured on the home page scale down? I’ve tried changing the value of the images from ‘large’ to ‘medium’ in the stylesheet, but that made them so small that they were repeated within the boxes; not what I wanted! I like the fact that the boxes zoom in on the images to give a slightly different perspective, but I wanted them 50% less zoomed in as the images don’t make sense at the moment.
My website is venetiarainey.com. Thanks in advance for your help, its been driving me a little bit crazy going through each bit of code and trying to work it out!
Thank you!
Welcome to my world – it makes me crazy on a regular basis 😉 The good thing is that you usually learn from what’s working and what isn’t.
I *think* I know what you’re asking – and I believe that your approach of choosing a different image size is probably the easiest one. Let’s work with that. We have several options here. The code you’re looking for is in home.php and looks like this by default:
<span style="height:300px;display:block;background:url('<?php the_post_image_url('large'); ?>') center center repeat"> </span>This will pull in the Large Image you’ve uplaoded with the post, whose dimensions are defined under Settings – Media; that’s 1024×1024 I think. If you’d make that size smaller, your image wouldn’t be as zoomed in as it currently is. However, we don’t want to do that.
Instead, replace the above code with this:
<span style="height:300px;display:block;background:url('<?php the_post_image_url('medium'); ?>') center center repeat"> </span>which means now the same image is pulled in but with different dimensions – by default 300×300 (which is too small for what we’re looking for). The easy solution: change this dimension under Settings – Media to say 500×500 or the likes – play with it to find a comfortable setting.
The downside to this approach is that it will only work for uploads made AFTER you’ve re-defined this size. Not good if you already have plenty of posts and just as many images on your site. Hence I’d suggest a third option using the thumbnail size. Change the above code to this:
<span style="height:300px;display:block;background:url('<?php the_post_image_url('thumbnail'); ?>') center center repeat"> </span>thereby pulling in the default 150×150 image. Way too small for our liking of course, but if you install the fabulous AJAX Thumbnail Rebuild plugin by junkcoder, you can change your thumbnails to any size you like. Once you made the change under Settings – Media, you can run the plugin and all images that are already uploaded will be rebuilt.
Be aware though that if you’ve inserted thumbnail sized images in your posts or pages, those will be affected by this action.
Good luck 😉
Hello,
I managed to change the .php file for the header, but I have no idea what to do with it now…
I am totally new in this world 🙂
Thanks in advance
Great advice. I went for changing the standard settings of the media. Hadn’t uploaded that many images yet, so figured it was the easiest thing to do. What I also found was that not only did this change only apply to images posted after the change, but as I was pulling in images from my media, it also only applied to media uploaded after this change had been made.
Still, uploaded the media again, with new medium image settings, and it’s working like a dream. Thank you so much!
I’ve also used your advice on cutting out the duplicated images in single posts, however, possibly because you were talking about an older version of autofocus, the title is still going small. Any ideas on how to fix that? This also means that the image being displayed is no longer protected from being copied or downloaded. How can I copy the HTML protective layer that was on the main image?
Thanks again.