Changing The Checkbox Label Colour

I Need Help
1

Hello folks. I’m currently building an Ecwid Store to integrate into a Blocs site. It looks great! But I discovered that my Blocs label class colour – which was white – was making links in Ecwid invisible. I changed my label class colour in Blocs to gold. The links in Ecwid are now visible, which will be helpful for visitors to the store.

However the new gold label class colour doesn’t have enough contrast for the dark background of my original Blocs contact form. So I created a new class – called .form-label – set the text colour to white and applied it to the Name / Email / Message labels in the form. However the text for the checkbox label at the end of the form is still gold. I can’t seem to apply the .form-label class to this, and nothing I do in the .checkbox-margins class seems to have any effect.

Does anyone know of a cool trick on how to change the colour of the checkbox label, without having to change the colour of the label class? Below is a screensnap, to show you visually what my dilemma is. Thank-you! :+1:

Screenshot 2020-05-05 at 18.28.21

2

I tried a couple options listed here under supported elements without luck. You may do better.

3

Hey @DerekDigital

In the class manager make a class called…

.form-check-label

Then set the text colour to white.

1 Like
5

Cool. Thanks @PeteSharp :+1:

6

Thanks for trying @Flashman. Looks like the solution from @PeteSharp works perfectly!

7

Its a shame that customising input fields is more difficult that it should be (in general, not just blocs). Its much easier if you hand code them.

The Blocs form doesn’t let you assign the right classes to the checkbox, but you can use a code bric and integrate one into a standard Blocs form.

8

I find it slightly frustrating that placeholder text is dark with no obvious means of making it semi transparent like it was in Blocs 2. I am away from the computer at the moment, but I found something last night that I shall try when I get back.

I’d like to find a means of changing the toggle switch colour in forms as well. It would be good if Blocs made more of these custom classes available by default.

9

You modify these classes

<style>
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: red;
            opacity: 0.6;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: red;
            opacity: 0.6;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
            color: red;
             opacity: 0.6;
 }
</style>

You can add these classes to the Class manager and they work.

3 Likes
10

That’s what I found online last night, but haven’t had a chance yet to try it.

1 Like
11

It does work.

12

Just tried that and confirmed it did work, however I only added the first one via the class editor and simply reduced the opacity to around 20%. I didn’t bother with any IE shenanigans etc.

2 Likes
13

Cool, yeah I often don’t either (IE denial). It’s handy to keep a collection of these classes. (Although I am bad at that. )

14

Although the response from @PeteSharp worked perfectly, I’m left with a Learn More link in the cookie notification bar that is gold on a black background. This was created using the Cookie Consent Bric. Does anyone have any advice on what class I should create in my Blocs project, that will change the colour of the a.cc-link button from gold to white? Everything I try just doesn’t seem to work. Thanks in advance.

15

I don’t have that bric, but is the site live somewhere? And I can get you the class to edit.

Or probably a better idea is to add a class to your form so we can target it with the css

 .myForm .form-check-label
16

Thanks for the suggestions @PeteSharp. Unfortunately the site isn’t live, I’m hosting this iteration locally.

I’m going to give your .myForm class a whirl and see what happens.

I guess my other option is to drop the Blocs Cookie Consent bric and use the Osano Cookie Consent – which I’ve implemented in other sites. Not sure if it will throw-up the same issue though. Again, I’m going to test that today.

17

I’ve now managed to resolve my links colour issues. I removed the Cookie Consent bric and used code generated by the Osano Cookie Consent, as this enable users to opt-in to cookies.

I copied the following code, and in Blocs pasted it into Page > Settings > Add Code > Header
Screenshot 2020-05-22 at 10.10.59

I then copied the following script, and in Blocs pasted it into Page > Settings > Add Code > Footer
Screenshot 2020-05-22 at 10.11.18

In the Blocs Class Manager I created new four new class styles: .cc-message; .cc-link; .cc-allow; .cc-deny. I then set the font and colours I required for the links in this element of my site using these new styles.

Finally, I tested the site to dobule-check that the gold a.links, in my online store, remain gold, and that the contact checkbox label in my form was still white. Both are fine!