Step1: Go to path app / design/ frontend / Venustheme / theme_name/ Ves_Themesetting / Web / css/ skins created file skin.css
Example: Blue.css
In this file, include all css rule name, and change the color attributes, properties, text color, background color…
Example:
Sample css code (blue.css in theme Ves_Pencil):
.product-info-main .product-addto-links a:hover, .minicart-wrapper .action.showcart:hover::before, .minicart-wrapper .action.showcart.active::before, .header-content .header-links-options a:hover, .minicart-wrapper .actions a:hover, .product-reviews-summary .reviews-actions a:hover, .ves-megamenu .dropdown-menu a:hover { color: #1979c3!important; } .columns a:hover, .columns .alink:hover, .breadcrumbs .item strong, .product-info-main .add-action:hover, .product-info-main .price-box .price-including-tax + .price-excluding-tax .price, .product-options-bottom .price-box .price-including-tax + .price-excluding-tax .price, .product-info-main .price-box .weee + .price-excluding-tax .price, .product-options-bottom .price-box .weee + .price-excluding-tax .price, .product-info-main .price-box .weee .price, .product-options-bottom .price-box .weee .price, .ves-menu .ves-vertical li.level0:hover > a { color: #1979c3; } .scrollup, .block.newsletter .action.subscribe:hover, .product-block .product-image .product-item-actions .actions-secondary .add-to-wishlist:hover, .product-block .product-image .product-item-actions .actions-secondary .add-to-compare:hover, .product-block .product-image .product-item-actions .actions-secondary .quick-view:hover, .product-block .product-image .product-item-actions .actions-secondary .add-to-wishlist:focus, .product-block .product-image .product-item-actions .actions-secondary .add-to-compare:focus, .product-block .product-image .product-item-actions .actions-secondary .quick-view:focus, .product-block .product-image .product-item-actions .actions-primary .add-to-cart { background-color: #1979c3; } ._keyfocus *:focus, input:focus:not([disabled]), textarea:focus:not([disabled]), select:focus:not([disabled]){ box-shadow: 0 0 3px 1px #1979c3; } .action.primary:hover, .action.primary:active, .action.primary:focus { background: #1979c3; border-color: #1979c3; color: #fff; } .widget-carousel .owl-nav .owl-prev, .productlist-widget .owl-nav::before, .widget-carousel .owl-nav .owl-next,.ves-menutop .ves-megamenu li.level0:hover > a{ background: #1979c3!important; } .productlist-widget ul.etabs li a, .footer-top .block .block-title strong{ color: #1979c3; } .owl-carousel .owl-nav [class*=owl-]{ color: #1979c3; } .ves-menutop .ves-megamenu{ border-top-color: #1979c3!important; } .widget-images .image-item a:before{ border-color: #1979c3!important; } textarea, input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"]{ border-color: #1979c3; }
Step2: Change config skin color for each storeview
Go to admin / Ves Themesetting / General Settings tabs:
Step3: Refresh cache system and view it on frontend
0 Comment