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!
