-
Notifications
You must be signed in to change notification settings - Fork 3
Editing the CSS
uStore NG comes with a theme editor that enables customization of common UI elements.
To further customize the UI, use the "Custom CSS" panel within the theme editor.
Here are a few examples which might come handy:
To make the search bar narrower use:
.header .header-stripe .search {width:300px;}
To get rid of it completely use:
.header .header-stripe .search {display:none;}
To replace an SVG icon, locate the required area of the SVG element using the browser's developer tools and record the class of its parent element, e.g. .profile, .cart, .search, .back-block, .arrows.
Use the snippet below, and replace the first class in both rules (in this example .cart) with the recorded class from the list above, for which you'd like to change the icon.
Changing the cart icon:
.cart .icon-image {
display: none;
}
.cart .icon-holder {
background-image: url("../assets/<image-file>");
}
Changing the user profile icon:
.profile .icon-image {
display: none;
}
.profile .icon-holder {
background-image: url("../assets/<image-file>");
}
uStore NG Themes
uStore NG Extensibility
Theme customization overview
Editing CSS variables
Editing the CSS
Migration from Legacy to NG
Theme development overview
Getting started
Theme file structure
Publishing the theme
Upgrading a Custom Theme
Editing HTML content
Adding a new page
Adding assets
Adding a component
Customizing a skin
Modifying CSS variables
Editing fonts
Adding JavaScript
uStore library
Working with REST API
Accessing uStore data
Managing custom state
Working with localizations
General services
Adding an external package
Customizing the Theme Editor
Theme tips and tricks
uStoreProvider Reference
Tax Webhook
Order Approval Webhook
Manufacturer Webhook
Widgets
Cart Export Webhook