Skip to content

Editing the CSS

Guy Schreiber edited this page Apr 24, 2019 · 3 revisions

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:

Controlling the search bar

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

Replacing icons

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>");
}
Clone this wiki locally