Joomla Templates Club 406,261 posts

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#148849

I have a localsite that I am redesigning the JA kyanite II template for. I want to simply change colors of many of the rollover elements, but I am having issues. While I have the correct rollover color (white), it changes the rollover color of all the menu headings. As you can see, I only would like to change the rollover to white for the bottom child elements. I would like to keep the active and rollover for the other elements black since it will show better on yellow. Please let me know where in the css to change this, as I have been trying for hours and hours to figure it out. Thanks!

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#333509

Please follow the entry http://wiki.joomlart.com/wiki/JA_Template_Framework/FAQs#Mega_Menu

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#334886

I have already checked the link you provided and it has not been helpful in what I am trying to do. Please look at the image that I attached previously. I need to have the colors correspond and your css code changes all the colors…I am not a CSS master but I’m not an amateur either. I need your help!!!

In mega.css, about line 170 or so, this is what I want:
ul.level1 li.over, ul.level1 li.haschild-over { background: #000000; color: #FFFFFF; }

The background changes fine, but the text color remains black. I want the text white just for the rollover only. Please help asap!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#335403

Dear

Please open the file mega.css: and find codes as following:

ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #e6e6e6;
font-weight: normal;
padding: 5px;
height: auto;
}

pls try to adjust the color in above style:

or pls give me link the administrator account and the link to your site, i make this for u

Thanks

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#335515

Please check your messages…I sent you my site info since the above did not work for me. Thanks!

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#335999

I have not heard back yet regarding the update to the css files. I’m on a strict deadline for getting this done and I’m running out of time. Please help asap; I already sent a private message with my site details to fix the issues I’m having.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#336079

Dear erickla36!

i try to resolve this issue, but at the moment i could access the site because the internet is slowly 🙁

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#336468

It’s been about a week and still no changes – what is the hold up? I need to get this site up this week and these changes must be fixed asap. PLEASE HELP!!

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#336653

Hello erickla36

First of all let me apologize for the delay.
Ok let’s begin. Please do what I’m saying and then let me know if that’s what you want:

file mega.css:

ul.level1 li.mega a.mega{
color:#FFFFFF /* color for subchild menus just like tienhc said*/
}

ul.level0 li.mega a.mega{
color:#000000 /* I’m not sure about the color you want. This line will change the color of first level */
}

Please give me some feedback.
Best regards.

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#336658

This changes the font color to white for all elements…I only want it white on hover/rollover – see the attached image…all text should be black – on hover, background text color should be black and font should be white (in the image the background is blue just for testing)

For the sub menu (see image, bottom right), I would like white font as pictured – on hover/rollover, text background is white and text is black

It seems css is changing colors for all elements, but these need to be separate to fit the color scheme.

Here’s my mega.css:

.ja-megamenu { margin: 0; padding: 0; }

ul.megamenu { margin: 10px; /* menu’s gutter */ }

/* lv – 0
———————————–*/
/* Styling —*/
ul.level0 {
float: left;
margin: 0;
padding: 0;
}

ul.level0 li.mega {
background: url(../../images/mainnav-sep.gif) no-repeat right top;
display: block;
float: left;
margin: 0;
padding: 0;
height: 48px;
}

ul.level0 li.mega a.mega {
color/: #000;
display: block;
font-weight: bold;
margin: 0;
padding: 0 15px;
height: 48px;
text-decoration: none;
}

* html ul.level0 li.mega a.mega { height: auto; margin-bottom: 8px; }

ul.level0 li span.menu-title {
}

ul.level0 li.over, ul.level0 li.haschild-over,
ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background: url(../../images/mainnav-bg.gif) no-repeat -50px -48px;
color: #000;
}

ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background-position: 0 -48px;
}

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {}

ul.level0 li.active, ul.level0 li.active.first {
background: url(../../images/mainnav-bg.gif) no-repeat -450px -48px;
color: #000;
}

ul.level0 li.active.first { background-position: -403px -48px; }

ul.level0 li.over span.menu-title,
ul.level0 li.haschild-over span.menu-title,
ul.level0 li.active span.menu-title {
}

/* lv – 1 and below
———————————–*/
/* Layout —*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.ja-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level0 .childcontent { margin-top: -3px; margin-left: -4px; }
ul.level1 .childcontent { margin: -2em 0 0 160px; }

/* Columns —*/
.megacol { float: left;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }

.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }
*/

/* Styling —*/
ul.level1 li.mega {
height: auto;
background: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #fff;
font-weight: normal;
padding: 5px;
height: auto;
}

ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0 !important; font-size: 100%; }

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
color: #FFFFFF;
}

ul.level1 li.over, ul.level1 li.haschild-over { background: #0000FF; color: #FFFFFF; }

ul.level1 li.group { background: none; }

ul.level1 li.over.first, ul.level1 li.haschild-over.first { background: #0000FF; color: #fff; }

ul.level1 li.active, ul.level1 li.active.first { background: none; color: #fff; }

/* CHILD CONTENT
———————————–*/
.childcontent {
color: #fff;
z-index: 999;
padding-left: 8px;
padding-right: 8px;
}

.childcontent-inner-l, .childcontent-inner-r {
background: url(../../images/mega-bg.png) no-repeat bottom left;
width: 8px;
height: 100%;
display: block;
position: absolute;
top: 0;
}

.childcontent-inner-l { background-position: bottom left; left: 0; }
.childcontent-inner-r { background-position: bottom right; right: 0; }

.childcontent-inner { background: url(../../images/mega-bg-m.png) repeat-x center bottom; }

ul.level1 .childcontent {
border: 1px solid #000;
padding-left: 0;
padding-right: 0;
background-color/: #000000;
color: #FFFFFF;
}

ul.level1 .childcontent-inner-l, ul.level1 .childcontent-inner-r { display: none; }
ul.level1 .childcontent-inner { background: #0A0A0A; }

.childcontent .ja-moduletable {
color: #000000;
border-bottom: 0;
line-height: 1.5;
margin: 5px 0;
padding: 0;
}

.childcontent .ja-moduletable h3 {
background: none;
color: #fff;
border-bottom: 1px solid #999;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 5px;
text-indent: 5px;
text-transform: none;
font-size: 115%;
}

.childcontent .ja-moduletable .ja-box-ct {
padding: 5px;
}

.childcontent .ja-moduletable a {
color: #000000;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

.childcontent .ja-moduletable li {
background: url(../../images/bullet2.gif) no-repeat 2px 7px !important;
margin-bottom: 5px;
}

/* Grouped — */
div.group { }

.group-title { overflow: hidden; }

.group-title .menu-title {
color: #000;
text-transform: uppercase;
font-weight: bold;
font-size: 115%;
}

.group-title .menu-desc {
color: #333333;
padding-left: 0 !important;
}

.group-content .ja-moduletable,
.group-content ul.megamenu {
margin: 5px; /* Group-content’s gutter*/
}

/* reset — */
.childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}

---

Attachments:

1. 

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#336674

Ok.
So first find this block (maybe line 156):

ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #FFF;
font-weight: normal;
padding: 5px;
height: auto;
}

Erase that and substitute with this one:
ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #000; /* different color */
font-weight: normal;
padding: 5px;
height: auto;
}

ul.level1 li.mega a.mega:hover { /* new css code. doesn’t exist in original mega.css */
color:#fff;
}

See if that’s what you want and then I’ll try to solve for submenu.

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#336815

Thanks a bunch! I see that the rollover font changes to white as you indicated in the code. However, I notice that the font changes back to black but the background color stays when sub menu is selected.

Check out the site at:

http://www.kanjamleague.com

For example, go to Tournaments -> Register a Team -> and rollover black box to the right…as you can see, the text changes back to black but background stays highlighted in black…cannot read “Register a Team” anymore.

Also, I need the sub menu items (for example, tournaments, register a team, then list of 7 links) changed – must be separate from other elements. Font should be white all the time // on rollover, font background is white and font is black.

All “active” links should remain in their highlighted “Rollover/hover” state – could not get this to work correctly either.

I’ve had such a headache getting this to work. If you can get these items to work correctly and look right, then I’d be sooooo happy!

Thanks a lot for all your help, it is greatly appreciated!!!

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#336911

Hi erickla36

After the code I previously gave you, please insert this one. Notice that I used random colors.

ul.level1 li.haschild-over a.over{
color:#000!important;
}

ul.level1 li.haschild .childcontent ul.level2 li.mega a.mega{
color:#fff!important;
}

ul.level1 li.mega ul.level2 li.mega a.mega:hover{
color:#f00!important;
}

Give me some feedback please.

[erickla36 Friend erickla36Join date: January 2010Posts: 10Downloads:0Uploads:2]

#336934

While the code you provided changes the hover colors for the “Tournaments” section, it still does exactly what it does before. Look again at http://www.kanjamleague.com. I updated the code for mega.css as indicated.

As you can see the font will change on rollover and the background color will stay, but the font color changes back to default (black), making it invisible when the sub menu is selected. Go to my site, rollover ‘Tournaments, then ‘Register a team for 2010 Winter Klassic’ – when you rollover the submenu to the right, you can see the background on “Register a team…” stays black, but font changes back to black…it is not visible anymore in this case.

Now the colors are different than that of the “Leagues” menu – everything should be the same. The items that need to be changed would be the third tier (such as ‘Tournaments, Register a team…, Register a team now!”)…this font is still black…needs to be separate from other elements – should be white font all the time; on rollover change to white font background with black font.

Here is the updated MEGA.CSS (I have all the added lines commented)

/*
# ————————————————————————
# JA Kyanite II – Version 1.1 – Licence Owner JA179820
# ————————————————————————
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license – Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
# ————————————————————————
*/

.ja-megamenu { margin: 0; padding: 0; }

ul.megamenu { margin: 10px; /* menu’s gutter */ }

/* lv – 0
———————————–*/
/* Styling —*/
ul.level0 {
float: left;
margin: 0;
padding: 0;
}

ul.level0 li.mega {
background: url(../../images/mainnav-sep.gif) no-repeat right top;
display: block;
float: left;
margin: 0;
padding: 0;
height: 48px;
}

ul.level0 li.mega a.mega {
color/: #000;
display: block;
font-weight: bold;
margin: 0;
padding: 0 15px;
height: 48px;
text-decoration: none;
}

* html ul.level0 li.mega a.mega { height: auto; margin-bottom: 8px; }

ul.level0 li span.menu-title {
}

ul.level0 li.over, ul.level0 li.haschild-over,
ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background: url(../../images/mainnav-bg.gif) no-repeat -50px -48px;
color: #000;
}

ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background-position: 0 -48px;
}

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {}

ul.level0 li.active, ul.level0 li.active.first {
background: url(../../images/mainnav-bg.gif) no-repeat -450px -48px;
color: #000;
}

ul.level0 li.active.first { background-position: -403px -48px; }

ul.level0 li.over span.menu-title,
ul.level0 li.haschild-over span.menu-title,
ul.level0 li.active span.menu-title {
}

/* lv – 1 and below
———————————–*/
/* Layout —*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.ja-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level0 .childcontent { margin-top: -3px; margin-left: -4px; }
ul.level1 .childcontent { margin: -2em 0 0 160px; }

/* Columns —*/
.megacol { float: left;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }

.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }
*/

/* Styling —*/
ul.level1 li.mega {
height: auto;
background: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #000; /* different color */
font-weight: normal;
padding: 5px;
height: auto;
}

ul.level1 li.mega a.mega:hover { /* new css code. doesn’t exist in original mega.css */
color: #FFF;
}

ul.level1 li.haschild-over a.over{ /* new css code. doesn’t exist in original mega.css */
color:#000!important;
}

ul.level1 li.haschild .childcontent ul.level2 li.mega a.mega{ /* new css code. doesn’t exist in original mega.css */
color:#fff!important;
}

ul.level1 li.mega ul.level2 li.mega a.mega:hover{ /* new css code. doesn’t exist in original mega.css */
color:#f00!important;
}

ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0 !important; font-size: 100%; }

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
color: #FFFFFF;
}

ul.level1 li.over, ul.level1 li.haschild-over { background: #000000; color: #FFFFFF; }

ul.level1 li.group { background: none; }

ul.level1 li.over.first, ul.level1 li.haschild-over.first { background: #000000; color: #fff; }

ul.level1 li.active, ul.level1 li.active.first { background: none; color: #fff; }

/* CHILD CONTENT
———————————–*/
.childcontent {
color: #fff;
z-index: 999;
padding-left: 8px;
padding-right: 8px;
}

.childcontent-inner-l, .childcontent-inner-r {
background: url(../../images/mega-bg.png) no-repeat bottom left;
width: 8px;
height: 100%;
display: block;
position: absolute;
top: 0;
}

.childcontent-inner-l { background-position: bottom left; left: 0; }
.childcontent-inner-r { background-position: bottom right; right: 0; }

.childcontent-inner { background: url(../../images/mega-bg-m.png) repeat-x center bottom; }

ul.level1 .childcontent {
border: 1px solid #000;
padding-left: 0;
padding-right: 0;
background-color/: #000000;
color: #FFFFFF;
}

ul.level1 .childcontent-inner-l, ul.level1 .childcontent-inner-r { display: none; }
ul.level1 .childcontent-inner { background: #0A0A0A; }

.childcontent .ja-moduletable {
color: #000000;
border-bottom: 0;
line-height: 1.5;
margin: 5px 0;
padding: 0;
}

.childcontent .ja-moduletable h3 {
background: none;
color: #fff;
border-bottom: 1px solid #999;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 5px;
text-indent: 5px;
text-transform: none;
font-size: 115%;
}

.childcontent .ja-moduletable .ja-box-ct {
padding: 5px;
}

.childcontent .ja-moduletable a {
color: #000000;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

.childcontent .ja-moduletable li {
background: url(../../images/bullet2.gif) no-repeat 2px 7px !important;
margin-bottom: 5px;
}

/* Grouped — */
div.group { }

.group-title { overflow: hidden; }

.group-title .menu-title {
color: #000;
text-transform: uppercase;
font-weight: bold;
font-size: 115%;
}

.group-title .menu-desc {
color: #333333;
padding-left: 0 !important;
}

.group-content .ja-moduletable,
.group-content ul.megamenu {
margin: 5px; /* Group-content’s gutter*/
}

/* reset — */
.childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}

[vitormarques Friend vitormarquesJoin date: March 2010Posts: 70Downloads:0Uploads:0 Thanked: 19 times in 18 posts]

#336940

Hi again

Earlier I used random colors.. that’s why all text was black. Now please try this code (this is the entire mega.css):

/*
# ————————————————————————
# JA Kyanite II – Version 1.1 – Licence Owner JA179820
# ————————————————————————
# Copyright (C) 2004-2009 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license – Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites: http://www.joomlart.com – http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
# ————————————————————————
*/

.ja-megamenu { margin: 0; padding: 0; }

ul.megamenu { margin: 10px; /* menu’s gutter */ }

/* lv – 0
———————————–*/
/* Styling —*/
ul.level0 {
float: left;
margin: 0;
padding: 0;
}

ul.level0 li.mega {
background: url(../../images/mainnav-sep.gif) no-repeat right top;
display: block;
float: left;
margin: 0;
padding: 0;
height: 48px;
}

ul.level0 li.mega a.mega {
color/: #000;
display: block;
font-weight: bold;
margin: 0;
padding: 0 15px;
height: 48px;
text-decoration: none;
}

* html ul.level0 li.mega a.mega { height: auto; margin-bottom: 8px; }

ul.level0 li span.menu-title {
}

ul.level0 li.over, ul.level0 li.haschild-over,
ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background: url(../../images/mainnav-bg.gif) no-repeat -50px -48px;
color: #000;
}

ul.level0 li.over.first, ul.level0 li.haschild-over.first {
background-position: 0 -48px;
}

ul.level0 li.haschild a.mega span.menu-title,
ul.level0 li.haschild-over a.mega span.menu-title {}

ul.level0 li.haschild a.mega span.menu-desc,
ul.level0 li.haschild-over a.mega span.menu-desc {}

ul.level0 li.active, ul.level0 li.active.first {
background: url(../../images/mainnav-bg.gif) no-repeat -450px -48px;
color: #000;
}

ul.level0 li.active.first { background-position: -403px -48px; }

ul.level0 li.over span.menu-title,
ul.level0 li.haschild-over span.menu-title,
ul.level0 li.active span.menu-title {
}

/* lv – 1 and below
———————————–*/
/* Layout —*/
.ja-megamenu li.mega .childcontent { display: block; height: auto; position: absolute; }

.ja-megamenu li.mega .childcontent,
.ja-megamenu li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.haschild-over li.mega .childcontent ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .childcontent { left: -999em; /*hide the menu*/ }

.ja-megamenu li.haschild-over .childcontent,
.ja-megamenu li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent { left: auto; /*show on parent:hover*/ }

.ja-megamenu li.mega .right,
.ja-megamenu li.haschild-over li.mega .right,
.ja-megamenu li.mega li.haschild-over li.mega .right ,
.ja-megamenu li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over li.mega .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over li.mega .right { right: auto; /*hide the menu*/ }

.ja-megamenu li.haschild-over .right
{ right: 0; /*show on parent:hover*/ }
.ja-megamenu li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .right,
.ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .right
{ right: 12em; /*show on parent:hover*/ }

ul.level1 li.mega { float: none; }

ul.level0 .childcontent { margin-top: -3px; margin-left: -4px; }
ul.level1 .childcontent { margin: -2em 0 0 160px; }

/* Columns —*/
.megacol { float: left;}
/*
.cols1 .megacol { width: 100px }
.cols2 .megacol { width: 50%; }
.cols3 .megacol { width: 33.3%; }
.cols4 .megacol { width: 25%; }
.cols5 .megacol { width: 20%; }
.cols6 .megacol { width: 16.6%; }
.cols7 .megacol { width: 14.2%; }
.cols8 .megacol { width: 12.5%; }
.cols9 .megacol { width: 11.1%; }
.cols10 .megacol { width: 10%; }

.ja-megamenu .cols1 { width: 200px; }
.ja-megamenu .cols2 { width: 400px; }
.ja-megamenu .cols3 { width: 600px; }
.ja-megamenu .cols4 { width: 800px; }
.ja-megamenu .cols5 { width: 1000px; }
.ja-megamenu .cols6 { width: 1200px; }
.ja-megamenu .cols7 { width: 1400px; }
.ja-megamenu .cols8 { width: 1800px; }
.ja-megamenu .cols9 { width: 2000px; }
.ja-megamenu .cols10 { width: 2200px; }
*/

/* Styling —*/
ul.level1 li.mega {
height: auto;
background: none;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}

ul.level1 li.first { border-top: 0; }

ul.level1 li.mega a.mega {
background: none;
border: 0;
color: #000; /* different color */
font-weight: normal;
padding: 5px;
height: auto;
}

ul.level1 li.mega a.mega:hover { /* new css code. doesn’t exist in original mega.css */
color: #FFF;
}

ul.level1 li.haschild-over a, ul.level1 li.haschild-over a.over{ /* new css code. doesn’t exist in original mega.css */
color:#fff!important;
}

ul.level1 li.haschild .childcontent ul.level2 li.mega a.mega{ /* new css code. doesn’t exist in original mega.css */
color:#fff!important;
}

ul.level1 li.mega ul.level2 li.mega a.mega:hover{ /* new css code. doesn’t exist in original mega.css */
color:#f00!important;
}

ul.level1 li.mega a.mega span.menu-title { background: none; padding: 0 !important; font-size: 100%; }

ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
color: #FFFFFF;
}

ul.level1 li.over, ul.level1 li.haschild-over { background: #000000; color: #FFFFFF; }

ul.level1 li.group { background: none; }

ul.level1 li.over.first, ul.level1 li.haschild-over.first { background: #000000; color: #fff; }

ul.level1 li.active, ul.level1 li.active.first { background: none; color: #fff; }

/* CHILD CONTENT
———————————–*/
.childcontent {
color: #fff;
z-index: 999;
padding-left: 8px;
padding-right: 8px;
}

.childcontent-inner-l, .childcontent-inner-r {
background: url(../../images/mega-bg.png) no-repeat bottom left;
width: 8px;
height: 100%;
display: block;
position: absolute;
top: 0;
}

.childcontent-inner-l { background-position: bottom left; left: 0; }
.childcontent-inner-r { background-position: bottom right; right: 0; }

.childcontent-inner { background: url(../../images/mega-bg-m.png) repeat-x center bottom; }

ul.level1 .childcontent {
border: 1px solid #000;
padding-left: 0;
padding-right: 0;
background-color/: #000000;
color: #FFFFFF;
}

ul.level1 .childcontent-inner-l, ul.level1 .childcontent-inner-r { display: none; }
ul.level1 .childcontent-inner { background: #0A0A0A; }

.childcontent .ja-moduletable {
color: #000000;
border-bottom: 0;
line-height: 1.5;
margin: 5px 0;
padding: 0;
}

.childcontent .ja-moduletable h3 {
background: none;
color: #fff;
border-bottom: 1px solid #999;
margin-left: 5px;
margin-right: 5px;
padding-bottom: 5px;
text-indent: 5px;
text-transform: none;
font-size: 115%;
}

.childcontent .ja-moduletable .ja-box-ct {
padding: 5px;
}

.childcontent .ja-moduletable a {
color: #000000;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}

.childcontent .ja-moduletable a:hover,
.childcontent .ja-moduletable a:focus,
.childcontent .ja-moduletable a:active {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}

.childcontent .ja-moduletable ul:first-child {
margin-top: 0 !important;
}

.childcontent .ja-moduletable li {
background: url(../../images/bullet2.gif) no-repeat 2px 7px !important;
margin-bottom: 5px;
}

/* Grouped — */
div.group { }

.group-title { overflow: hidden; }

.group-title .menu-title {
color: #000;
text-transform: uppercase;
font-weight: bold;
font-size: 115%;
}

.group-title .menu-desc {
color: #333333;
padding-left: 0 !important;
}

.group-content .ja-moduletable,
.group-content ul.megamenu {
margin: 5px; /* Group-content’s gutter*/
}

/* reset — */
.childcontent ul.megamenu .ja-moduletable {
padding: 0;
}

.childcontent ul.megamenu .ja-moduletable h3 {
margin-left: 0;
margin-right: 0;
}

[Author]

Posts