Back to Modular Theme with PAGE BUILDER - Clear Support

chad32132
chad32132

We have a number of sliders and other buttons defined throughout our sites. When we apply the Clear Theme the sliders turn into a simple checkbox.

This is the code that we are using as defined in the OctoberCMS website: https://octobercms.com/docs/ui/checkbox

I would like to know how we can use these classes as well as others when we apply the theme.

Last updated

Charis
Charis

chad32132 said:

We have a number of sliders and other buttons defined throughout our sites. When we apply the Clear Theme the sliders turn into a simple checkbox.

This is the code that we are using as defined in the OctoberCMS website: https://octobercms.com/docs/ui/checkbox

I would like to know how we can use these classes as well as others when we apply the theme.

Hello!
Where exactly you are using the switch code? This ui slider switch code meant to be used on the Octobercms backend. It get this design from Octobercms backend css. If you need to use it on the frontend you have to use the Octobercms css for this switch code to get this design. If you need that i can give you the css to use it on frontend.

chad32132
chad32132

Sorry for not stating that, we are trying to use this slider on a front end CMS page form. It is working correctly in the backend.

Charis
Charis

chad32132 said:

Sorry for not stating that, we are trying to use this slider on a front end CMS page form. It is working correctly in the backend.

Hello!
You have to insert css styles for the switch:

.custom-switch{display:block;width:65px;height:26px;position:relative;text-transform:uppercase;border:none;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.custom-switch *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.custom-switch.disabled{opacity:0.5;filter:alpha(opacity=50)}
.custom-switch .slide-button{z-index:9;display:block;position:absolute;right:42px;top:3px;width:20px;height:20px;background-color:#f6f6f6;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-transition:all 0.1s;transition:all 0.1s}
.custom-switch label,.custom-switch > span{line-height:23px;vertical-align:middle}
.custom-switch label{z-index:8;width:100%;display:block;position:relative}
.custom-switch input{z-index:10;position:absolute;left:0;top:0;opacity:0;filter:alpha(opacity=0)}
.custom-switch input:checked ~ .slide-button{right:4px}
.custom-switch input:checked ~ span{background-color:#76a544}
.custom-switch input:checked ~ span span:first-of-type{color:#FFFFFF;display:block}
.custom-switch input:checked ~ span span:last-of-type{color:#666666;display:none}
.custom-switch > span{display:block;height:100%;position:absolute;left:0;width:100%;background-color:#bb2424;font-size:12px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}
.custom-switch > span span{z-index:10;display:block;width:50%;position:absolute;top:2px;left:-1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.custom-switch > span span:last-child{left:28px;color:#FFFFFF;display:block}
.custom-switch > span span:first-of-type{padding-left:13px;display:none;color:#666666}

You can put this css on Theme settings -> Advanced -> custom css editor

Last updated

1-4 of 4