Paul Cracknell » breathe

Video Embed

Paul Cracknell — Wed, 16 Jun 2010 05:01:07 +0000

This is a test for embed of video.

This is a test of the video embed. By default the video will not display on the front page because the excerpt call is used. If you would like video to be shown on the front page you will have to change this. See this Article to change this.

Changing the front page to display full articles

Paul Cracknell — Fri, 11 Jun 2010 10:55:35 +0000

I have had some enquiries about changig the front page from having excerpt of stories to the full story of each post on the front page. It is pretty easy to change, this is how it is done.

Log into the admin of your site.

go to Appearance>Editor>index.php

Find this line

replace it with

save the file.

All the post will be on the front page

Announcement: Breathe Version 2.1

Paul Cracknell — Thu, 10 Jun 2010 06:19:57 +0000

I have just released Breathe version 2.1 which includes a lot of changes under the hood. The most exciting thing is that there is a Breathe Option page located under the Appearance tab. The options page will enable admin change the site more easily without having to know CSS and PHP. Have a play around an see if you like it.

If you are a Google Adsense affiliate you can add you adsense code straight into the Options page boxes. You also have the option of showing ads at the top and the bottom or only ads at the top and not bottom or vice versa. Get it very versatile…

If you need help are get stuck I have whipped up a Help Forum so take look or add a question to get help.

The Style-2.css page is to make changes to your CSS if you want without altering the original code. Neat stuff…just find the CSS that you want to change in the original stylesheet then copy it and paste it into the style-2.css. Make the changes, delete the things that stay the same and viola the change has been made but can be undone as easily as deleting the style in the Style-2.css. I have an example already where I make the ads at the top of my page centered. Delete the top ads text align:center; and it will be positioned left. Give it a go it is awesome….

What else can I tell you! Just get your hands dirty and give it a go see how it goes for you.

Enjoy the theme and let me know what you think. I love positive feedback…

Moving the seach box

Paul Cracknell — Wed, 07 Apr 2010 02:59:31 +0000

The seach box is conviently located in the top right hand side of the top navigation bar, however some people would prefer to move this to another location so this a quick guide to help those that want to move it.

Login to the adminsition area of your site.
Go to the Appearance tab (on the left side of the screen).
Click on Editor
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
Scroll down the page to find this #search
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.
The search button now looks a little out of place so we will have to hack the call for the button.
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; }
```
Click on Search Form (searchform.php) right side of page.
Delete the third line /images/search.gif” type=”image” value=”submit” />
Replace with this line
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.

Changing the height of the Header Image

Paul Cracknell — Wed, 07 Apr 2010 00:49:29 +0000

I get lots of requests on changing the header picture height of the Breathe Theme, so this is a quick how to guide.

The default settings for the image in the head section (mountain range) is width = 950px and height = 20.2em.

To change the height it is a simple matter of changing the height in the Style.css page.

Under the Appearance tab click on Editor.
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.
Scroll down the page to find this #header
Change 20.2em beside height to whatever you would like e.g., height:100px; Don’t worry about spaces and make sure that the ; is at the end as per the example.
Click Update File at the bottom of this page. A bar at the top pops up “File edited successfully“.
View your changes on your site by opening another browser window and press the refresh button or F5 key on your keyboard to make sure that the changes are like you expected.

Drop Down Menu

Paul Cracknell — Wed, 17 Feb 2010 02:50:11 +0000

I have just added a drop down menu for pages in my Breathe theme. They are the ones displayed on the top navigation line. Lots of people wanted it so I just bit the bullet and worked the damn thing out. Thanks majorly to SEOadsenseThemes for publishing their article on how to use jQuery drop down menu for WordPress. I have configured the CSS styling to reflect the navigation for the bottom nav bar if you put it in. I just have to look over a couple of more things, package it up and then have it reviewed by WordPress. It should take just a few more weeks so stand by…

UPDATE: I am having issues with the menu working in IE. So until this is fixed I will not be releasing the update. Damn IE…

Setting up the Navigation Menu

Paul Cracknell — Mon, 29 Jun 2009 12:14:59 +0000

Multi Level Navigation

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.

Welcome to WordPress Theme – Breathe

Paul Cracknell — Fri, 19 Jun 2009 23:46:12 +0000

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.