Changing colours on tabs and accordions

Hello,

actually, it has nothing to do with my plugin, it’s just a basic CSS knowledge, so this is not a good place where to ask questions like this.
You should try stackoverflow.com, but basically:

1. your CSS selector needs to be more specific, eg. put html or body at the beginning
2. or you can use !important at the end.

Have a nice day
J

Hi,

Actually, I have used !important on the background-colour selector. I have changed the colour of the text on the nav-pill selector, but it is not changing the background-color. I have successfully added margin-bottom. Nothing I do will change the background colour on your plugin’s tabs.

.nav-pills .nav-link {
color: #000; [THIS WORKS]
}

.nav-pills .nav-link.active {
	color: #2d8dc1; [THIS WORKS]
}

body.page-id-119 ul.nav-pills li.nav-item {
	background-color: #2d8dc1 !important; [DOES NOT WORK]
	margin-bottom: 1rem; [THIS WORKS]
}

ul.nav-pills li.nav-item {
	background-color: #2d8dc1 !important; [THIS DOES NOT WORK]
	margin-bottom: 1rem; [THIS WORKS]
}

It remains grey whatever I do. So where in your plugin code is it making it grey? Should your plugin not be defaulting to the primary colour of the bootstrap theme being used?

According to everything I read about Bootstrap, this selector should work to change the background-color on nav-pills

.nav-pills .nav-link.active {
  background-color: red;
}

So is there some CSS in your plugin files that is affecting this selector?

Cheers,
Tracy

Here is a screenshot, showing your nav-pills in grey and the console showing the CSS with correct selector:

https://www.freelancealot.co.uk/tests/Screenshot%202022-12-01%20at%2015.53.09.png

As you can see, the margin-bottom is working, the background-color is not. I can’t get a more specific selector than that. It is also in the WordPress customiser so it is on the page header itself.

Cheers,
Tracy

Again – this has nothing to do with this plugin.
Your theme styles are doing this.

You can not change just background-color:, you need to change background: because it looks like your theme CSS is putting an gradient there and that is a background-image, so easiest way to override this is to use background:.

But seriously, this is a free plugin and if you need help with CSS fundamentals, then this is really not the right place.

I will help you with anything with this plugin, but teaching you CSS to override your own styles from your custom theme is really out of the scope of this support.

Hi,

I will figure it out, but I’ve been using CSS for 22 years. So thanks.

Cheers,
Tracy

Thank you for the background tip but I’m afraid nothing solves the problem with the tabs in the plugin. I have tried background: none red; Nothing works. I have removed all instances of nav-pill backgrounds in the CSS in the Understrap theme and in the Understrap child theme.

I have hard-coded bootstrap tabs in a Custom HTML block in the same site, and the CSS selectors for the background colour I have put in the WP Customise Additional CSS work. See screenshot. https://www.freelancealot.co.uk/tests/Screenshot%202022-12-01%20at%2017.42.05.png

Yours remain grey. So I am at a loss.

Thanks, it is a good plugin but perhaps not compatible with Understrap.

Cheers,
Tracy

Give me an URL where I can see this and I will write you CSS rule that will work.

Hi,
Thanks. It’s driving me nuts, but I can’t see what’s wrong.

The site is under development at the moment, please would you delete the url after you have taken a look? https://www.ctcwessex.club/about-ctc-wessex/past-officials/

The hard-coded one is here: https://www.ctcwessex.club/sample-page/

Cheers,
Tracy

And what exactly is wrong?

View post on imgur.com

It seams that everything works, or did I misunderstood something?
Try open your site in inkognito window, maybe there is something wrong in your computer… some cache, or some extension in browser?

Hi

It is still showing as grey on Safari even though I have been emptying cache and history after every change. Don’t know what’s wrong. That is so frustrating, so glad you checked.I am sorry to have wasted your time. I just checked on Firefox on another machine and it is fine.

Thank you for your patience, Kubiq, I will check out the issue with Safari.

Cheers,
Tracy

Hm, I didn’t check that on Safari, but you can do it here lambdatest.com with free account and test it on another mac and safari – I see you already turned on maintenance page so I can not do it.

Hi,

I’ve checked on two Macs now both with Safari 15.6.1, and both still show the pill-nav tabs as grey background, but the text colour is changing.

So it’s something specific to the background and Safari. Having inspected the element my suspicion is that it has something to do with the -webkit-appearance: button; which is on the part of the nav-pills in the Understrap child theme CSS.

[type=button], [type=reset], [type=submit], button {
-webkit-appearance: button;
}

Or something related to this issue posted here: https://github.com/mui/material-ui/issues/26251 or https://stackoverflow.com/questions/29530655/background-color-css-not-working-in-safari-but-working-fine-in-chrome-firefox

I have opened up the site again just in case you want to take a look. I will continue to do some research and post on a CSS forum if I don’t find a solution.

Cheers,
Tracy

Okay. So that was the issue. I deleted

[type=button],[type=reset],[type=submit],button{-webkit-appearance:button} completely from the Understrap child theme css, and now the nav-pill background colours are showing correctly on Safari.

I’m just not sure if deleting this will cause issues elsewhere so I will do further research.

I don’t think I’ve come across this issue anywhere else using Understrap so could there be something in the plugin CSS that is working with/conflicting with this?

Cheers,
Tracy

If you use your own bootstrap and you have unchecked option to include bootstrap from the plugin, then there is nothing loaded from plugin, so there is only your CSS from your theme and child theme… So no, there is no conflict with plugin, it’s only about your CSS styles.

You should also check what version of Bootstrap CSS and JS you are using in your theme, because this plugin was created from version 5 and later it will probably contain some switch for newer version, but I don’t plan to add support for older versions like 4 or 3

ok, i see you have Bootstrap 5.1.1 in your theme which is ok…
so then you just need to write correct CSS selector or fix some conflicts between your CSS styles, it has really nothing to do with my plugin as you’re not including plugins CSS and JS files