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

Everything to do with Joomla! 4.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.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

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

Post by jacksprat » Mon Jul 04, 2022 1:29 am

Is this possible?
Last edited by imanickam on Mon Jul 04, 2022 4:41 pm, edited 1 time in total.
Reason: Retitled the topic from "change breadcrumb background color" to reflect the help sought

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12205
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: change breadcrumb background color

Post by sozzled » Mon Jul 04, 2022 2:28 am

Is your question about the standard J! breadcrumbs module for Cassiopeia? ???
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

User avatar
brian
Joomla! Master
Joomla! Master
Posts: 12540
Joined: Fri Aug 12, 2005 7:19 am
Location: Leeds, UK
Contact:

Re: change breadcrumb background color

Post by brian » Mon Jul 04, 2022 6:06 am

Anything is possible.
"Exploited yesterday... Hacked tomorrow"
Blog http://brian.teeman.net/
Joomla Hidden Secrets http://hiddenjoomlasecrets.com/

jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

Re: change breadcrumb background color

Post by jacksprat » Mon Jul 04, 2022 12:23 pm

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.

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12205
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change background colour of J! 4.x menu items?

Post by sozzled » Mon Jul 04, 2022 6:59 pm

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.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

Re: How to change background colour of J! 4.x menu items?

Post by jacksprat » Mon Jul 04, 2022 7:09 pm

Thanks

jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

Re: How to change background colour of J! 4.x menu items?

Post by jacksprat » Tue Jul 05, 2022 12:34 am

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?

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12205
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change background colour of J! 4.x menu items?

Post by sozzled » Tue Jul 05, 2022 12:54 am

jacksprat wrote:
Tue Jul 05, 2022 12:34 am
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 ... 8)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)

jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

Re: How to change background colour of J! 4.x menu items?

Post by jacksprat » Tue Jul 05, 2022 1:18 am

Sounds like a plan. As you say, easy!

GarooW
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 13, 2022 1:36 am

Re: How to change background colour of J! 4.x menu items?

Post by GarooW » Wed Jul 13, 2022 3:08 am

sozzled wrote:
Mon Jul 04, 2022 6:59 pm
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
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Wed Jul 13, 2022 1:36 am

Re: How to change background colour of J! 4.x menu items?

Post by GarooW » Wed Jul 13, 2022 3:11 am

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

User avatar
pe7er
Joomla! Master
Joomla! Master
Posts: 23788
Joined: Thu Aug 18, 2005 8:55 pm
Location: Nijmegen, Netherlands
Contact:

Re: How to change background colour of J! 4.x menu items?

Post by pe7er » Wed Jul 13, 2022 8:18 am

GarooW wrote:
Wed Jul 13, 2022 3:11 am
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.
Kind Regards,
Peter Martin, Global Moderator
https://db8.nl - Joomla specialist, Nijmegen, Netherlands
The best website: https://the-best-website.com

jacksprat
Joomla! Explorer
Joomla! Explorer
Posts: 279
Joined: Sun Jun 08, 2008 7:46 pm

Re: How to change background colour of J! 4.x menu items?

Post by jacksprat » Wed Jul 13, 2022 4:49 pm

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!

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 12205
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: How to change background colour of J! 4.x menu items?

Post by sozzled » Wed Jul 13, 2022 4:54 pm

Yes ;)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?”
Walking the talk: https://j4xdemo.enduring.com.au
:)


Post Reply

Return to “Templates for Joomla! 4.x”