Editing CSS Variables
uStore NG uses CSS variables to control the look of recurring UI elements, such as buttons.
The theme editor, which is a WYSIWYG editor, lets you edit the commonly-used variables only.
However, you can set a value for all other variables via the "Variables CSS" panel in the theme editor.
Note that any variable declared in the "Variables CSS" panel overrides the value set in the theme editor.
The following is a list of the available variables:
Header variables
--header-height-desktop – The height of the header on desktop breakpoints
--header-height-mobile - The height of the header on mobile breakpoints
--header-padding-desktop – The padding of the header div on desktop breakpoints
--header-padding-mobile – The padding of the header div on mobile breakpoints
--header-background-color – The background color of the header
--text-color-header – The color of text and icons in the header
--logo-image – The URL of the logo image on desktop breakpoints
--logo-image-mobile - The URL of the logo image on mobile breakpoints.
Mobile hamburger menu variables
--submenu-background-color – The background color of the heading (top row) of a submenu when drilling in on mobile
--text-color-submenu - The text color of the heading (top row) of a submenu when drilling in on mobile
Homepage banner variables
--carousel-height-desktop – The height of the banner on desktop breakpoints
--carousel-height-mobile – The height of the banner on mobile breakpoints
--text-color-carousel - The color of the heading text
Footer variables
--footer-background-color – The background color of the footer
--footer-text-color – The text color of the footer
Button variables
A primary button is the main call to action on a page.
A secondary button is any other button on the page.
--button-primary-background-color – The background color of a primary button
--button-primary-border-color – The border color of a primary button
--button-primary-text-color - The text color of a primary button
--button-secondary-background-color - The background color of a secondary button
--button-secondary-border-color – The border color of a secondary button
--button-secondary-text-color – The text color of a secondary button
--button-border-radius – The radius of the button corners
Image box variables
Image boxes are the boxes that contain product images.
--image-box-height – The height of an image box
--image-box-background-color – The background color of an image box
--image-box-border-width – The border width of an image box
--image-box-border-color – The border color of an image box
--image-box-padding – The padding of the div which contains the image
Product image variables
These variables affect the images of a static product in a single page mode (in the future more products). Applicable from v13.
--image-border-width - the width of the border around the image. e.g. 1px
--image-border-color - the color of the border around the image. e.g. #d6d6d6
Text variables
A few variables control the color of texts. They vary from darker tones to lighter ones.
--text-color-heading - The color of text in headings (e.g. H1, H2) in the body of the site (not in the header)
--text-color-ultra-dark – The color of the darkest text
--text-color-dark – The color of the dark text
--text-color-medium – The color of the light text
--text-color-disabled – The color of disabled text
--color-error – The color of error text
--color-warning – The color of warning text
--color-success: The color of success text
--color-line – The color of lines, e.g. divider lines, search bar border
--color-highlight: The main color of the theme, usually used for highlighted elements, e.g. links, total price, table header background, menu hover color
--color-fill – The background color of non-white regions (defaults to grey), e.g. image box background, All Category menu
--text-color-on-highlight-bg – The text color which overlays the highlight color (-–color-highlight) when the highlight color is used in the background, e.g. column headings in a table
--text-size-h1
--text-size-h2
--text-size-h3
--text-size-h4
--text-size-label - The text size of labels
--text-size-regular - The size of running text (usually used for descriptions)
--text-size-fineprint – The size of small text
More variables
--favicon-url (v12.2 and up) - Sets the favicon (the icon that is displayed on the browser's tab and bookmark). Upload a png image (32px X 32px is recommended) via the theme editor's assets tab and point to it, e.g. --favicon-url:"assets/icon.png"
--category-image-height – The height of the div containing the category image
--form-input-border-radius – The corner radius of form input controls, e.g. textbox, dropdown
--table-scrollbar-color
--default-font-weight
--text-color-dropdown-menu – The color of the text and icons in the dropdown menu of uStore Connect Enterprise store lists on mobile
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