# Design Settings

{% hint style="info" %}
New design settings variable will only appear in the BO after:\
1- Update the theme\
2- Go on the local website one time to generate compilation\
3- Design settings will appear in the BO
{% endhint %}

Some theme have design settings allowing the user to change colors, font, background images etc. for the website.\
&#x20;When they change a design setting, it re-compiles the SASS of the theme with the new values.

![Screenshot of design settings in backoffice](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-Lwn1OMFQeGNhMEdMgMI%2F-Lwn1oNvFkcMEzCS3MqK%2Fdesign-setting-screen.png?alt=media\&token=c432b91f-cfaa-4092-811f-90e7211b30fd)

Let's do a simple example where we can change 3 variables.

1. Create the config file that the system will read. Create `sass/_config.scss`

```
$body_background_color-color-color: #FFFFFF;
$body_text-color-color: #333333;

@import "website"; /* do not remove this line */
```

1. Import the file in `main.scss` before any file needing these variables.

In `main.scss`

```
// config backo
@import 'config';

body {
    background: $body_background_color-color-color;
    color: $body_text-color-color;
}
```

In the backoffice, you will see 2 new variables in the "**Color groups**" tab, and the user can now choose the one he wants.

### &#x20;Variables name / type / tab

The pattern for the name of the variable is `$key-tabname-type`.&#x20;

{% hint style="warning" %}
Each information is split by the **`-`** character, so you can't use it inside the key
{% endhint %}

```
$key-tabname-type: defaultValue;
```

### &#x20;List of available tabs

* general
* color
* font
* image (WIP)

### &#x20;List of types of variable

#### Simple input (no type defined)

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOws4rEcNXd-aiChrR%2Fdefault-input.png?alt=media\&token=87964abe-6b5d-4618-b0f5-23c696af8471)

```
$default_radius-general: 0px; // variable "default_radius", in tab "general"
```

#### Color Picker `color`

User can select a color and use opacity

```
$demo-general-color: #FFF; // variable "demo", in tab "general", type of field "color"
```

<div align="left"><img src="https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOujvkQnGe6MCmAiGL%2Fcolor-picker.png?alt=media&#x26;token=c354c045-8f36-4c73-b77f-abd3304cdeb6" alt=""></div>

#### Image `image`

WIP, avoid using it for now

#### Font family `font`

Select a font-family. If this is a Google Font, it will automatically add to the website the link tag to import google font

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOwHD0kXl83gFkf_T6%2Ffont-family.png?alt=media\&token=2a994668-9459-45d7-ba79-63b4b30c756f)

```css
$hero_caption_title_font_family-font-font: Lora;
```

#### Font Style `font_style`

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOwbsWAZn6SiREkE_X%2Ffont_style.png?alt=media\&token=b1a7518b-8430-4e49-93f4-e135531851e3)

####

```css
$hero_caption_title_font_style-font-font_style: normal;
```

#### Text Transform `text_transform`

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOwiVW3id-RdPuCjRh%2Ftext_transform.png?alt=media\&token=1fbaab70-37b2-4cb8-9685-83f638a8af6b)

```css
$hero_caption_title_text_transform-font-text_transform: none;
```

#### Toggle / Switch `switch` (0 or 1)

Value will be `0` or 1

![](https://3028197268-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYM6a76uZePOTen0dIw%2F-McOsgpFMnJ9mLYCzKaZ%2F-McOwozf3BXPe7jKoj0n%2Fswitch.png?alt=media\&token=f7796b94-4ccb-4383-a6e2-c7e1cb750e53)

```css
$enable_breadcrumb-general-switch: 1;
```

## Examples

```css
$hero_caption_title_font_family-font-font: Lora;
$hero_caption_title_font_size-font: 40px;
$hero_caption_title_font_color-font-color: #FFF;
$hero_caption_title_font_weight-font: 400;
$hero_caption_title_font_letter_spacing-font: 0;
$hero_caption_title_font_line_height-font: normal;
$hero_caption_title_font_style-font-font_style: normal;
$hero_caption_title_text_transform-font-text_transform: none;
$pattern_benefit-image-image: '/integration/name-of-your-theme/public/images/coral-reef.png';

// GENERAL SETTINGS
$enable_breadcrumb-general-switch: 1;
```

So for example `$hero_caption_title_font_size-font: Lora;`

* key = `hero_caption_title_font_size`
* tab = `font`
* type = no type ? ==> default input
* default value = Lora

Another  example `$hero_caption_title_font_color-font-color: #FFF;`

* key = `hero_caption_title_font_color`
* tab = `font`
* type = color
* default value = #FFF
