# Shapes

Shapes are handy if you want to add personality to your website.

In this chapter, you will learn how to add standard and custom background and image shapes.

## Background shapes

Background shapes are SVG files that you can add as a decorative background in your different
sections. Each shape has one or several customizable colors, and some of them are animated.

### Standard

A large selection of default background shapes is available.

**Use**

```xml
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
     </div>
</section>
```

`data-oe-shape-data` is the location of your shape.

Flip the shape horizontally or vertically by using the X or Y axis.

```xml
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06','flip':[x,y]}">
    <div class="o_we_shape o_we_flip_x o_we_flip_y o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>
```

#### Colors mapping

You can also change the default color mapping of your shape.

##### Switch colors mapping

First, put the c\* color (here `4`).

Then, the replacement color (here `3`). These replacement colors also range from 1 to 5:

- `1` = background color of the color preset 1 (o-cc1).
- `2` = background color of the color preset 2 (o-cc2).
- `3` = background color of the color preset 3 (o-cc3).
- `4` = background color of the color preset 4 (o-cc4).
- `5` = background color of the color preset 5 (o-cc5).

```{code-block} scss
:caption: '``/website_airproof/static/src/scss/boostrap_overridden.scss``'

$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: 1));
```

##### Add extra colors mapping

Adding extra color mapping allows you to add a color variant to the template of a shape while
keeping the original.

```{code-block} scss
:caption: '``/website_airproof/static/src/scss/boostrap_overridden.scss``'

$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Zigs/06', 'second', (4: 3, 5: 1));
```

```xml
<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06 o_second_extra_shape_mapping"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>
```

### Custom

Sometimes, your design might require creating one or several custom shapes.

Firstly, you need to create an SVG file for your shape.

```{code-block} xml
:caption: '``/website_airproof/static/shapes/hexagons/01.svg``'

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="86" height="100">
    <polygon points="0 25, 43 0, 86 25, 86 75, 43 100, 0 75" style="fill: #3AADAA;"/>
</svg>
```

Make sure to use colors from the default Odoo palette for your shape.

```scss
default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}
```

Declare your shape file.

```{code-block} xml
:caption: '``/website_airproof/data/shapes.xml``'

<record id="shape_hexagon_01" model="ir.attachment">
    <field name="name">01.svg</field>
    <field name="datas" type="base64" file="website_airproof/static/shapes/hexagons/01.svg"/>
    <field name="url">/web_editor/shape/illustration/hexagons/01.svg</field>
    <field name="public" eval="True"/>
</record>
```

```{eval-rst}
.. todo:: Missing description in table ...
```

```{eval-rst}
.. list-table::
   :header-rows: 1
   :stub-columns: 1
   :widths: 20 80

   * - Field
     - Description
   * - name
     - Name of the shape
   * - datas
     - Path to the shape
   * - url
     - ...
   * - public
     - Makes the shape available for later editing.
```

Define the styles of your shape.

```{code-block} scss
:caption: '``/website_airproof/static/src/scss/primary_variables.scss``'

$o-bg-shapes: map-merge($o-bg-shapes,
    (
        'illustration': map-merge(
            map-get($o-bg-shapes, 'illustration') or (),
            (
                'hexagons/01': ('position': center center, 'size': auto 100%, 'colors': (1), 'repeat-x': true, 'repeat-y': true),
            ),
        ),
    )
);
```

```{eval-rst}
.. list-table::
   :header-rows: 1
   :stub-columns: 1
   :widths: 20 80

   * - Key
     - Description
   * - File location
     - `hexagons/01` corresponds to the location of your file in the `shapes` folder.
   * - position
     - Defines the position of your shape.
   * - size
     - Defines the size of your shape.
   * - colors
     - Defines the color c* you want it to have (this will override the color you specified in your
       SVG).
   * - repeat-x
     - Defines if the shape is repeated horizontally. This key is optional and only needs to be
       defined if set to `true`.
   * - repeat-y
     - Defines if the shape is repeated vertically. This key is optional and only needs to be
       defined if set to `true`.
```

Lastly, add your shape to the list of shapes available on the Website Builder.

```{code-block} xml
:caption: '``/website_airproof/views/snippets/options.xml``'

<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Shapes">
    <xpath expr="//*[hasclass('o_we_shape_menu')]/*[last()]" position="after">
        <we-select-page string="Theme">
            <we-button data-shape="illustration/hexagons/01" data-select-label="Hexagon 01"/>
        </we-select-page>
    </xpath>
</template>
```

Your custom shape can now be used the same way as standard shapes.

## Image shapes

Image shapes are SVG files you can add as a clipping mask on your images. Some shapes have
customizable colors, and some are animated.

### Standard

A large selection of default image shapes is available.

**Use**

```xml
<img src="..."
    class="img img-fluid mx-auto"
    alt="..."
    data-shape="web_editor/solid/blob_2_solid_str"
    data-shape-colors="#35979C;;;;"
>
```

```{eval-rst}
.. list-table::
   :header-rows: 1
   :stub-columns: 1
   :widths: 20 80

   * - Attribute
     - Description
   * - data-shape
     - Location of the shape
   * - data-shape-colors
     - Colors applied to the shape
```

:::{warning}
Sometimes, your image shape might not be applied after adding your changes. To fix the issue,
open the Website Builder and save the page to force the shape to load.
:::