Topic: Can we have each Tabs Button with its own color bg?

Carlos
April 22, 2024 at 4:29 pm

Hi,

Is it me or I can’t seem to select different background colours for each tab button?

After setting the background colour for the first tab, I go change the second tab and all tabs changed in sync!

Surely there must be a way and it’s just too early in the morning for my brain to function, but I can;t seem to get it going, help!

Thanks

Alvind

April 22, 2024 at 6:35 pm

Hi there,

You would need a custom CSS. Try this:

.gb-container-08e02125 button:nth-child(1) {
	background-color: white;
}

.gb-container-08e02125 button:nth-child(2) {
	background-color: red;
}

.gb-container-08e02125 button:nth-child(3) {
	background-color: orange;
}

.gb-container-08e02125 button:nth-child(4) {
	background-color: blue;
}

.gb-container-08e02125 button:nth-child(5) {
	background-color: green;
}

Adjust the background-color value according to your preference.

Carlos
April 22, 2024 at 6:41 pm

Ah, OK, yeah, I can use css to fix this, however, using the GB interface would be way more easier and the settings are there, I just don’t get why are they all linked!

For example, in my view, it makes no sense at all that I can set each tab button with its own icon, but can’t set a background colour!

You guys need to fix this.

Thanks
Carlos
April 22, 2024 at 9:54 pm

Hi Alvind,

I implemented your solution, however, when the Tabs load the first time, the first tab comes up with the Background Colour assigned and not in the Active Tab state!

How do I go about fixing that?

I would also like that on a:hover the Tab Button Colours would invert, where’s currently the background stay the same (hover should be white).

Thanks
Alvind
April 22, 2024 at 10:35 pm
Add this CSS for the active and hover state:
```
.gb-container-08e02125 .gb-block-is-current {
	background-color: white !important;
}

.gb-container-08e02125 button:hover {
	background-color: white !important;
}
```
Regarding the ability to set a different color for tab buttons, it’s something we’re going to improve in a future version. Thank you for your feedback!
Carlos
April 22, 2024 at 11:37 pm

Hi Alvind,

Thanks that sorted the issue.

Cheers
Alvind
April 23, 2024 at 12:29 am

You’re welcome!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Can we have each Tabs Button with its own color bg?