There are several elements to the appearance of your main horizontal menu. Below are two examples of a rocnavmenu after their appearance has been changed.

First, you can set the background color and text color of the main menu differently from the background color and text color of the drop down menu. Second, you can also set the active and hover text colors and backgrounds to be different from the non-active text colors and backgrounds. Appearance includes not only background color and font color of the main menu and drop down menu, but also line height, font size, font weight and many other aspects of your menu.

Some of the elements of a menu’s appearance can be controlled in the Template Edit screen. For example, the background color of the drop down menus on hover is controlled by the MENU COLOR picker in the Template Edit Settings Tab.

The font size of the text of items in the main menu is controlled by the Font Settings selector:

 

 

The color of the text of items in the main menu is set by the Headlines Color selector:

Sadly, this same selector sets the color of Titles to your website pages and articles. This makes it a little more difficult, but not impossible to have light colored main menu text but dark colored webpage Titles.

The rest of the elements for menu appearance require that we find the correction section of the correct style sheet(s) in order to change the appearance of the Fusion menu items. The CSS sheets are reached by going to Extensions, Template Manager, then clicking on EDIT to reach the Template – Edit screen. Then click on the Edit CSS icon to reach the Template CSS Editor.

 

The changes will need to be made in the template.css file.  Select template.css and click on EDIT. Then scroll half way down to the bottom of the page to find the CSS section affecting the appearance of the template menu: /* Menu styles */

 

Changing the Main Menu Text Color

To make the Main Menu Text color different from (lighter than) the Web Page Title Text Color, find the following lines and add

color: #aaf; as shown in bold below:

 

#rt-menu ul.menu li a, #rt-menu ul.menu li .separator {

          display: block;

          height: 28px;

          margin: 0;

          cursor: pointer;

          z-index: 100;

          position: relative;

          font-size: 1.1em;

          text-decoration: none;

          border-right: 1px solid #d9d9d9;

          border-left: 1px solid #fff;

          padding: 12px 20px 0px 20px;

          line-height: normal;

          font-weight: bold;

           color: #aaf;

          text-shadow: 0px 1px 0px #fff;

          background: url(../images/level1Bg.png) 0px -10px repeat-x #fff;

 

Then click on APPLY, then Preview. Adding this element to the CSS will allow you to over-ride the color selection in the Template Edit screen and change the Main Menu font color to whatever you want.

 

Changing the Main Menu Background Color

To change the rest of the elements affecting the appearance of the RokNavMenu,  we need to scroll even farther down towards the bottom of the template CSS sheet to reach the section called  

 

/* RokNavMenu */

/* Navigation - Core */

.menutop li.root > .item, .menu-type-splitmenu .menutop li .item {

          color: #0893cf;

          border-left: 1px solid #fff;

          border-right: 1px solid #d9d9d9;

          text-decoration: none;

          font-weight: bold;

          text-shadow: 0px 1px 0px #fff;

          background: url(../images/level1Bg.png) 0px -10px repeat-x #fff;}

 

Ironically, the color element in this section does not appear to affect the color of the text in the top menu, even though we have selected the rocnavmenu. But the bold line in this section does affect the background color of the main menu. It links to an image called level1Bg.png which is in the templates/cloudbase2j15/images/ folder. This image is what gives the top menu a shiny 3D effect. If we wanted to keep the shiny 3D effect, but change the background to another color, we would have to use our Extplorer file manager and navigate to this image. Then upload the image to our home computer and change it to the color we want using a free image editing program like paint dot net or Photoscape (available from cnet.com). After changing the color of this image, we would then place it back in the template/images folder.

 

However, if you do not want to do all of that work, a much simpler solution is to delete the background image and replace it with a background color. The advantage of this second method, besides being much quicker will allow you to change the background color very quickly should you ever decide on a different color template in the future. The only drawback to this second method is that the background color will look flat and not have the 3D glimmer effect of the default RocNavMenu background images.

 

Eliminate the entire URL line and replace it with a simple CSS background color:

background: #fff; Click APPLY, then PREVIEW to verify that the background of the Main Menu has changed to white. Now that we have this color code, we can easily change the background color to whatever we want whenever we want. For example, try a dark blue such as #338:

This darker menu with light text creates a better contrast to the rest of the page. However the lighter text color is difficult to read because the white shadow is now magnified by the light text. So delete the line: text-shadow: 0px 1px 0px #fff; Then click APPLY, then PREVIEW:

 

Changing the Drop Down Background Color

Now that we have the Main Menu looking exactly the way we want, we are ready to change the appearance of the drop down menu. We have already changed the background of the drop down on hover using the background color selector in the Template Edit page. But this did not change the background color when we are not hovering our cursor over the menu item.

To change the non-hover drop down background color, scroll down in the template.css file to the rocnavmenu Navigation Drop Down section:

/* Navigation - Dropdowns */

.menutop .fusion-submenu-wrapper ul {

          background: #fff;

Change the bolded line color to a light blue like #aaf. Then click on APPLY, then PREVIEW to verify the change.

Changing the Drop Down Text Font Size and Weight

The default font size is pretty small making these submenu items difficult to read. This can be fixed by adding a couple of lines to the template.css as shown in bold below:

 

/* Navigation - Dropdowns */

.menutop .fusion-submenu-wrapper ul {

          background: #aaf;

        font-size: 1.1em;

        font-weight: bold;

 

Changing the Drop Down Font Color

The default text color on the Drop Down is a medium gray (color: #4b4b4b). Scroll down to this line:

.menutop ul li > .item {

          color: #4b4b4b;

Then change the color to a dark blue such as color: #448;

Then click APPLY, then PREVIEW.

 

Changing the Drop Down Hover Font Color

To change the Drop Down Hover font color to match the rest of the menu, scroll down to Navigation – Drop Downs section and find the following lines:

 

.menutop ul li > a.item:hover, .menutop ul li.f-menuparent-itemfocus > a.item, .menutop li.active > span.item,

.menutop ul li.f-menuparent-itemfocus > span.item, .menutop .fusion-js-subs ul li.active > a{

          background: url(../images/universal-gradient.png) 0px 0px repeat-x #0a97d3;

          color: #fff;

Change the default color from white (#fff) to light blue (#aaf). Then Click APPLY, then PREVIEW.

 

Changing the HOME Menu Item Text Color.

The last challenge we are faced with is fixing the Home Menu Item color. The problem is that when viewers go to a page other than the HOME page, it is difficult for them to see the HOME page Menu Item:

This is because the font color for the HOME page is almost the same as our new background color.

To fix this problem, we need to find out where this dark blue text color is being called out. It does not appear to be anywhere in the template.css sheet. Therefore, we will go back to the Template Edit screen and see if we can find it there.

Go to the Settings Section. Sadly, it is being controlled by the headline color picker.

There was no place to control the HOME menu item text color separate from the Main Title text color. So the only solution was to choose a color which is dark enough for the title text yet light enough to show the home menu item when covered in a dark blue background. In the end, we used #4b0 which is a medium green. We also set the Green color in the header text to #4b0:

Below is what the HOME menu tab looks like when on a page other than the home page:

 

Problems?

You may need to disable the regular main menu module if in nav position.

For other problems, read the Rocket Themes RokNavMenu forum:

http://www.rockettheme.com/forum/index.php?f=208&rb_v=viewforum

 

In the next article, we will cover how to add a slide show to the front page of your Cloud Base 2 website.