CSS: Toggle Switch Background Color

  • Resolved lem1298

    (@lem1298)


    5 years, 9 months ago

    EDIT: Found the solution below.

    Hi there,

    I am trying to change the background color of the toggle-switch button. I found two lines in the Caldera CSS, where the background color to the switch get’s assigned. I copied those lines in my Child Theme CSS and changed the Color Values, but it still shows the buttons in the default green color…

    
.cf-toggle-switch .btn-success{
	background-color:#MY-COLOR-HERE;
	border-color:#MY-COLOR-HERE;	
}

.cf-toggle-switch .btn-success.active,.cf-toggle-switch .btn-success:active,.cf-toggle-switch .open .dropdown-toggle.btn-success{background-image:none}.cf-toggle-switch .btn-success.disabled,.cf-toggle-switch .btn-success.disabled.active,.cf-toggle-switch .btn-success.disabled:active,.cf-toggle-switch .btn-success.disabled:focus,.cf-toggle-switch .btn-success.disabled:hover,.cf-toggle-switch .btn-success[disabled],.cf-toggle-switch .btn-success[disabled].active,.cf-toggle-switch .btn-success[disabled]:active,.cf-toggle-switch .btn-success[disabled]:focus,.cf-toggle-switch .btn-success[disabled]:hover,.cf-toggle-switch fieldset[disabled] .btn-success,.cf-toggle-switch fieldset[disabled] .btn-success.active,.cf-toggle-switch fieldset[disabled] .btn-success:active,.cf-toggle-switch fieldset[disabled] .btn-success:focus,.cf-toggle-switch fieldset[disabled] .btn-success:hover{
	background-color:#MY-COLOR-HERE;
	border-color:#MY-COLOR-HERE;
	}

    Does anyone have a CSS-Snipped, which changes the toggle switch background color?

    Thank you very much in advance!

    • This topic was modified 5 years, 9 months ago by lem1298.
    • This topic was modified 5 years, 9 months ago by lem1298.
Viewing 1 replies (of 1 total)
  • Thread Starter lem1298

    (@lem1298)

    SOLUTION

    All I needed was a “!important” at the end of the line. Now everything works with this tiny bit of code. Maybe this helps someone else…

    .cf-toggle-switch .btn-success {

    color: #fff;
    background-color: #5D70B5 !important;
    border-color: #5D70B5 !important;

}
Viewing 1 replies (of 1 total)
  • The topic ‘CSS: Toggle Switch Background Color’ is closed to new replies.