How to change background colour of J! 4.x menu items? Topic is solved

[jacksprat]

Is this possible?

[sozzled]

Is your question about the standard J! breadcrumbs module for Cassiopeia?

[brian]

Anything is possible.

[jacksprat]

This refers to Cassiopeia Joomla 4.0. I miss spoke, the change would affect the background color for the main menu.

It is a simple Website for a small motel. Moving from Joomla 3 to 4. Besides a home page, the menu has three tabs - about us, rates & room photos, room booking.

Since the motel is called The Green Roof Inn, an appropriate color option is preferred.

[sozzled]

If you have not already done so, create a custom CSS file named user.css (see How to Create Custom CSS with Cassiopeia in Joomla 4 or watch Tim Davis' excellent video at https://www.[youtube].com/watch?v=0c2iNnszWuc for instructions how do to this) and add the following lines at the end of that file:

Code: Select all

.navbar ul li a {
    background-color:  green;
}

Choose a more appropriate colour if you wish.

[jacksprat]

Thanks

[jacksprat]

Follow up comment.
I experimented with my css and managed to get my Website to display the preferred color.
I added the following code in the template.css and user.css.
.container-header {
position: relative;
z-index: 10;
margin-bottom: 20px;
background-color: #0f8110;
background-image: none
box-shadow: none
Not even sure if all of this code is necessary, but if it ain't broken, I am staying put.
Now how do I keep this color when Joomla upgrades? Clone the template and make it the default? Some other steps?

[sozzled]

I added the following code in the template.css and user.css. ...
Now how do I keep this color when Joomla upgrades?

1) Do not modify original software (e.g. the file template.css); customised CSS rules should be added to the file user.css.

2) If you have customised CSS rules in the file user.css they will be preserved when you update J!.

Easy!

As for the CSS rules you described

Code: Select all

.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    background-color: #0f8110;
    background-image: none;
    box-shadow: none;
}

... if you're happy with them ... it doesn't matter what I think ...

[jacksprat]

Sounds like a plan. As you say, easy!

[GarooW]

If you have not already done so, create a custom CSS file named user.css (see How to Create Custom CSS with Cassiopeia in Joomla 4 or watch Tim Davis' excellent video at https://www.[[youtube]].com/watch?v=0c2iNnszWuc for instructions how do to this) and add the following lines at the end of that file:

Code: Select all

.navbar ul li a {
    background-color:  green;
}

Choose a more appropriate colour if you wish.

Cant open the [youtube] link but managed to find the video ("Where to Put Custom CSS in the Joomla 4 Template Cassiopeia") : it's really useful

[GarooW]

Ok, for some reason when you type [youtube], it shows in [ ]
even in a [youtube] url so it wont work

[pe7er]

Ok, for some reason when you type [[youtube]], it shows in [ ]
even in a [[youtube]] url so it wont work

We have had massive amounts of spam for videos posted at that platform.
Therefore links to that platform are changed automatically, making the spam links worthless.

To watch the video, goto you tube dot com and put
watch?v=0c2iNnszWuc
behind the domain name.

[jacksprat]

I have used these steps to change menu colors on three different websites. Work in Fire Fox instead of Chrome. Not sure why, but the changes only show immediately in FF.
1. did this - If you have not already done so, create a custom CSS file named user.css (see How to Create Custom CSS with Cassiopeia in Joomla 4.

2. Drop this in the user.css you created -
.container-header {
position: relative;
z-index: 10;
margin-bottom: 20px;
background-color: #0f8110;
background-image: none;
box-shadow: none;
}

3. Change the #0f8110 to any color code you prefer TA DA!

[sozzled]

Yes