> For the complete documentation index, see [llms.txt](https://esmp-fun.gitbook.io/plugins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://esmp-fun.gitbook.io/plugins/markdown-guide/look-and-layout/style.md).

# style.css

`plugins/MarkdownGuide/style.css` sets how every part of a page looks: colours, sizes, spacing, the boxes and the sidebar. It works like CSS on a website: the part of the page, then its settings in braces.

```css
h1 { color: gold; size: 2; margin-bottom: 1; }
p  { color: #d8d3e3; line-spacing: 2; }
```

Save it, then run `/guide reload`. A rule with a mistake in it is skipped and the rest still works, so a typo never breaks the guide. Delete the file to go back to the built-in look.

{% hint style="info" %}
**In the editor**, **Style** under **Look and layout** shows this file with a dot in front of every colour, and the preview shows your changes before you save.
{% endhint %}

## The parts of a page

| Name                                                                                     | Is                                            |
| ---------------------------------------------------------------------------------------- | --------------------------------------------- |
| `page`                                                                                   | The panel the whole page sits on              |
| `*`                                                                                      | Everything, for settings every part shares    |
| `h1` to `h6`                                                                             | Headings, by their number of `#`              |
| `p`                                                                                      | Paragraphs                                    |
| `ul`, `ol`                                                                               | Bullet lists, numbered lists                  |
| `blockquote`                                                                             | Quotes                                        |
| `callout-note`, `callout-tip`, `callout-important`, `callout-warning`, `callout-caution` | The five boxes                                |
| `code`                                                                                   | Code blocks                                   |
| `code-inline`                                                                            | `code` inside a sentence                      |
| `table`                                                                                  | Tables                                        |
| `hr`                                                                                     | The line from `---`                           |
| `item`                                                                                   | An item picture on a line of its own          |
| `link`                                                                                   | Links                                         |
| `button`                                                                                 | Buttons                                       |
| `sidebar-item`                                                                           | An entry in the sidebar                       |
| `sidebar-active`                                                                         | The entry for the page being read             |
| `sidebar-section`                                                                        | The sections listed under it                  |
| `sidebar-heading`                                                                        | An entry that isn't a link, used as a heading |

## Settings

| Setting                                  | Does                                                                               | Example                       |
| ---------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------- |
| `color`                                  | The colour of the text: one of Minecraft's sixteen, or any `#rrggbb`               | `color: gold;`                |
| `bold`, `italic`                         | Bold or italic text                                                                | `bold: true;`                 |
| `size`                                   | How big the text is, times normal: 1.25, 1.5, 1.75, 2, 2.5 or 3                    | `size: 1.5;`                  |
| `margin-top`, `margin-bottom`            | Blank lines above and below. Where two parts meet, the bigger gap wins             | `margin-top: 2;`              |
| `line-spacing`                           | Pixels of room between lines of text, 0 to 8, on `p`, `ul`, `ol`, quotes and boxes | `line-spacing: 2;`            |
| `indent`                                 | Pixels in from the left, on any part                                               | `indent: 8;`                  |
| `background`                             | A panel of this colour behind it                                                   | `background: #10221a;`        |
| `bar`                                    | A coloured bar down the left of it                                                 | `bar: #66d17a;`               |
| `rule`                                   | A line under a heading, in this colour                                             | `rule: #4a3870;`              |
| `marker`                                 | The bullet of a list, or the mark before a sidebar entry; `""` for none            | `marker: "•";`                |
| `marker-color`                           | The colour of bullets and numbers                                                  | `marker-color: #8a7bb0;`      |
| `text`                                   | In a box, the colour of its text; `color` is then its title                        | `text: #d8d3e3;`              |
| `label`                                  | In a box, the title at its top                                                     | `label: "TIP";`               |
| `underline`                              | Whether links are underlined                                                       | `underline: false;`           |
| `frame`                                  | Two characters round a button's words, apart by a space                            | `frame: "[ ]";`               |
| `header-background`, `stripe-background` | A table's header row, and every other row                                          | `stripe-background: #1d1628;` |
| `accent`                                 | On `sidebar-active`, the bar at the left of its band                               | `accent: #b48cff;`            |
| `shift`                                  | On sidebar entries, pixels lower in their line, 1 to 8                             | `shift: 4;`                   |
| `border`                                 | On `page`, the line round the panel and between the columns                        | `border: #3a2a55;`            |

A sidebar marker can be a picture from the `images` folder: `marker: url('mark.png');`

## Examples

A gold title with a line under it:

```css
h1 { color: gold; size: 2; bold: true; rule: #6b5320; margin-bottom: 1; }
```

Roomier paragraphs:

```css
p { line-spacing: 4; margin-bottom: 1; }
```

A box of your own colours:

```css
callout-tip { color: #66d17a; text: white; background: #10221a; bar: #66d17a; label: "GOOD TO KNOW"; }
```