Amazing Grace WordPres theme Tutorial, part 2

This is another guest post from Brian, with new amazing tweaks for Amazing / Blue Grace themes.

In the last tutorial we looked at how the Amazing Grace theme was put together and how to find your way around its design.  We are now looking at a few more ways for you to tweak the theme to make it 'your own' without altering any of the main coding characteristics that make this an extremely well built and highly recommended theme.

In the previous tutorial, and this, we constantly refer to 'graphics programs'.  These can be Paintshop Pro, Photoshop or Gimp - even Windows standard paintbox is capable of some of the changes.  Gimp is an open source (Free) program you can use on any PC (http://www.gimp.org/windows/)

Amazing Grace, and its Blue child theme, has been downloaded many many thousands of times.  It is extremely popular due to its visual appeal and the behind-the-scenes coding.  But you want to stand out.  A blog is a personal piece of cyber-property.  So, after you have had a play with the last tutorial here are some more ways for you to personalize your theme.

The Search Box

1.  Open the original search box image in your graphics program and immediately 'save as' search2.png  -  this means that if you make a complete mess you still have the original untouched image.

2.  Try and stick to the original dimensions of the box.... this is due to the knock on effects that might occur should you make the box any bigger or smaller, such as it over-lapping the edge of the sidebar, or even worse in IE6.

3.  Once all graphical changes are done, and you are happy, then 'save' and upload the image to the theme images folder on your server.  Now you can delete 'search.png', on the server, and rename your image to the original filename.

4.  When your browser is refreshed you will now see your new search box - if not, clear the browser cache and try again.  If it all looks a mess, you can upload the original 'search.png' from your PC back to the theme files and all is back to square 1.

Points to note:

Not all change to the search box are graphical.  If you changed the background colour inside the box then you have to tell the stylesheet.

Inside the graphics program you used, find the html colour for the inside of the box, then open the stylesheet from inside the dashboard/appearance/editor and look for the following

.search-form input{
width:125px;
margin:14px 0 0 10px;
border:0px;
background:#f9f9f9;
color: #454545;
}

Change background to match the colour of your new image background and 'color' refers to the colour of the text.

If, after all this, you realize you don't want a search box..... remove the following code from sidebar.php -

          <div class="search-form">  
			<?php $search_text = "Search..."; ?> 
	    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
	        <input type="text" value="<?php echo $search_text; ?>" name="s" id="s" onblur="if (this.value == '')  
	        {this.value = '<?php echo $search_text; ?>';}"  
	        onfocus="if (this.value == '<?php echo $search_text; ?>')  
	        {this.value = '';}" /> 
	        <input type="hidden" id="searchsubmit" /> 
	    </form>  
	  </div>

The Sidebar

Changes to style the sidebar can all be done from within the dashboard/appearance/editor and widgets (unless you wish to add images).

So, please get your stylesheet open and we'll begin.

Looking at the image below we see a standard Amazing Grace theme that has been tweak slightly via the stylesheet.

Lefthand Sidebar

1.  Find #sidebar-left and simply alter the following lines to your liking -
background:#000;
border:2px #001e5e solid;

Choose a suitable colour for background and add the code (#000 is black).
The border code says "a solid border (all the way round) 2 pixels thick, colour #001e5e"
More instructions on border properties are found HERE (link - http://www.w3schools.com/css/css_border.asp).

2.  For the 'titles' of widgets in the sidebars they are found under #sidebar h4 - and again, simply change the background and colour to suit.  Keep in mind that #sidebar h4 will change the title colours on BOTH sidebars!!  If you want them seperate then you must make #sidebar-left h4  AND  #sidebar-right h4.

Righthand Sidebar

This sidebar doesn't have much styling applied to it - for a stunning minamilist approach, I will add.  But as you can see from the image above I have made some changes and these were all done from within the 'text' widget.

Looking at the top box in the right sidebar above here is the code from my text widget.

<div style="border:1px solid #97461A;width:163px;margin-bottom:10px;>
<p>
<span style="background:#592612; color:#fff; display:block;font-size:1.3em;font-weight:bold;">S2Si Expedition</span>
</p>
<ul>
MANUALLY ENTERED LINKS..... OR
A WORDPRESS 'wp_list'
</ul>
</div>

(Please note - looking at my above code many Pro-CSS coders out there would prefer to keep all css in one file, the stylesheet.  This theme change was a small one and in my eyes, and, considering the rest of my work on the website I did, not a significant threat to any site performance.)

1.  In the 'div style' you will recognise the border attributes from the above topic.  Width is self explanatory and margin-bottom gives some space under the last list item.

2.  I did not enter a title into the 'title' area of the text widget, because this would have shown up as a standard 'h4' tab with a set colour.  So now look at the 'span style' set between two paragraph tabs.  This styles the area that looks like a normal 'siderbar h4'.  After everything we have mentioned so far you should be able to work that one out.

3.  Depending on what you want to show in the newly styled 'text box' widget will affect what you now enter.  The choices are endless, links, lists, images, etc.  These can be done manually or by having wordpress code do them automatically.... and if that is your chosen route (a highly recommended one) then this is the page for YOU (http://codex.wordpress.org/Function_Reference)

Date image

To begin this topic we will show you how to remove the date image.... this seems to be more of a request than the desire to change it.

Go into dashboard/appearance/editor and open 'index.php' (main index template) and remove the following lines.

<div class="entrydate">
    <div class="dateMonth">
       <?php the_time('M');?>
    </div>
         <div class="dateDay">
           <?php the_time('j'); ?>
         </div>
</div>

.... and there goes the date image!

For those of you wishing to do a little extra with the image here are some points for you.

1.  You can simply open the existing date image in a graphics program and make a new version (I quite often just change the colours), keeping the original dimensions, then upload as I explained in the search box feature above.

2.  Or... as you can see by this image  sometimes your chosen image is not a suitable shape to be an exact copy.

3.  So, let us open the stylesheet and find the following areas -
.entrydate .dateMonth
.entrydate .dateDay
.entrydate

4.  What will concern you, if you do a standard change of colours are just the one line 'color' in each of the following '.entrydate .dateMonth'  and  '.entrydate .dateDay' - but if you change the dimensions, as I did in the image above then then next point is important.

5.  In the 'classes' mention in point 3 above, look at the margin and padding settings.  These are pixels dimensions that the stylesheet uses to push the date and day figures/letters away from the edges of your image.  It is way beyond this tutorial to explain all this here, so here are three links to help you better understand - (http://www.w3schools.com/CSS/css_boxmodel.asp), (http://www.w3schools.com/CSS/css_margin.asp), (http://www.w3schools.com/css/css_padding.asp).

6.  Keep a copy of the original stylesheet so you can revert back to it should things go wrong.

7.  Try to use Firefox plugin Firebug to help you with the changes.

8.  Make small changes and keep refreshing to see how it looks.

9.  Finally, ask friends with other browsers, especially IE, to see how it looks.

10.  It really isn't as scary as I've just made it sound.  Have a go and let us know how you got on.

Add a favicon

Adding a favicon is a simple way for your website to stand out when bookmarked, when in a list or shows you have that professional 'pays attention to detail' quality.  Here are mine and Vlad's favicons in action.

1.  Start by making a small (16 pixels by 16 pixels) image of your choice.

2.  Save it as a 'png'.

3.  Then have it converted to an 'ico' image.  This website will do it for you if your software can't help you out (http://www.convertico.com/)

4.  Make sure it is named 'favicon.ico' and upload it into the same directory as your wordpress installation.

5.  Add this line to your 'header.php' via your dashboard/appearance/editor, above the line that reads wp_head() :

<link rel="shortcut icon" href="favicon.ico">

6.  Now clear your browser cache and refresh your browser.  If it doesn't show you must check you put the image in the right place and sometimes a browser needs to be restarted or even a PC due to a persistant cache.

Leave a reply

Sign into your admin area and go to the theme editor under the appearance menu. Once there open 'comments.php'.

This is quite a complex file, even for me, so don't mess around, let's just do What we came here to do.

Go to the 10th line up from the bottom.

Here you will see this line -

<p><small>You can use these tags: <?php echo allowed_tags(); ?></small><p>

… and this gives us this ….

For the sake of this tutorial I changed the above code to this -

<p><strong>Hey guys, this blog is read by people of all ages .... so let's keep it clean ;)</strong></p>

… which now makes the reply box show this ….

You can put anything you want in between the 'p' tags, you just need to learn some basic html to style the text.


More like this:


Posted in: WordPress
TAGS:, , , , , , , , , , , , , , ,
Both comments and trackbacks are currently closed.

14 Comments

  1. Nov 22nd, 2012

    I do some modification on elblogdeviajes.co

    Thank you for your theme Vladimir

    Regards
    Arol

  2. Aug 27th, 2011

    Hi Vlad,

    I truly enjoy you theme. I tweeked the theme a little bit, but one thing would make it perfect for me. Is there a way to change the order of the columns? I would love to have the left side bar at the left side of the screen, the content in the middle and the right bar alone on the right.

    If you can give me some guidance on how to do that I would greatly appreciate.

    Thanks,

    René

  3. May 13th, 2011

    Great theme, but the styles for the comments section aren't so great ... any plans to beef those up a bit?

  4. Nov 22nd, 2010

    Vlad,

    I'm not trying to butter you up. I truly like your Amazing Grace theme. I use some of your plugins on my site and will probably use more. They are neat and do what you say they will do. I screw up installing them at times but have learned to recover without too much pain.

    I need to modify the AG theme but I'm really a hack. I've been toying with code for too many years and could really use a nice theme editor like the Ten-Twenty theme. Do you have a plug in editor or are you considering making one available?

    By the way, I like your quote re not having the source code to change the world - have you tried using the Bible?

    Regards,

    Bob Beck

  5. Oct 18th, 2010

    HELP! How can I rearrange posts within Amazing Grace? I have changed the publish dates yet they continue to show in the same order. Even downloaded several plugins for rearranging dates. No change. Any help will be greatly appreciated.

    Thanks!
    Ed

  6. Oct 3rd, 2010

    I would like to be able to put my own pictures on the rotating picture gallery.
    Please explain in layman's terms how I would do this.
    I am still building the site which I might add is an excellent theme.
    thanks ....Dai

  7. Julia
    Jun 13th, 2010

    Hi Vladmir,

    Thanks for all your guidance on this site! Just wondering- how do I change the font of the header?

    Thank you!

  8. May 10th, 2010

    I removed the date image. I am challenged with removing the writing date (referring to each post entry) and this includes month and number day. I would also like to remove the author "Posted By" feature.

    Thanks for your help and your theme.

  9. Mar 24th, 2010

    Hello,

    I would love to add sub-pages to my site. I'm using the Blue Grace Theme. I would like to have this:

    GALLERY
    - Guitarists
    - Female Vocalists
    - Male Vocalists
    I put Gallery as the parent page, but the others did not show. I don't know what else to do.

    I don't want to change my theme, please help!

  10. Mar 21st, 2010

    Looking the "ready available" social media icons and multi-page features.

    1) Is it possible to have a "drop down" on the menu for different pages?
    2) Where can I find how to use the social media icons (Facebook, Twitter, YouTube etc.)

  11. Feb 11th, 2010

    ok...i am somewhat of a novice. I cannot add images on either Mozilla or IE. On IE I can at least see that the image was attached but the editing box won't close. I was able to set the options in the browser to capture this error message. Funny thing is that I captured it in IE and it references Mozilla. Am I not configuring images properly?

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; FunWebProducts; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 11 Feb 2010 01:11:51 UTC

    Message: 'document.getElementById(...)' is null or not an object
    Line: 524
    Char: 3
    Code: 0
    URI: http://www.grrreatstuff.com/wp-admin/post-new.php

    • Wordpress Brian
      Feb 13th, 2010

      Sorry Elaine... I have no idea what the problem is, can you be a bit clearer?

      Which of the above were you attempting?

      Thanks

  12. Feb 5th, 2010

    The Grace Themes are the Best and Brian has answers some of my questions. I'm like Ashley, I would love to know how to make the Page and Category drop menus. Keep up the good work. It helps us all. Thanks Bill Kyle

  13. Feb 5th, 2010

    Hi Vladmir,

    I was asking around on the WP support forum and they pointed me to your site! I'm trying to create the same type of navigation you have in your main site (the drop down lists horizontally instead of vertical)... did you create a plugin for it?

    Thank you

  • ManageWP