Our brands

How to custom Magento 2 skin in theme settings

magento 2 skin themesetting

As you know, skin is very crucial in designing. It is the main key factor of attraction customers to your site. Surely, you love some favorite skins. When you set up theme, you can stuck any process of this. To dealing it when setting up easily, we introduce you the tutorial for “Custom Magento 2 skin in themesettings on Venus theme”. So you can do it yourself to save time and avoid to waste of money.

To custom skin in theme settings of Venustheme, you have to experience through 3 steps:

Step 1: Go to path app / design/ frontend / Venus theme / theme_name/ Ves_Themesetting / Web / css/ skins >>>Created file skin.css

Example: Blue.css

magento 2 create skin-1

In this file, include all css rule name, and change the color attributes, properties, text color, background color…

Example:

magento 2 create skin-2

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;
}


Step 2: Change config skin color for each store view

Go to admin >>>  Ves Theme setting >>> General Settings tabs and then “Save config”

Magento custom skin-3

Step 3: You can refresh cache system and view it on frontend

The process of custom skin is very fast. You can try it on your themes. By this tutorial, you can customize your skin close your skin you want. If you have any question for this tutorial, please leave your comment here and view at more our tutorial on Venus theme.

If you still confuse about this Tutorials, please feel free to contact our professional support team with more than 7 years of experiences for more helpful aid.

All questions are always welcomed. Contact us now! Magento Development Services

Related Posts

MEMBERSHIP MAGENTO THEMES
MAGENTO 2 TUTORIAL
HOW TO ADD MAGENTO 2 CUSTOMER GROUPS
ULTIMATE WAY FOR MAGENTO 2 ADD CATEGORY |VENUSTHEME
HOW TO SET UP MAGENTO 2 IMPORT PRODUCTS QUICKLY?
BEST WAY TO ADD PRODUCT ATTRIBUTE MAGENTO 2
QUICKEST WAY TO ADD IMAGE PRODUCT MAGENTO 2

Share this Post!

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

0 Comment

Leave a Comment

Your email address will not be published.

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