Advanced Guide Customisation

• This is an inspector guide, so be sure to refer to the 'Introduction to Inspector.
• We're aware that we can customize the appearance of our guides using custom themes, as explained in the 'Adding a Narrative Guide.' However, it's worth noting that the guide text editor functions similarly to the main Demoboost editor. This means that any changes made in the Inspector will be saved and persist. Consequently, we can perform operations that are typically unavailable in the Guide text editor, such as modifying font colors, sizes, and adding images.

Effortlessly kickstart your journey with our beginner-friendly guides!

Step 1: Open up the demo in the Editor.

Step 2: Add a new guide or edit an existing one (refer to Adding narrative guide)

Step 3: Add your guide text using the editor. Once you're done, right-click inside it and click on Inspect.

Step 4: You'll see an HTML document structure, as you usually would when using the inspector. It works in the exact same way as in the Demoboost Editor, with some caveats:

-You cannot use JavaScript

-Only text or image HTML elements are allowed (you cannot use input fields, buttons etc.)

Step 5: To change the text color and size, follow these steps: select the text you wish to modify, and then add the corresponding CSS properties in the Styles panel.

-Colour can be changed with the color: [color]; property.

-Size can be changed with the font-size: [size]; property.

-For more information about tweaking text with CSS, visit the documentation. https://www.w3schools.com/css/css_text.asp

Step 6: To add an image or GIF, you'll need to host it somewhere first so that you have a direct link. There are many free image hosting services available, so you can choose your preferred one. Keep in mind that the image must be publicly available. Alternatively, you can convert your image to Base64 code using a tool like (https://www.base64-image.de/). This method eliminates the need to host the image, which is useful if you want to keep the image private.

Step 7: Once you have your direct link to the image (or its base64 code), right-click on the element that will be above your image in the inspector and choose Edit as HTML.

Step 8: Insert an <img>HTML element after the existing element's code:

<img src="YOUR-IMAGE-URL">

If the image is the first element in the guide, the Save button might be inactive, as the image is treated as an empty element. In such cases, insert an &nbsp; right before it:

&nbsp;<img src="YOUR-IMAGE-URL">

Refer to the element's documentation if you need more information. https://www.w3schools.com/tags/tag_img.asp

• The image has been inserted. You can adjust its styling properties, like size, by selecting it in the Inspector and adding CSS rules in the Styles panel if it doesn't fit well in the guide.
  ‍