# Beginner tricks I figured out while making my first Narrat game

**URL:** <https://narrat.discourse.group/t/beginner-tricks-i-figured-out-while-making-my-first-narrat-game/118>\
**Category:** Help\
**Tags:** guide\
**Created:** [1 August 2023 16:57 UTC](https://narrat.discourse.group/t/beginner-tricks-i-figured-out-while-making-my-first-narrat-game/118 "2023-08-01T16:57:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![celesti](https://yyz2.discourse-cdn.com/free1/user_avatar/narrat.discourse.group/celesti/32/86_2.png) [@celesti](https://narrat.discourse.group/u/celesti)\
**Post date:** [1 August 2023 16:57 UTC](https://narrat.discourse.group/t/beginner-tricks-i-figured-out-while-making-my-first-narrat-game/118/1 "2023-08-01T16:57:27Z")

</div>

These are probably common sense to people familiar with HTML and CSS, but I thought it might be helpful for other beginners!

# Bold and Italic text

These are done with HTML tags! Surround text with the `<strong> strong tag </strong>` to **make them bold,** or the `<em> emphasis tag </em>` to _make it italic._

There are also `<b>` and `<i>` tags, but I read that their use is discouraged, since they only make a visual change and don’t work with screenreader software.

Read more about HTML tags here:  
[HTML \<strong\> Tag](https://www.w3schools.com/tags/tag_strong.asp)  
[HTML \<em\> Tag](https://www.w3schools.com/tags/tag_em.asp)

# Inserting line breaks

I wanted a bit of empty space between each label for pacing, so I added the [HTML \<br\> Tag](https://www.w3schools.com/tags/tag_br.asp) at the starts of labels.

The code:

```narrat
  "Darkness is always the same no matter where you are."
  jump snack

snack:
  wait 1000
  "<br /><br />You search the snack bar for something to eat, but your pupils are slow to adjust. You scan the dull mass of plastic wrappings, trying to remember what it looked like in the day."

```

What it looks like:

 ![Dialogue box with a large empty space between passages, transcript above.](https://global.discourse-cdn.com/free1/uploads/narrat/original/1X/59cb4f6ab3a8947e407ff0ed29f29079707cc445.png)

Line break tags don’t play well with `talk` commands though, since the line breaks would be wrapped inside quotation marks. So for labels that began with a `talk` command, I added the line break to the end of the previous label instead. I didn’t try putting line breaks on its own line of text, but I think that would require an extra input from the player instead of being automatic.

# Changing the colour of think text

I wanted to change the [think text](https://docs.narrat.dev/commands/text-commands/talk-function-1.html) colour from its default blue to the same as regular text. I did this by editing the `main.css` file. Here’s the code that worked for me:

```css
/* main.css */
.think-command {
  color: var(--text-color) !important;
}

```

# Hiding the HUD stats

You can’t simply delete all the stats in `config.yaml`, the game will throw an error. Instead, you’ll need to edit the game’s CSS to hide them. This is the code that worked for me:

```css
/* main.css */

.hud {
  opacity: 0 !important;
}

```

The Narrat documentation has a great guide with more info on CSS editing:

> **[Customising the UI theme | Narrat Documentation](https://docs.narrat.dev/guides/customising-ui.html)**
>
> This page explains how to use CSS to customise the visual look and theme the game and UI in Narrat

---

<div class="post-metadata">

**Author:** ![Narrat-Admin](https://yyz2.discourse-cdn.com/free1/user_avatar/narrat.discourse.group/narrat-admin/32/429_2.png) [@Narrat-Admin](https://narrat.discourse.group/u/Narrat-Admin)\
**Post date:** [1 August 2023 17:22 UTC](https://narrat.discourse.group/t/beginner-tricks-i-figured-out-while-making-my-first-narrat-game/118/2 "2023-08-01T17:22:59Z")

</div>

Thanks for posting this 😄 some of this I should add to the docs.

Things like this are a really good use of the forum though because they’ll help people in the future, or when someone is searching for something they can’t find in the docs ✨