Green/Red vs. Blue Buttons

My client wants the green Yes and red No buttons shown when I setup a field as a single-select checkbox to both be blue like the ones setup as radio buttons. So I don't break a bunch of Auto Actions and other CB elements depending on those radio button field values stored as "Yes" and "No", is it fairly easy to change the single-select checkbox Bootstrap buttons to use the same attribute as the blue ones? Where would I put that CSS and what would it look like?

Thanks in advance,
Bruce

Just as a note, I did look at using a CB template for this, but that makes it seem like I would have to do a total replacement site-wide of the Bootstrap button classes. Don't want to do that.

You'd have to complete override the btn-danger and btn-success classes for that field. Example as follows.


Replace FIELD_ID_HERE with the actual ID of your field. For example you'd have the below if you want them to be styled same as primary button when selected.


If you want it to apply to all yesno checkbox fields instead of specific fields replace #cbfr_FIELD_ID_HERE with .cbft_checkbox.cbtt_group. Example as follows.

Where does this code go? And does this class have to be entered into the field's CSS Classes box?

Thanks!

Where does this code go?

Use the built in CSS override functionality shown below.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

And does this class have to be entered into the field's CSS Classes box?

The provided examples do not depend on the CSS Class parameter, but you could use the parameter if you like. Example as follows.

CSS Class: blueYesNo