Custom text color for only one menu item

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Custom text color for only one menu item

Postby devmail » Fri Feb 09, 2018 2:03 pm

Hi!

I am new to Joomla. I have a main menu containing several menu items. For one of them, I want to change it's text color to something else than the template's default. Could you please help me to do it? Joomla version is 3.7.5.

Thanks.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4223
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Custom text color for only one menu item

Postby sozzled » Fri Feb 09, 2018 6:18 pm

1) J! 3.7.5 is old (it was released in August last year) and the current version is J! 3.8.5.

2) You can change the colour of one menu item with CSS (if you know how it identify the element ID or some other selection method). You can find out more about this element if you use the "Inspector" feature built into your web browser (e.g. press the F12 key). Typically, the CSS would look something like:

<element-name> {
color: <new-colour-value>;
}

I don't know the <element-name> in your case and I don't know the <new-colour-value> that you want to use. Every template is different; every website is different.

Does this help?
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Re: Custom text color for only one menu item

Postby devmail » Fri Feb 09, 2018 10:56 pm

sozzled wrote:1) J! 3.7.5 is old (it was released in August last year) and the current version is J! 3.8.5.

2) You can change the colour of one menu item with CSS (if you know how it identify the element ID or some other selection method). You can find out more about this element if you use the "Inspector" feature built into your web browser (e.g. press the F12 key). Typically, the CSS would look something like:

<element-name> {
color: <new-colour-value>;
}

I don't know the <element-name> in your case and I don't know the <new-colour-value> that you want to use. Every template is different; every website is different.

Does this help?


I will update it.
I was able to identify the CSS file with Chrome "Inspector" and I could modify the color with it, but it changed the color of all items in the menu. I was not able to identify any special ID of the given items inside the menu. Is there a way to modify CSS settings just for one item, and let the others untouched?

Thank you.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4223
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Custom text color for only one menu item

Postby sozzled » Fri Feb 09, 2018 11:02 pm

devmail wrote:Is there a way to modify CSS settings just for one item, and let the others untouched?
Short answer: yes. If you can identify the element then you can change the [CSS just for that] element. As I wrote earlier, I don't know what you're referring to, specifically, and so my advice is only general. If we knew what, specifically, you were trying to describe, then we might be able to recommed more specific advice
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Re: Custom text color for only one menu item

Postby devmail » Sat Feb 10, 2018 9:46 am

sozzled wrote:
devmail wrote:Is there a way to modify CSS settings just for one item, and let the others untouched?
Short answer: yes. If you can identify the element then you can change the [CSS just for that] element. As I wrote earlier, I don't know what you're referring to, specifically, and so my advice is only general. If we knew what, specifically, you were trying to describe, then we might be able to recommed more specific advice


This is the demo of the template I am using:
http://demo.joomlashine.com/index.php?view=demo&_ga=2.218678553.160131556.1518255828-2145551365.1518255828#jsn_solid2

We are talking about the main menu under the logo. The menu item on the production site behaves the same as the "Home" menu item on the demo page. It's text color should be changed.

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4223
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Custom text color for only one menu item

Postby sozzled » Sat Feb 10, 2018 10:54 am

I am not interested in a "demo" of the Joomlashine template. If you are only interested in a "demo" then you're wasting our time; for questions about the "demo" contact Joomlashine. For questions about your own website (that you cannot answer) a link to your website might be more useful.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Re: Custom text color for only one menu item

Postby devmail » Sat Feb 10, 2018 11:54 am

sozzled wrote:I am not interested in a "demo" of the Joomlashine template. If you are only interested in a "demo" then you're wasting our time; for questions about the "demo" contact Joomlashine. For questions about your own website (that you cannot answer) a link to your website might be more useful.


Link: [ redacted ]

The color of the last menu item of the main menu should be changed
Last edited by toivo on Sat Feb 10, 2018 11:59 pm, edited 1 time in total.
Reason: mod note: URL removed on request

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4223
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Custom text color for only one menu item

Postby sozzled » Sat Feb 10, 2018 2:51 pm

Do you mean that you want to change the colour of the font for the menu item with the text "Kapscolat"?
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

venci
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Sat Nov 17, 2012 6:10 am

Re: Custom text color for only one menu item

Postby venci » Sat Feb 10, 2018 3:56 pm

Hi,
For the menu item with text "Kapscolat"

Code: Select all

li.last a.jsn-nodescription {
   color: #F00 !important;
}

devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Re: Custom text color for only one menu item

Postby devmail » Sat Feb 10, 2018 10:25 pm

venci wrote:Hi,
For the menu item with text "Kapscolat"

Code: Select all

li.last a.jsn-nodescription {
   color: #F00 !important;
}


Thank your for the code, but where should it be pasted? When I add it to the template's custom.css, nothing happens. Clearing cache, no change. Any idea?

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4223
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Custom text color for only one menu item

Postby sozzled » Sat Feb 10, 2018 10:33 pm

You probably want to add these lines to the end of the file ../templates/jsn_solid_pro/css/colors/blue.css. Your template does not load a custom.css file.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

devmail
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Fri Feb 09, 2018 2:00 pm

Re: Custom text color for only one menu item

Postby devmail » Sat Feb 10, 2018 10:46 pm

sozzled wrote:You probably want to add these lines to the end of the file ../templates/jsn_solid_pro/css/colors/blue.css. Your template does not load a custom.css file.


Thank you for your help, it's working.


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: No registered users and 4 guests