Joomla Templates Club 406,261 posts

[teetide Friend teetideJoin date: December 2007Posts: 256Downloads:0Uploads:4 Thanks: 19 Thanked: 6 times in 1 posts]

#127953

I’m trying to add some color to the tabs in the menu bar.

I want the ACTIVE menu tab to have the gray theme like the Home button and gray underline on the demo.

I want the NON-ACTIVE menu tabs to have an orange background instead of white. Click on the Technology tab in the demo template and you’ll see what I’m talking about. I want all the NON-ACTIVE tabs to look like the orange Technology tab.

How do I do this?

Thanks.
TeeTide

[unixboymd Friend unixboymdJoin date: February 2006Posts: 95Downloads:0Uploads:5 Thanks: 13 Thanked: 22 times in 1 posts]

#246973

What version Joomla! 1.5 or 1.0?

For 1.0 look in your template directory in the ja_menu sub-folder. You’ll need to edit the css file that is appropriate for whatever menu you have configured.

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#246974

Do you mean something like this one?

---

Attachments:

1. 

[teetide Friend teetideJoin date: December 2007Posts: 256Downloads:0Uploads:4 Thanks: 19 Thanked: 6 times in 1 posts]

#246990

Yes kashxo, that’s exactly what I’m after!

[teetide Friend teetideJoin date: December 2007Posts: 256Downloads:0Uploads:4 Thanks: 19 Thanked: 6 times in 1 posts]

#246991

Yes kashxo, that’s exactly what I’m after!

[kashxo Friend kashxoJoin date: April 2007Posts: 605Downloads:0Uploads:21 Thanks: 11 Thanked: 78 times in 40 posts]

#247055

Let’s start by opening your ja.splitmenu.css, now go to line 44th, you’ll see the block of code:
<blockquote>
#ja-splitmenu a:hover, #ja-splitmenu a:active, #ja-splitmenu a:focus {
background:#EBF2F9;
color:#333333;
}
</blockquote>
Change them to:
<blockquote>
#ja-splitmenu a:hover, #ja-splitmenu a:active, #ja-splitmenu a:focus {
background:#333333;
color:#FFFFFF;
}
</blockquote>
And next at line 31st:

<blockquote>#ja-splitmenu a {
background:#FFFFFF;
border-color:1px solid #FFFFFF;
color:#333333;
display:block;
float:left;
font-size:92%;
padding:4px 8px 3px;
text-decoration:none;
text-transform:uppercase;
}</blockquote>

Change to:
<blockquote>
#ja-splitmenu a {
background:#E77B13;
border-color:1px solid #FFFFFF;
color:#FFFFFF;
display:block;
float:left;
font-size:92%;
padding:4px 8px 3px;
text-decoration:none;
text-transform:uppercase;
}
</blockquote>

That should did it. Goodluck 🙂

1 user says Thank You to kashxo for this useful post

1. teetide

[teetide Friend teetideJoin date: December 2007Posts: 256Downloads:0Uploads:4 Thanks: 19 Thanked: 6 times in 1 posts]

#247060

Fantastic! Thank you.

[biodunb Friend biodunbJoin date: January 2008Posts: 3Downloads:3Uploads:0]

#311082

the last tab does not change colour remain white and does not havea menu item assigned to it

hi thanks this works but the last menu tab item remains white and if you add another menu item it goes over to the next row ! with the menu tab before it white ! isthere a workaround

[Author]

Posts