Customize the design of your site: colors and fonts

Colors and Design

From the visual editor, you have a palette of 10 colors to customize the background colors of the blocks and the color of your text.

To customize your color palette, enter your html color codes at the end of the second custom CSS window named CSS Variables from the Appearance tab, when you click on My Sites, then on Edit (small pencil icon).


--color1: #ABD7D1;
--color2: #121C38;
--color3: #43619A;
--color4: #7ad1b9;
--color5: #fafafa;
--color6: #4D9DE0;
--color7: #E15554;
--color8: #E1BC29;
--color9: #7768AE;
--color10: #ccc;


You also have the possibility to modify some design elements of your site to respect your graphic charter, from the second custom CSS window.

For example

| Variables | Notes
| -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| primary color taken from your site |
| <p>/* Text */</p><p>--base: 16px;</p> | text font size |
| <p>/* Layout */</p><p>-- border: #7ad1b9;</p> | border at top of navigation menu |
| <p>/* Buttons */ </p><p>--btn-bottom: var(--primary); </p><p>--btn-color: var(--reverse-text);</p> | primary button color and primary button text |
| <p>/* Buttons */ </p><p>--btn-secondary-fond: var(--text); </p><p>--btn-secondary-color: var(--text-inverse);</p> | secondary-button color and secondary-button text |
| <p>/* Card */ </p><p>--card-bottom: #FFF; </p><p>--card-highlighted: #fffae1; </p><p>--card-highlighted-footer: #ffdd49;</p> | colors repeated in sales tunnel and order summary |
| <p>/* Footer */ </p><p>--footer-background: #FFF; </p><p>--footer-text: var(--text);</p> | color of footer and text contained in footer |

The variables available with the visual editor are:

--primary: #ccc;

  /* Text */
  --text: #074957;
  --text-leger: #9f9f9f;
  --reverse-text: #FFF;
  --link: #4d8bf4;
  --base: 16px;
  --danger: red;
  --border: #e8e8e8;

  /* Layout */
  --bottom: #FFF;
  --brown-bottom: #fafafa;
  --edge-border: #7ad1b9;
  --edge-height: 90px;
  --header-bottom: #FFF;
  --container: min(calc(100vw - 30px), 1090px);
  --policy: Roboto;
  --policy-title: Roboto;
  --icon-bottom: #FFDD49;

  /* Buttons */
  --btn-background: var(--primary);
  --btn-color: var(--reverse-text);
  --btn-secondary-fond: var(--text);
  --btn-secondary-color: var(--text-inverse);

  /* Card */
  --card-bottom: #FFF;
  --card-highlighted: #fffae1;
  --card-highlighted-footer: #ffdd49;

  /* Footer */
  --footer-background: #FFF;
  --footer-text: var(--text);

  /* Account */
  --account-sidebar-background: var(--text);
  --account-sidebar-active: #FFDD49;
  --account-sidebar-text: var(--text-reverse);
  --account-sidebar-text-off: #b9b8b8;

  /* Table */
  --table-header-bottom: #f1f5f6;
  --table-header-text: #074957;
  --table-alt-bottom: #f7f7f7;

  /* Cookie */
  --cookie-background: #fff;
  --cookie-color: #666;
  --cookie-color-title: #000;
  --cookie-color-primary: #4caf50;
  --cookie-color-link: #4b4be6;
  --cookie-offset: 15px;
  --cookie-radius: 5px;
  --cookie-padding: 20px;
  --cookie-border: #e7e7e7;
  --cookie-action-hover: #f5f5f5;
  --cookie-disable: #adadad;
  --cookie-cursor: #fff;

  /* Shop */
  --shop-background: #FFF;
  --shop-background-products: #f5f2f2;
  --shop-onglet-bordure: #53e792;
  --shop-counter-products: #da7c55;
  --space: 8px;

The first window of custom CSS allows you to bring additional elements in CSS to push certain design aspects on your site.

Fonts

Choose your title and text fonts with Google Fonts.

The chosen fonts are to be filled in 2 places:

Click on My sites, then on Edit, in the tab Aparrence fill in the fields title font and text font)

AND

Click on My sites, then on Edit, in the Appearance tab, in the second custom CSS window, in the Fonts and Fonts-titles values in Layout

Updated on: 24/01/2023