Skins
WOOT permite crear pieles y aplicarlas en cualquiera de sus tablas de productos.
Las máscaras predeterminadas están en: skins / skin-1.css, skins / skin-2.css,…, skins / skin-11.css
Para agregar su propia máscara en la carpeta de creación del sistema 'pieles de woot'en la carpeta del tema actual de WordPress, cree un archivo allí, por ejemplo'mi-personalizado1'y escriba el código CSS usando el siguiente código como ejemplo:
:root { --woot-my-custom1-color1: #99a0fc;/* borders */ --woot-my-custom1-color2: #97C97C;/* slider bar */ --woot-my-custom1-color3: #99a0fc;/* slider handlers */ --woot-my-custom1-color4: #EEF5F1;/* slider container */ --woot-my-custom1-color5: #1971CD;/* slider min/max */ --woot-my-custom1-color6: #FFFFFF;/* slider span */ --woot-my-custom1-color7: #CEEEDB;/* disabled switcher span */ --woot-my-custom1-color8: #EEF5F1;/* disabled switcher before */ --woot-my-custom1-color9: #34BF6C;/* enabled switcher span */ --woot-my-custom1-color10: #EFAC34;/* enabled switcher before */ --woot-my-custom1-color11: #7f54b3;/* buttons bg, table scrollbar bg */ --woot-my-custom1-color12: #FFFFFF;/* buttons color */ --woot-my-custom1-color13: #d9d7fa;/* selected column */ --woot-my-custom1-color14: #25bf99;/* th bg */ --woot-my-custom1-color15: #FFFFFF;/* th head color */ --woot-my-custom1-color15-1: #423E3E;/* th foot color */ --woot-my-custom1-color16: #99322b;/* add to cart button bg */ --woot-my-custom1-color17: #fdf171;/* add to cart button icon color */ --woot-my-custom1-color18: #FFF;/* add to cart button color */ --woot-my-custom1-color19: #99a0fc;/* add to cart checkbox */ --woot-my-custom1-color20: #FFF;/* woocommerce cart bg */ --woot-my-custom1-color21: #FFFFFF;/* tr:nth-of-type(odd) */ --woot-my-custom1-color22: #c8e1ff;/* tr:nth-of-type(even) */ --woot-my-custom1-color23: #d9d7fa;/* tr:hover */ } #tid.data-table-23 input[type='text'], #tid.data-table-23 input[type='number'], #tid.data-table-23 input[type='email'], #tid.data-table-23 input[type='tel'], #tid.data-table-23 input[type='url'], #tid.data-table-23 input[type='password'], #tid.data-table-23 input[type='search'], #tid.data-table-23 textarea, #tid.woot-filter-cell-type-select select, #tid.data-table-23 button, #tid.data-table-23 input, #tid.data-table-23 select, #tid.data-table-23 textarea, #tid.data-table-23 .selectm23, #tid .woot-woocommerce-cart, #tid .woot-filter-navigation-label, #tid .woot-tax-term, #tid .woot-woocommerce-text-search-container[data-table-id="tid"] input[type='search']{ border-color: var(--woot-my-custom1-color1) !important; outline-color: var(--woot-my-custom1-color1) !important; } #tid .woot-woocommerce-text-search-container[data-table-id="tid"] .woot-woocommerce-text-search-wrapper::-webkit-scrollbar { background: var(--woot-my-custom1-color4) !important; } #tid .woot-woocommerce-text-search-container[data-table-id="tid"] .woot-woocommerce-text-search-wrapper::-webkit-scrollbar-thumb { background: var(--woot-my-custom1-color2) !important; } #tid .ranger23-bar{ background: var(--woot-my-custom1-color2) !important; } #tid .ranger23-handler-left, #tid .ranger23-handler-right { background: var(--woot-my-custom1-color3) !important; } #tid .ranger23-container, #tid .woot-filter-navigation-label{ background: var(--woot-my-custom1-color4) !important; } #tid .ranger23-min, #tid .ranger23-max, #tid .woot-filter-navigation-label, #tid .woot-tax-term{ color: var(--woot-my-custom1-color5) !important; } #tid .ranger23-handler-left span, #tid .ranger23-handler-right span { color: var(--woot-my-custom1-color6) !important; } /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #tid .switcher23-toggle span{ background: var(--woot-my-custom1-color7) !important; } #tid .switcher23-toggle:before{ background: var(--woot-my-custom1-color8) !important; } #tid .switcher23:checked + .switcher23-toggle span{ background: var(--woot-my-custom1-color9) !important; } #tid .switcher23:checked + .switcher23-toggle:before{ background: var(--woot-my-custom1-color10) !important; } #tid .woot-btn, #tid .table23-print-btn, #tid .table23-load-more-button a, #tid .woot-add-to-cart-all-btn{ background-color: var(--woot-my-custom1-color11) !important; color: var(--woot-my-custom1-color12) !important; } #tid .woot-num-cell{ color: var(--woot-my-custom1-color11) !important; border-color: var(--woot-my-custom1-color14) !important; } #tid .table23-flow-header > div{ color: var(--woot-my-custom1-color11) !important; } #tid.woot-data-table a.woot-btn{ color: var(--woot-my-custom1-color12) !important; } #tid .horizontal-scrollbar23-handler{ background-color: var(--woot-my-custom1-color11) !important; border-color: var(--woot-my-custom1-color11) !important; } #tid .horizontal-scrollbar23-track{ border-color: var(--woot-my-custom1-color1) !important; } #tid table th.table23-order-asc, #tid table th.table23-order-desc, #tid table td.table23-order-asc, #tid table td.table23-order-desc{ background: var(--woot-my-custom1-color13) !important; } #tid.woot-data-table table thead th{ background: var(--woot-my-custom1-color14) !important; } #tid.woot-data-table table thead th{ color: var(--woot-my-custom1-color15); } #tid.woot-data-table table tfoot th{ color: var(--woot-my-custom1-color15-1); } #tid table .woot-btn.woot-add-to-cart-btn, #tid .woot_count_in_cart{ background-color: var(--woot-my-custom1-color16) !important; color: var(--woot-my-custom1-color18) !important; } #tid .woot-btn.woot-add-to-cart-btn span{ color: var(--woot-my-custom1-color17) !important; } #tid .woot-checkmark{ background-color: var(--woot-my-custom1-color19) !important; } #tid .woot-woocommerce-cart{ background: var(--woot-my-custom1-color20) !important; } #tid.data-table-23 table tbody tr:nth-of-type(odd) { background-color: var(--woot-my-custom1-color21) !important; } #tid.data-table-23 table tbody tr:nth-of-type(even) { background-color: var(--woot-my-custom1-color22) !important; } #tid.data-table-23 table tbody tr:hover { background-color: var(--woot-my-custom1-color23) !important; } #tid .table23-tr-notice, #tid .table23-place-loader{ background: repeating-linear-gradient( 135deg, var(--woot-my-custom1-color3), var(--woot-my-custom1-color3) 10px, var(--woot-my-custom1-color4) 10px, var(--woot-my-custom1-color4) 20px ) !important; color: var(--woot-my-custom1-color14); } #tid .table23_td_cell .star-rating span::before, #tid .table23_td_cell .star-rating::before{ color: var(--woot-my-custom1-color11) !important; } #tid .selectm23-selected{ color: var(--woot-my-custom1-color3) !important; } #tid .selectm23-option-selected, #tid .selectm23-option:hover { background: var(--woot-my-custom1-color4) !important; color: var(--woot-my-custom1-color3) !important; } #tid div.calendar23-label{ background: var(--woot-my-custom1-color3) !important; } #tid.woot_woocommerce_tables .table23-display-cell-info{ color: var(--woot-my-custom1-color3) !important; background: var(--woot-my-custom1-color4) !important; border-color: var(--woot-my-custom1-color2) !important; } /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ #tid.data-table-23 table th.table23-order-able.table23-order-asc:before, #tid.data-table-23 table th.table23-order-able.table23-order-desc:after{ color: var(--woot-my-custom1-color12) !important; } #tid.data-table-23 table th.table23-order-able:before, #tid.data-table-23 table th.table23-order-able:after{ color: var(--woot-my-custom1-color15-1) !important; } #tid table th[data-key="add_to_cart"], #tid table span[data-key="add_to_cart"], #tid table b[data-key="add_to_cart"], #tid table th[data-key="compare"], #tid table span[data-key="compare"], #tid table b[data-key="compare"], #tid table th[data-key="favourites"], #tid table span[data-key="favourites"], #tid table b[data-key="favourites"]{ color: #fdf171 !important; border-bottom-color: #fdf171 !important; } #tid .woot_compare_remove_btn{ color: #9DFFB0 !important; } #tid .woot-data-table .table23_td_price, #tid .woot-data-table .table23_td_regular_price, #tid .woot-data-table .table23_td_sale_price { color: crimson; } #tid.woot-data-table table .table23_td_post_title, #tid.woot-data-table table .table23_td_title, #tid.woot-data-table table td a{ color: var(--woot-my-custom1-color11); }
Importante:: no olvide cambiar el nombre de las variables CSS como en las pantallas de arriba.
Establezca sus colores como variables y valores en la parte inferior del archivo y disfrute de los resultados.
Habilite la máscara en la página de Configuración:
O usa atributo piel, por ejemplo: [woot skin=’my-custom1′]