Ultimate guide to Amazing Grace and Blue Grace themes

This guide is meant to answer all your questions regarding modification of Amazing Grace and Blue Grace themes, but not exclusively, as a lot what will be said can be applied to any other WordPress theme. There is also part 2.

The whole credit for this guide goes to 'WordPress Brian' who has been a tremendous help with all your WordPress inquiries and you can usually find him lurking around the forum.

Table of Contents

1. All of a sudden my site is acting really weird!
2. Inserting a logo
3. Do you mind if I change the theme to suit my own needs?
4. How do I change the colour of ....?
5. Can I change what goes in the menu tabs at the top?
6. How do I make a 'Contact Me' page?
7. What dimensions have I got to work with in this theme?
8. How do I adjust my page/category menus?
9. How to change the rotating images?
10. What is the PSD file and how do I use it?
11. How to remove the date images/info from the posts?
12. My Sidebars are all messed up!
13. How do I get help through this forum?
14. What is this big deal about Microsoft Word?
15. How do I make WordPress do......?

All of a sudden my site is acting really weird!

Amazing Grace and Blue Grace are extremely stable WordPress themes.  Before writing into the forum with a list of very bizarre behaviours ask yourself a very big, and commonly ignored question, "What was the last plugin I installed?"

The vast majority of problems with the Grace family of themes, and also the plugins available from this site, are related to an incompatibilty issue with other plugins.

Was the plugin installed as per the authors recommendations?

Is it up-to-date?

Be a plugin detective and try de-activating or even uninstalling plugins to see if the problems persist.

Do you have a thousand unused plugins just sat there from your previous experiments?

Learn some basic HTML and learn your way around your theme files and you'll be surprised at how much you can do yourself without the need for so many plugins.

Inserting a logo

Logos or custom headers can be made to fit over the blog title in the header area.

It is a very simple task.

Upload your image into the images folder of the theme.  Making sure you know the exact name and file type.  Also if there are capital letters as well.  I have had files not show due to the difference between logo.jpeg and logo.JPEG or logo.jpg and logo.JPG.

You then need to go into your admin area and open the theme editor.  In there you'll be using the header.php file and the stylesheet.

In the header file find the following line -

<span class="btitle"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></span>

and replace it with -

<span class="logo"></span><span class="btitle"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></span>

Go to the bottom of the page and save the changes.

Next, in the stylesheet.

Find the two areas of code labeled -

#rss-big a

.btitle

and in between insert the following -

.logo
{
background:url(./images/logo.jpg) no-repeat;
position: absolute;
margin-left: 110px;
width: 550px;
height: 105px;
top:43px;
}

Points to note!
Change the name to the name to your file and file type (jpg, gif)
The left margin is a rough guess, you can change it to move the image left and right.
Alter 'top' to make the image higher or lower.

What I normally do for a very simple solution to getting rid of the blog title is to adjust its left hand margin to push it behind the logo, or change the colour to the exact colour of the background.

Look in  - .btitle - for the margin.
margin:0 0 0 .5em;
Change the end number till your title disappears.

My logo doesn't show????

Check the names match and also check it uploaded correctly.  In your server find the logo and 'view' it.  This will tell you if the file got corrupted on the upload.

Do you mind if I change the theme to suit my own needs?

Amazing Grace and Blue Grace are free themes and are available to anyone.  The themes can be modified anyway you like, however it is just courtesy that the credits in the footer are left intact.

An excellent tip to modifying a theme on WordPress.....

Let's say, for example, you are about to dive into the header.php and make some changes to how the menu tabs are displayed.

First open a plain text editor, like Notepad in Windows, then copy and paste the existing header.php into the Notepad and save it on your desktop.

Then take a deep breath and dive into the code... safely knowing that anything you do can simply be undone by copying and pasting the original code back into the editor.

This lesson was brought to you from the school of 'painful wordpress experiences!

How do I change the colour of ....?

All colours that aren't part of an image can be changed in the stylesheet via your theme editor.

This includes:-

• The background colour.
• All the various text colours, from links and paragraphs to titles.
• Lines across the page.
• Borders around items.
• Boxes behind items.

A colour in the stylesheet looks like this -

#000000 for black

#FFFFFF for white

If you don't have a graphics program then simply type 'HTML colour codes' into Google and find a colour of your choice.

An excellent tool, if you use Firefox web browser, is Firebug.  It lets you change the colours and CSS 'virtually'.  The changes you make disappear when you refresh the page.  The tool takes a bit of working out and wont be suitable for everyone but once mastered it's an excellent web designing companion.

Can I change what goes in the menu tabs at the top?

By default the page menu at the top displays 'pages' (believe it or not!).

The category menu.... wait for it..... displays categories.

But these can be changed to display whatever you want, and link to them as well.

To do this you will need to open the header.php in the theme editor and know the basics of making a list and the link attribute in HTML.

You have to find the line in the header that controls which ever menu you are after, remove it and then add your new HTML.

The following is an example of the pages menu changed into a fixed menu showing links to elsewhere -

<ul>

<li><a href="<?php echo get_settings('home'); ?>/" >Home</a></li>

<li><a href="http://www.myblog.com/aboutme">About Me</a>

<li><a href="http://www.myblog.com/contactme">Contact Me</a>

<li><a href="http://www.myfriendssite.com" target="_blank">My Friend</a>

</ul>

Above you can see the link to your home page which is done dynamically.  A link to the page About Me and Contact Me.  Then finally there is a link which opens in a new window to your friend's site.

Obviously make sure the name in the link address is actually the page you are aiming at!  You can use a page name or a page ID.

How do I make a 'Contact Me' page?

An easy one this is......

Make a page called contact me.

Turn off the comments on that page.

Install a plugin called Contact Coldform.

Follow the authors installation instructions.

The End!

On the the authors website there are some extra layouts for the form in case the one you have doesn't match your style.

What dimensions have I got to work with in this theme?

On both Amazing Grace and Blue Grace the following dimensions apply -

Main content area 590px

Left sidebar 198px

Right sidebar 153px

These are found in the stylesheet and can be altered if you want.... but..... be aware of the knock-on effect of increasing one width, because this means that for everything to fit on the page that figure must be removed from one of the other areas.

For example - you add 10px to the right sidebar to fit in an advert.  You now must remove 10px from either the main content or the left side bar, or 5px from both.

Obviously there are no heights to deal with on the page because it keeps on going.

How do I adjust my page/category menus?

If you are wanting to change the colours of the menu tabs or the text colour then this is simply matter of adjusting the appropriate colours in the stylesheet.

A colour is 6 letters or numbers beginning with a '#'.

#000000 is black.

#FFFFFF is white.

However, many people want to change the order, include or exclude items etc.

This, unfortunately, requires a bit more work and is a topic covered widely on the internet.

The file containing the code you seek is header.php and the topic you need to seriously read up on is 'template tags', 'wp_list_categories' and 'wp_list_pages'.

If you have a play and realise you made a complete hash of it and all your menus have gone, just upload the original header.php file, overwrite the old, and you are back to the beginning.

What is the PSD file and how do I use it?

The PSD file is a graphics file that when opened in an appropriate program (Photoshop, Paint Shop Pro, etc) shows how the theme was designed and lets you make your own modifications.

Unfortunately this is only the tip of the iceberg.  After you have played with the theme in Photoshop and modified the graphics to your liking you then have to convert that image into the necessary files for uploading.

Three files make up the main image you see on the theme over the internet.

bg.jpg or bg.gif is the image responsible for the header area.  It is a narrow image repeated across the top many times.

In the top right with the rotating images on it is bg-portrait0.jpg up to bg-portrait9.jpg and it has a border on it that matches the whole header area, so be careful playing with the bg image.

At the bottom of the page is bg-footer.jpg or .gif and this, again, is repeated across the screen many times making up the footer.

Once you have made up these images by using the PSD file, upload them and then play with the stylesheet.  The rest of the colours can be altered through there.

If you have made serious colour modifications you might want to alter the search box and the date box as well.

How to remove the date images/info from the posts?

This simple little trick allows you to remove the date image and info on the top right of your post.  Some people choose to do this due to infrequent posting.

On the latest versions of the Grace themes go into the main index template (index.php) and remove the following lines.

<?php if (!is_page()) : ?>

<div class="entrydate">

<div class="dateMonth">

<?php the_time('M');?>

</div>

<div class="dateDay">

<?php the_time('j'); ?>

</div>

</div>

<?php endif; ?>

Then make sure you save your changes.

If you simply remove the image from the theme's image folder the information will still appear there as plain text with out an image background.

How to change the rotating images?

Here is my top tip for the quickest method of changing your rotating images.

Open bg-portrait0.jpg in your photo editor/graphics program and then simply paint over the image that is there in pure white.

And.... well that's the hard bit done.... you now have a blank template to work with.

Simply copy and paste your images onto the template and 'save as' bg-portrait0 up to number 9.

Doing it this way keeps all the original image dimensions and border colours.

Then upload your new images into the themes images folder, overwriting the old ones.

Some things to note.

If you are using Amazing Grace with the Blue Grace child theme make sure you put the images in the right folder.

Make sure the names of the images don't change or the file types... if you change them alterations have to be made in the header.php file in the theme editor.

Also, make sure they upload properly and don't get corrupted.

My Sidebars are all messed up!

There are three main reason for the sidebars acting in an unpredictable manner.

Main reason is that you are using older version of the theme! Latest theme files can be downloaded here. They contain both Amazing Grace and Blue grace so you can switch between them. Version at WordPress.org is not the latest as they still do not support child themes.

Second reasons is that you have altered one of the following in the stylesheet -

• The size of the font in the sidebars, main content, or the search box.
• You have altered the width of the sidebars or the content.
• You have added visual modification that adds extra pixels to the width of the overall layout, for example, another border around the content or the right sidebar.

Another common reason for the sidebars acting weird is you have added, inserted or embedded in one of the sidebars something that overlaps the edges of the sidebar itself.  Common things include YouTube videos, Amazon adverts or other media that has a fixed size.

Different browsers read dimensions differently so a situation you might experience is that in Firefox you site is spot on but in Internet Explorer the right sidebar appears under the main page.

How do I get help through this forum?

There are several steps to getting assistance with your problems.

If your site is live and the problems are visible give us a link.

Be descriptive.  "My site doesn't work!" helps nobody.  The better your description of the problem and what you did prior to the problem happening, the better your chances are of someone being able to help.

Unfortunately, as brilliant as this theme is and as user friendly as WordPress is.... some of us are just not cut out, or have time, for some of the fault finding/coding issues.  Consider hiring someone to help you.  look in the 'marketplace'.

Read through the forum!  Yes believe it or not, the best way to find help in the forum is to actually read the previous entries.  We now insist, politely, that once a problem has been solved we get a courtesy note saying "Thanks, the problem was this ...... and I fixed it doing this ......", this will help others in the future.

Be polite.  This theme is free.  You have not been asked to pay a single penny/cent for it.  So being grateful and complimentary is better than previous comments like "Does anyone actually moderate this forum?"and "If I don't get help soon I'm changing themes!".

This theme has been designed and built by a software engineer, so blaming flaws in it's design or coding before you check your own installation and server, etc, never go down too well.

Link to the Forum

What is this big deal about Microsoft Word?

One of the reasons for some strange behaviour on any WordPress theme is the direct copying and pasting from a MS Word document.

When this is done all the formatting information is copied over as well and that makes a huge mess.

As a test.  Open a MS Word doc and copy the text, about half a page will do.

Paste it into your new post in the visual editor.

Now click on the html tab on the right hand side and look at all the code in there.

Messy!

To convert your text there are online tools (ask Mr Google), or open the document in Word and 'save as', at the bottom you can change the file type, choose 'text without format' then just click ok on the next screen.  Then you have a normal plain text doc.

I know there is a function built into wordpress for this but I have found it less than perfect, with little bits of random code left over.

Also, there are probably plugins but that isn't the way forwards now is it?

How do I make WordPress do......?

I have counted all the main menu options in the admin area of WordPress 2.7!

I know... I must go out more!

With a handful of plugins installed there are over 50 options pages.... then there are on average 7 or 8 options per page.... that makes nearly 400 things you can do 'behind the scenes' to help with functionality and appearance.

If everyone out there fully understood those basic options then this forum would only be half full.

Apart from hitting a button called 'delete' there isn't much you can do that will permanently mess up your blog.

So please, please, please, get stuck in and have a play around.

At the end..

I want to thank once more Brian for assembling this guide, and to all users of the theme for sticking with it.

There is also part 2 of the tutorial.

See also:

• Big Amazing Grace/Blue Grace Themes Update
• Blue Grace
• Amazing Grace WordPres theme Tutorial, part 2