Creative Connectivity - the site for eHealth, telematics and wireless

Configuring the Deadwood Theme

The Deadwood Theme – Customising and fixing problems

 

This blog uses the excellent Deadwood Theme for WordPress from Graph Paper Press.  During the evolution of this site I’ve come across a number of niggling issues, particularly when viewing it in IE6 and IE7.  This page is a list of the fixes I’ve found that work for the modifications I’ve made and plugins I use.  They relate to the Deadwood theme files at the end of 2008, installed on WordPress 2.7.   I’m documenting them here, both as an aide memoire for myself and in case they help anyone else.

 

I can’t guarantee they will work for you, but they might act as a starting point.  They seem reliable on Firefox 3, IE6 and IE7.  I worked most of them out on a local installation using XAMPP, with Notepad++ as the file editor.  To see their effect have a look around my site.

 

 

1.         Changes that are necessary

 

These bits didn’t work in my installation, so were the first thing to do.

 

 

Correct the menu navigation for About

 

In header.php, Add /index.php/ to the path for About

 

(This may just be the way I set up WordPress.  Hover over each of the main navigation tabs to see where they go to and correct as necessary.

 

 

On the sidebar, Lines overwrite the images in the right hand column

 

In themes\deadwood\css\lib, comment out the following section:

 

pull-1, .pull-2, .pull-3, .pull-4,

.push-1, .push-2, .push-3, .push-4,

ul, ol {position: relative;  }

 

It doesn’t seem to upset anything and stops the overwrites.

 

 

2.         Changes in the Styling

 

Change to non-capitalised text headings for the bottom five category items

 

In themes\deadwood\style.css, find “.five_posts h3 a” and remove

 

Text-transform: uppercase;

 

 

Smaller excerpt heading

 

I find the default text for the excerpt headings (on the home page) a bit big.  To change them edit themes\deadwood\style.css and change the values in “.home-excerpt p”.  I use

 

          font-size: 1.5em;

          color: #619098;

 

 

To remove the Advertisement section

 

Comment out from home.php:

 

          <div class=”box”>

          <h2>ADVERTISEMENT</h2>

          </div>

 

 

Add additional navigation to the top menu

 

I wanted to add an Articles page.  So in header.php, after Archives, add:

 

<li class=”rss”>

<a href=”http://www.nickhunn.com/index.php/articles”>articles</a>

</li>   

 

I found it worked adding the full URL rather than a relative path.

 

 

To remove the Contributors tab (or any other) from the front page

 

In headers.php, remove or comment out the lines:

 

<li class=”t4″>

<a class=”t4 tab” title=”<?php _e(‘Contributors’); ?>”>

<?php _e(‘Contributors’); ?>

</a>

</li>

 

The same process applies to the other tabs.

 

 

To change the name of a tab on the home page

 

In headers.php. find the appropriate line:

 

<a class=”t2 tab” title=”<?php _e(‘Popular Stories’); ?>”>

<?php _e(‘Popular’); ?>

 

And edit the title in the second line, e.g.

 

<a class=”t2 tab” title=”<?php _e(‘Popular Stories’); ?>”>

<?php _e(‘Popular Stories’); ?>

 

 

Alignment of sidebar items

 

When using some sidebar plugins, such as gd-linkedin-badge, the resulting image gets shifted far to the right on IE6 and IE7 if you put in in sidebar-single-right, as both browsers seem to prefix the span-4 divs and span-3 on the same line.  To solve this, go to the files that reference the sidebar, i.e.  home.php, 404.php, archive.php, archives.php, author.php, index.php, search.php and single.php, and add a <br /> between the two sections.

 

(while you’re editing these, you might want to change span-3 to span-5.  See the note on lost right hand edges below.)

 

<div class=”column span-4 sidebar-left”>

<?php include (TEMPLATEPATH . ‘/sidebar_single.php’); ?>

</div>

<br />

          <div class=”column span-3 sidebar-right”>

 

 

Cut-off right edge of widgets in the right hand sidebar.

 

Most sidebar-single-right widgets I’ve played with get cut off on the right hand side with IE6 and IE7.  In most cases they should be in the sidebar-single, which solves the problem. The reason for the cut-off is that sidebar-right widgets get rendered with the span-3 class, which limits their width to 110px.  If they’re wider and you really want to put them in sidebar-single-right, then change the span-3 above to span-5 or span-6.  If you do, then make sure you have the <br /> line described above or they’ll disappear of the right hand edge of the screen.

 

With IE6 they get cut off anyway, so make the change of span-3 to span-5.  Alternatively you could edit the css/lib/grid.css file to increase the span-3 value, but this might mess up other things.

 

 

Adding a favicon

 

Use the favicon generator at http://tools.dynamicdrive.com/favicon to generate the file.  Save this in the root directory for your wordpress installation.  Then add the line:

 

<link rel=”shortcut icon” href=”http://www.yoururl.com/favicon.ico”>

 

immediately before the </head> tag.

 

 

Expanding the About box on each page

 

The About box, picks up its information from the WordPress bloginfo fields.  These don’t let you do much in the way of formatting.  They’re pulled into each of the eight page formatting files – (home.php, 404.php, archive.php, archives.php, author.php, index.php, search.php and single.php) in the code in the <!– ABOUT BOX –> section.

 

You could manually replace the content of the ABOUT BOX in each of these files, but it’s easier to write a new file called aboutblog.php and automatically pull it into it each.  That way you only need to edit one file if you want to make future changes.

 

Using a text editor, create bloginfo.php with the following content.

 

<div class=”box”>

<h6>About blogname </h6>

 

<p class=”small”>

First paragraph of text…

 

</p><p class=”small”>

Second paragraph of text…

 

</p><p class=”small”>

<a href=”<?php bloginfo(‘rss2_url’); ?>”>You can Subscribe via RSS &raquo;</a>

</p>

</div>

 

And save it into the Deadwood theme directory (where the home.php file is).

 

Then edit each of the eight page formatting files, replacing the section after <!– ABOUT BOX –>, i.e.

 

<div class=”box”>

<h6>About

<?php bloginfo(‘name’); ?>

</h6>

<p class=”small”>

<?php bloginfo(‘description’); ?>

. <a href=”<?php bloginfo(‘rss2_url’); ?>”>Subscribe via RSS &raquo;</a>

</p>

</div>

 

 with the single line:

 

<?php include (TEMPLATEPATH . ‘/aboutblog.php’); ?>

 

If you created the text using Word, characters like ‘ and – may appear on the blog as odd characters, as Word tries to be clever and use extended character sets.  If they do, edit the aboutblog.php file using a simple text editor like Notepad or Notepad++ to replace them and it should work. 

 

 

Adding headings inside the tab boxes on the Home page

 

You can do this by editing the header.php file.  Go to <!– SECTIONS (xyz) –>, then after the <ul class=”categories”> line, add either text or links (or both):

 

<p><h6> You can sign up to all new posts and articles from this blog, or view individual categories. </h6></p>

 

<li class=”cat-item”><a href=”/index.php/feed”> All of Creative Connectivity (RSS)</a></li><p></p>

 

 

About Creative Connectivity

Creative Connectivity is Nick Hunn's blog on aspects and applications of wireless connectivity. Having worked with wireless for over twenty years I've seen the best and worst of it and despair at how little of its potential is exploited.

I hope that's about to change, as the demands of healthcare, energy and transport apply pressure to use wireless more intelligently for consumer health devices, smart metering and telematics. These are my views on the subject - please let me know yours.

You can Subscribe via RSS »