Our brands

How to create new skin?

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

Share this Post!

Panda Thuan
Panda Thuan
Creativity is falling in love with the world

0 Comment

Do NOT follow this link or you will be banned from the site!