Joomla Templates Club 406,261 posts

[yolvy Friend yolvyJoin date: July 2013Posts: 27Downloads:0Uploads:10]

#189707

Hello There, I would like to know how can I make a individual link-button with different color, Please see image attached for better understanding. I

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#502199

Hi yolvy,

You can use the page class to display the menu item with different background color. The detailed steps are:

1. Open the templatesja_mendozitecssmenumega.css file, then put your page class suffixes into. The page class should have below css format:
i.e:

.red .ja-megamenu ul.level0 > li.active > a.mega {
background: red;
}

2. Go to the menu item’s backend, enter the page class suffix name (i.e red) into Page class option. Make sure you leave a space before the text.

3. Clear JAT3 cache then, and you can create as many page class as you want.

[yolvy Friend yolvyJoin date: July 2013Posts: 27Downloads:0Uploads:10]

#502346

Thanks for your reply, but doesn’t work. I deleted the grad.png and now my home link change to the default color orange, and my active link stills red. but when I clicked the link change to orange.

Now if I click the custom link with that code works, only when I press the link. What I want is to have active that color all the times, even if I click or not the link.

Now to keep my whole menu with the color red, I get back the grad.png all back to red. but that code doesn’t work.

check image to understand the issue.
Thank you.

---

Attachments:

1. 
2. 
3. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#502423

Hi yolvi,

It is my mistake. Yes, you can try on these.

1. Create the extra class for each menu item in templatesja_purity_iicssmenumega.css file. The extra class styles shoule be (i.e):

.ja-megamenu ul.level0 li.mega a.mega.red {
background: red;
}

.ja-megamenu ul.level0 li.mega a.mega.green {
background: green;
}


The color text is the extra class name.

2. Add the extra class names into Additional class option of Parameters (JA Extended) in the backend of menu items you want. Then clear JAT3 cache.

The result:

Note: You should remove the additional classes from my previous reply, and you can create as many extra class as you want.

[Author]

Posts