Joomla 1.7.3 Tutorial – How to Remove the Caps from the Main Menu in the Top Position

by Elaine on December 17, 2011

I never really noticed before that the Main Menu’s in Joomla 1.7 were all Uppercase.  No matter how you entered in your Menu names in the Menu Manager, they always showed up as Uppercase when viewed on the frontpage. ie, HOME, SAMPLE SITES, AND Joomla.ORG, these main menu items were always in caps.   I received a comment request on how to change this and below I will show you how to make this change.  If you are using Beez_20 Joomla 1.7 template, this is what your Main Menu will look like after making the changes below:

cmsmind joomla 173 elaine remove caps mainmenu text 1 Joomla 1.7.3 Tutorial   How to Remove the Caps from the Main Menu in the Top Position

Joomla 1.7.3 - Remove Caps from Main Menu Text in Top

Overview:

  • Locate the secret hiding place for the ‘edit css’ file location in the Template Manager
  • Comment out the lines that transform Main Menu text to uppercase in Template Manager

1.  Locate the Secret Hiding Place to Edit the CSS in Template Manager

To remove the caps from the Main Menu titles and change them to normal case as entered in the Menu Manager, you will need to edit the Beez_20 Template layout.css:

cmsmind joomla elaine move mainmenu to top above logo 2 Joomla 1.7.3 Tutorial   How to Remove the Caps from the Main Menu in the Top Position

Joomla 1.7 - Click on 'Templates' tab to edit the template CSS

  • Login to your Joomla 1.7 administrator backend
  • Click on ‘Extensions’, ‘Template Manager’
  • Click on the ‘Templates’ tab
  • Click on ‘Beez_20 Details’
  • Click on ‘Edit css/layout.css’
  • If you need more help with that, click here for my post.

2.  Edit the CSS and Remove the Uppercase Property in Template Manager

The uppercase transformation appears 3 times in the css code.  We will need to comment out this code so it will not change the Main Menu headings to Uppercase.  See Below:

  • Search for the text:
text-transform:uppercase
  • Change the code From:
text-transform:uppercase
  • Change the code To:
        /* Commented Dec 16, 2011 by Elaine - To remove the Uppercase from Main Menu Headings */          /* text-transform:uppercase  */
    • This code appears 2 more times in the css/layout.css file.    You will make the changes in the
      • #header form .button
      • #header ul li a:visited
      • #header ul li.active a:visited
  • Click on ‘Save & Close’

After you refresh your Joomla 1.7 website, you will see the caps removed from the text of the Main Menu in the Top module position of Beez20 Template.  After you click on the link, the ‘visited’ text is not changed either.

Thanks,

Elaine

 Joomla 1.7.3 Tutorial   How to Remove the Caps from the Main Menu in the Top Position

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: