Read this Post first to help set up your Breathe Theme.

Version 2.1 is my latest release and there have been big changes.  The best part is that there is a Breathe Options page located under the Appearance tab in the admin section of your site. This gives you ease of use for changing the look of the theme.  It also supports Google Advertising and much more…

CLICK HERE for the Breathe Test Site

This is the working site of my free WordPress theme Breathe.   I have put a lot of time into the design and adding some features that I think make the site more functional and are the kinds of thing I wanted when I first started using WordPress.  To make your theme work like this one, you will need to download and activate two plugins at least. “Get  the image” and “Multi Level Navigation“.

The Blog title and the Tag line is situated at the top of the page. Change these in your General Settings.

The top bar is a page directory.  All the pages will be listed here. There is however no support for child pages. Don’t worry as there is heaps of navigation below. V2.1 I have added drop down menu for the pages.

The main picture is 950px x 200px. It is called header.jpg and can be changed by making a new picture at these dimentions and uploading it to wp-content>themes>breathe>images. V2.1 You can add your picture anywhere in your directory and then just add the url in the Breath Options panel.

The bottom navigation uses the Multi Level Navigation plugin which needs to be downloaded to make it work like this theme does. I have also changed the default CSS for this plugin. See the post that outlines what you need to do to intergrate this into your theme.

The main content on the front page and in the search page use the Plugin Get the image. If you choose not to download and use this its o.k. but it in the script if you want to use it.  This plugin takes the first picture for the relevant post. If there is no picture for the post it will insert a default image. Read the “changing the default thumbnail” post for more information. (removed in version1.7)

The Main page uses an excerpt call for the text.  The wordpress defaut is 55 words. If you want more get the plugin Advanced Excerpt. Set the plugin to 70 words and it ust gives a little more text on the front page.  The hitch is that if there is an image inserted into a post within the first 70 words it will be included on the front page and it upsets the design asthetics.  So just dont put a picture in the first paragraph.

The side bar is 300px wide.  It is big so it can handle long titles and even Google adsense ads.

The post pages have an Author section is taken from the User menu. Just add your information there and it will magically appear in each article you post.

Comments can be seen below. I have put in a couple of dummy ones. They also support Gravatars

This is what the 404 Error page looks like.

Do a search to view what the search page look like.

I think that is it. Hope it works for you.

Enjoy.

1. Login to the adminsition area of your site.
2. Go to the Appearance tab (on the left side of the screen).
3. Click on Editor
4. The page that appears should be style.css, if not go to the right side of the page and find Styles heading and under there is Stylesheet (style.css) click on this
5. Scroll down the page to find this  #search
6. Change the third line down top:107px; to top:357px; which will put the search box on the bottom bar. If you want it somwhere else just play with the numbers.
7. The search button now looks a little out of place so we will have to hack the call for the button.
8. Under the #search { } place this code in. NOTE: Make sure you put the code after the closing bracket of the search styling.  Just look for this } character.
   /*******Input for Seach*****/
   .input {     border: 1px solid #006; }

9. Click on Search Form (searchform.php) right side of page.
10. Delete the third line <input src=”<?php bloginfo(‘stylesheet_directory’); >/images/search.gif” type=”image” value=”submit” />
11. Replace with this line <input type=”submit” value=”Go” />
12. The search box should be where you want it and has a new button.

Check your site and refresh by pressing F5 and it should all look ok.

This is what it should look like.

Default Thumbnail

To make it so that double images are not shown on the front page put the first image after the first paragraph or at least 70 words into the a post.  This is because the except will show the first 70 words as I have set it up and will include an image if it is in the first 70 words.

In version 1.7 I disabled the default thumbnail.  You can reinstate it if you find this line of code in the index.php file

<?php if ( function_exists( 'get_the_image' ) ) { get_the_image(); } ?>

and replace it with this

<?php if( function_exists( 'get_the_image' ) ) get_the_image( array( 'default_image' => '../wp-content/themes/breathe/images/thumbnail.jpg')); ?>

Get the plugin (Multi Level Navigation) and activate it by following the directions with the plugin.

This plugin is particularly powerful in providing a navigation system that works in all browsers, looks good and is fully customisable.  By following the next few steps we will integrate it into the look and feel that compliments the Breathe Theme.

Lets get started.

Once it is activated your navigation will look like this as the default. Blue which does not fit this theme so here is how to modify it.

Go to Settings > Multi Level Navigation

Click on the appearance tab at the top of the page.

Highlight the CSS

Delete all.

Copy and Paste the below CSS back into the box.


#suckerfishnav {font-weight:bold; width:100%; margin:0 0 0px 0;}
#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:40px;padding:0 ;margin:0; width:100%;}
#suckerfishnav a {display:block;color:#ffffff;text-decoration:none;text-transform: uppercase;padding:0px 0px 0px 15px;}
#suckerfishnav li {float:left;padding:0 0 0 0px;}
#suckerfishnav ul {position:absolute;left:-999em;height:auto; width:151px;font-weight:normal;margin:0;line-height:1; border:0;border-top:1px solid #666666;}
#suckerfishnav li li {width:149px;border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;font-weight:bold;font-family:verdana,sans-serif;}
#suckerfishnav li li a {padding:4px 10px; width:130px;font-size:12px;color:#dddddd;}
#suckerfishnav li ul ul {margin:-21px 0 0 150px;}
#suckerfishnav li li:hover {background:#dddddd;}

#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#ff0000;}
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {text-decoration:none;color:#ff0000;}
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;}
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}
#suckerfishnav li:hover, #suckerfishnav li.sfhover {text-decoration:none;}

Settings

Setting tab – First box Speed of fade in effect (drop down box) change to instant update options

Menu Contents

Menu Item #1 Home

Menu Item # 2 Categories (single dropdown)

Menu Item # 3 Archives Month (single dropdown)

Menu Item #4 Links with categories – single dropdown

Of course you can configure this anyway you like.