Public Forums 71,145 posts

[greinert Friend greinertJoin date: May 2014Posts: 21Downloads:5Uploads:3 Thanks: 9]

#199707

Would like the ability to make each menu item in the main menu a different color to draw attention and use the color as as marker throughout the new website. See this website for an example: http://www.polk-fl.net/

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542464

You should be able to do this by assigning each of the links a unique class, and then giving each class a different background color using CSS.

For Example:
You could create different color classes (see below), and then assign a respective class to each menu item:

.gold {
background-color: #faa732;
}

.blue {
background-color: #faa732;
}

.green {
background-color: #faa732;

Make Sense?

1 user says Thank You to TomC for this useful post

1. gamboolian

[greinert Friend greinertJoin date: May 2014Posts: 21Downloads:5Uploads:3 Thanks: 9]

#542479

Unfortunately I’m a novice with CSS. I need more details on exactly what to do. Thanks.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542481

<em>@greinert 436852 wrote:</em><blockquote>Unfortunately I’m a novice with CSS. I need more details on exactly what to do. Thanks.</blockquote>

Here is a tutorial which may assist you —> HOW TO USE MODULE CLASS SUFFIX in JOOMLA

1 user says Thank You to TomC for this useful post

1. gamboolian

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#542551

@greinert,

You can use the class suffixes then add your custom code into file /templates/your_template_name/css/custom.css (if not exists, pls create new one).

In this case, please do as following:

– Go to the Megamenu Configuration, then click to menu item and add the Extra Class. (ex: Add “home-blue” for Home menu item)

– Open file: /templates/your_template_name/css/custom.css then add this rule:

.home-blue {
background: blue;
}

I guided you to make a menu item , pls do as the same for other menu item.

Let me know if this helps

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. greinert

[greinert Friend greinertJoin date: May 2014Posts: 21Downloads:5Uploads:3 Thanks: 9]

#542657

Sorry, but the provided references are generic. Can anyone provide details on exactly where to look within Joomla Purity III or T3 templates? What commands/steps are required to make this happen? Thank you.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#542660

<em>@greinert 437070 wrote:</em><blockquote>Sorry, but the provided references are generic. Can anyone provide details on exactly where to look within Joomla Purity III or T3 templates? What commands/steps are required to make this happen? Thank you.</blockquote>

The references are relative to working within the Joomla CMS environment – of which Purity III is.

The recommendations and references provided will teach you how to work with, create and assign module classes within your site.

[greinert Friend greinertJoin date: May 2014Posts: 21Downloads:5Uploads:3 Thanks: 9]

#542663

Thanks. That was the pointer I needed. Now understand how to apply class within Megamenu.

[Author]

Posts