View Single Post
Old 11-13-2016, 03:55 PM
Cyril D's Avatar
Cyril D Cyril D is offline
Ecwid Team
Join Date: Feb 2015
Location: Ecwid HQ
Posts: 530

By means of CSS, you can change every aspect of every storefront element: a size, a shape, a font, a colour, etc. So if you have a proper CSS code, once you add it to a custom theme in the Ecwid Control Panel → Settings → Design → Custom CSS Themes, you'll get a result you need. In this post I'll focus on colours, though.

So, buttons. There are two types of buttons in Ecwid: the big ones—we call them primary, and small ones—secondary.

Below are CSS snippets which being added to the CSS theme, will change the colours of each button in your store. Colours are specified in HEX colour codes such as #e9800b. To get a needed colour, feel free to use any HEX colour codes generator.

Primary buttons
/* Change the base color of main buttons */
.ecwid .ecwid-btn--primary { background: #e9800b; }

/* Change the color when you hover over main buttons */
.ecwid .ecwid-btn--primary:hover { background: #e8a043; }

/* Change the color when click on main buttons */
.ecwid .ecwid-btn--primary:active,
.ecwid .ecwid-btn--primary:focus:active { background: #d67506; border: none; padding: 8px 20px; }

/* Change the border color of active main buttons */
.ecwid .ecwid-btn--primary:focus,
.ecwid .ecwid-btn--primary:focus:hover { border: 2px solid #e8a043; padding: 6px 18px; }
Secondary buttons
/* Change the base color of secondary buttons */
.ecwid .ecwid-btn--secondary { background: #e9800b; }

/* Change the color when you hover over secondary buttons */
.ecwid .ecwid-btn--secondary:hover { background: #e8a043; }

/* Change the color when click on secondary buttons */
.ecwid .ecwid-btn--secondary:active,
.ecwid .ecwid-btn--secondary:focus:active { background: #d67506; border: none; padding: 6px 12px; }

/* Change the border color of active secondary buttons */
.ecwid .ecwid-btn--secondary:focus,
.ecwid .ecwid-btn--secondary:focus:hover { border: 2px solid #e8a043; padding: 4px 10px; }
Now to the checkout progress bar aka checkout breadcrumbs.

I got a CSS snippet and added a comment to each CSS rule to help you to colour the breadcrumbs the way you want.

Checkout breadcrumbs
/* Checkout breadcrumbs unvisited links */
div.ecwid-Checkout-BreadCrumbs-link { color: gray; }

/* Checkout breadcrumbs current link */
div.ecwid-Checkout-BreadCrumbs-link-current { color: #1e7ec8; border-bottom: 3px solid #439CA0; }

/* Checkout breadcrumbs visited links */
div.ecwid-Checkout-BreadCrumbs-link-visited { color: #1e7ec8; }

/* Checkout breadcrumbs unvisited circle */
div.ecwid-Checkout-BreadCrumbs-point { border: 1px solid #bfbfbf; }

/* Checkout breadcrumbs visited outer circle */
div.ecwid-Checkout-BreadCrumbs-point-visited { border-color: #1e7ec8; }

/* Checkout breadcrumbs visited inner circle */
div.ecwid-Checkout-BreadCrumbs-point-visited::after { background-color: #1e7ec8; }

/* Checkout breadcrumbs current inner circle */
div.ecwid-Checkout-BreadCrumbs-point-current::after { background-color: #439CA0; }

/* Checkout breadcrumbs unvisited section */
div.ecwid-Checkout-BreadCrumbs-section { background-color: #bfbfbf; }

/* Checkout breadcrumbs visited section */
div.ecwid-Checkout-BreadCrumbs-section-visited { background-color: #1e7ec8; }

/* Checkout breadcrumbs unvisited vertical section */
.ecwid-Checkout-BreadCrumbs-Vertical div.ecwid-Checkout-BreadCrumbs-section { background: #bfbfbf; }

/* Checkout breadcrumbs visited vertical section */
.ecwid-Checkout-BreadCrumbs-Vertical div.ecwid-Checkout-BreadCrumbs-section-visited { background: #1e7ec8; }
And the SSL icon. Here's a code to change its color.

SSL icon
/* SSL icon at checkout */
div.ecwid-AddressForm-secureLockIcon { background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M42 0v42H0L42 0z' fill='%23189DEE'/%3E%3Cpath d='M36.14 30.074v6.215c0 .286-.105.535-.322.74-.21.198-.466.3-.775.3H24.097c-.302 0-.565-.102-.775-.307-.217-.204-.322-.447-.322-.734v-6.216c0-.288.105-.537.322-.74.21-.206.466-.308.775-.308h.362V26.88c0-1.335.498-2.485 1.503-3.443C26.968 22.48 28.17 22 29.57 22c1.4 0 2.602.48 3.607 1.437 1.005.958 1.504 2.108 1.504 3.443v2.146h.363c.302 0 .565.102.775.307.217.204.322.447.322.74zm-9.487-1.048h5.84V26.88c0-.766-.288-1.424-.853-1.974-.58-.543-1.262-.817-2.07-.817-.808 0-1.49.273-2.063.816-.572.543-.854 1.2-.854 1.974v2.146z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; }
The background property looks massive because this time we use an SVG graphic for icons. Basically, to change the colour, you should find all fill properties in the value of the background property and change it. Also, this time # symbol for colours in HEX codes is replaced with %23 encoded value to make the code compatible with Firefox.

How to get codes for other storefront elements?
Cyril D.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.