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!