Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
DrQuesh

7.1 CSS styling workaround of non-default color theme buttons for changing section colors

Question

Posted (edited)

There's a bug in the 7.1 template that custom colors applied to the background of a non-active color theme don't then show when subsequently applied to a specific section on the website (it defaults to the regular colors). This is a bit of a pain, as it would be a great feature to setup more than the two contrast colors easily for an end user.

I can fix this for the website itself by adding the following to the custom CSS;


.black-bold:not(.has-background) .section-background {background-color: #ff0000 !important;}

However, I would also like to update the color selector button to also look the same.

In my example, I'm trying to target the 'black bold' button in the section color selector. The element selects as;


<button data-color-id="black" class="ThemeCard-card-3WmWD" value="black-bold" data-test="theme-card-7" style="background: rgb(0, 0, 0);"><span data-color-id="safeLightAccent" class="ThemeCard-largeSample-2Yust" style="color: rgb(255, 255, 255);">Heading</span><span data-color-id="white" class="ThemeCard-smallSample-YTLoM" style="color: rgb(255, 255, 255);">This is a section<br>of a paragraph.</span></button>

But when I try to target it to change the background color of the button to the red in the css, neither of the following works.


.ThemeCard-card-3WmWD {background: #ff0000 !important;}

input[value="black-bold"][data-color-id="black"] {background: #ff0000 !important;}

What should I be using to select this element?

Image below if it helps understand where I mean. Thanks

alt text

ssdemod.png.87baf8dc9647a62b9ed1cde1f2a0902f.png

Edited by DrQuesh
Initial Revision

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...