# Configuration help

### <span class="mw-headline" id="bkmrk-styling-1">Styling</span>

All widgets have a field called "Custom CSS". This allows addition of styling, when that stylesheet is shown.

As of version 8359 it is possible to use `#THISWIDGET#` to target that specific widget.

`#THISWIDGET#` will automatically be replaced by the unique html-id of that widget, eg. `#Widget69`, thus allowing css that can be copied to another widget without the need to know the ID.

### <span class="mw-headline" id="bkmrk-icons-1">Icons</span>

All the below properties are required for the button

- **ButtonGlyph**: Icon of the button (3 options) 
    - [FontAwesome 4](https://fontawesome.com/v4/icons/): fa-home
    - [Material icons](https://materializecss.com/icons.html): home
    - [Bootstrap Icons](https://icons.getbootstrap.com/): bi-house-door-fill
    - Icon URL: [http://starwars.com/LukeSkyWalker.png](http://starwars.com/LukeSkyWalker.png)
    - Single character: ”P”
- **Title**: Text below the icon
- **Content**: Url of the button

Optimally buttons are places in the **Toolbar** zone on the page, where they are rendered as normal buttons. If placed in other zones they are rendered as large squares.

### <span class="mw-headline" id="bkmrk-sizing-1">Sizing</span>

#### <span class="mw-headline" id="bkmrk-length-1">Length</span>

Setting the length of a widget limits how many rows are shown. This setting only applies to lists.

#### <span class="mw-headline" id="bkmrk-size-1">Size</span>

Setting the height of a widget forces it to be that number, times 100, pixels tall. This setting does not affect lists.

Setting the width of a widget applies a set of [bootstrap column-classes](https://getbootstrap.com/docs/4.1/layout/grid/), setting the width in a responsive manner.

The lookup follows this logic:

- 1 = `col-4 col-md-2 col-xl-1`
- 2 = `col-6 col-md-4 col-xl-2`
- 3 = `col-6 col-lg-4 col-xl-3`
- 4 = `col-12 col-md-6 col-xl-4`
- 5 and 6 = `col-12 col-lg-8 col-xl-6`
- 7, 8, and 9 = `col-12 col-xl-8`
- 10, 11, and 12 = `col-12`
- Above 12 = `col`