Custom text color for only one menu item

[devmail]

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.

[sozzled]

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?

[devmail]

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.

[sozzled]

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

[devmail]

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?v ... 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.

[sozzled]

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.

[devmail]

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

[sozzled]

Do you mean that you want to change the colour of the font for the menu item with the text "Kapscolat"?

[venci]

Hi,
For the menu item with text "Kapscolat"

Code: Select all

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

[devmail]

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?

[sozzled]

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.

[devmail]

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.