How to create custom skins

Avalon23 allows to create skins and apply them on any filters.

Default skins are in: skins/skin-1.css, skins/skin-2.css, …, skins/skin12.css

To add your own skin into the system create folder ‘avalon23-skins‘ in the folder of the current wordpress theme, create file there, for example ‘my-custom1‘ and write there CSS code using the code below as an example:

:root { 
    --avalon23-my-custom1-color1: #e7eff2;/*filter title*/ 
    --avalon23-my-custom1-color2: #3485b3;/* count color image,label,colors,slider */ 
    --avalon23-my-custom1-color3: #7b99bd;/* slider bar */ 
    --avalon23-my-custom1-color4: #b2ccd4;/* slider container */ 
    --avalon23-my-custom1-color5: #7b99bd;/* image checked*/ 
    --avalon23-my-custom1-color6: #b5cdd6;/* select border*/ 
} 
/*filter*/ 
.avalon23-style-my-custom1 .avalon23_filter_title { 
    background-color: var(--avalon23-my-custom1-color1); 
    margin-bottom: 10px; 
} 
.avalon23-style-my-custom1 [avalon23-data-tooltip]:before{ 
    background-color: var(--avalon23-my-custom1-color2); 
    background-image: none; 
} 
.avalon23-style-my-custom1 [avalon23-data-tooltip]:after{ 
    border-color: var(--avalon23-my-custom1-color2) transparent transparent transparent; 
} 
/*select*/ 
.avalon23-style-my-custom1 .selectm23 { 
    border: solid 2px var(--avalon23-my-custom1-color6); 
} 
.avalon23-style-my-custom1 .selectm23-option { 
    border-bottom: 2px solid var(--avalon23-my-custom1-color6); 
    border-right: 2px solid var(--avalon23-my-custom1-color6); 
    border-left: 2px solid var(--avalon23-my-custom1-color6); 
} 
.avalon23-style-my-custom1 .selectm23-selected { 
    border-radius: 0px; background-image: none; 
    background-color: var(--avalon23-my-custom1-color1); 
    box-shadow: none; border-color: var(--avalon23-my-custom1-color6); 
    cursor: pointer; 
} 
.avalon23-style-my-custom1 .avalon23-filter-cell-type-select select, .avalon23-style-my-custom1 .avalon23-filter-cell-type-hierarchy_dd select { 
    box-shadow: none; 
    border-radius: 0px; 
    border: 2px solid var(--avalon23-my-custom1-color6); 
} 
/*switcher*/ 
.avalon23-style-my-custom1 .switcher23:checked + .switcher23-toggle span { 
    background: var(--avalon23-my-custom1-color2); 
} 
.avalon23-style-my-custom1 .switcher23:checked + .switcher23-toggle:before { 
    background: var(--avalon23-my-custom1-color3); 
} 
/*textinput*/ 
.avalon23-style-my-custom1 .avalon23-text-search:focus{ 
    outline-color: var(--avalon23-my-custom1-color2); 
} 
/*slider*/ 
.avalon23-style-my-custom1 .ranger23-handler-left, .avalon23-style-my-custom1 .ranger23-handler-right { 
    background: var(--avalon23-my-custom1-color2); 
} 
.avalon23-style-my-custom1 .ranger23-bar { 
    background: var(--avalon23-my-custom1-color3)!important; 
} 
.avalon23-style-my-custom1 .ranger23-container { 
    background: var(--avalon23-my-custom1-color4); 
} 
.avalon23-style-my-custom1 .ranger23-min,.avalon23-style-my-custom1 .ranger23-max { 
    font-size: 12px; 
} 
/*color*/
.avalon23-style-my-custom1 .avalon23-color-list .avalon23-color-checkbox.checked::before { 
    olor: var(--avalon23-my-custom1-color2); 
}
.avalon23-style-my-custom1 .avalon23-color-count { 
    background: var(--avalon23-my-custom1-color2); 
} 
/*label*/ 
.avalon23-style-my-custom1 .avalon23-label-count { 
    background: var(--avalon23-my-custom1-color2); 
} 
.avalon23-style-my-custom1 .avalon23-labels li .avalon23-label-checkbox:hover, .avalon23-style-my-custom1 .avalon23-labels li .avalon23-label-checkbox.checked { 
    background-color: var(--avalon23-my-custom1-color2); 
    border-color: var(--avalon23-my-custom1-color2); 
}
/*image*/ 
.avalon23-style-my-custom1 .avalon23-image-count { 
    background: var(--avalon23-my-custom1-color2); 
} 
.avalon23-style-my-custom1 .avalon23-image-input:checked+label::before {
    background-color: var(--avalon23-my-custom1-color5); 
} 
/*checkbox radio*/ 
.avalon23-style-my-custom1 .avalon23_radio_checkbox li label.checked ~ .avalon23_disable_radio:after { 
    font-weight: bold; 
} 
.avalon23-style-my-custom1 .avalon23_radio_checkbox_container input:checked ~ .avalon23_checkmark { 
    background-color: var(--avalon23-my-custom1-color2); 
}

Important: do not forget rename CSS variables and  classes if you  use  another file  name!

Set your colors as variables and add  custom CSS  and enjoy the results!