tel: +2348055401551 (sms, whatsapp)
skype: tokunboajewole

Cloudbase Free Joomla Template tutorial: change the background color of the drop down menu sub-item

Demo server used for this tutorial runs Joomla 1.5.26 and the Cloudbase template for Joomla 1.5 is installed and activated. In this tutorial, I would be changing the background-color of the menu sub-item and its hover-color.

First we change the background-color of the drop down menu sub-item.

The file to edit is: mega.css(cloudbase/css/menu/mega.css). Note: below, the color is dark / greyish.

Screenshot2

Goto line#188-191, and edit as follows:

before:

.childcontent-inner {
background: #333333;
border: 1px solid #666666;
color: #ccc;
}

and after: lets lighten the background up a little bit, and make it green.

.childcontent-inner {
background: #33CC33; /* 33CC33 is green */
border: 1px solid #666666;
color: #ccc;
}

this is what it looks like after the above changes:

Screenshot3

Now, I want to change the menu-subitem's hover-color. The file to edit is mega.css(cloudbase/css/menu/mega.css).

Goto line#177:

before: ul.level1 li.over{ background: #444444;}
after: ul.level1 li.over{ background: #f5a73d;} /* this color is orange */

Screenshot4

thats all folks!!!

Add comment


Security code
Refresh

I use Linux 24x7

Recent Comments