Step 7: Customize the design

Here we’ll show you how to make your Riddle your own, matching it to suit your brand, website, needs, or taste. In this example, we:

• apply a default palette
• edit and create a palette
• customize colors
• change fonts
• add custom CSS

Here are our custom CSS snippets in our Help Center for you to use:
CSS snippets help guide.

Transcript:
Hi everyone, You have your content, your settings, let’s now look at some design features. You can leave the riddle as it is, it’s ready to go, ready to play, but it might be nice to change a few elements such as colours and fonts so that it matches your brand and also what you’re trying to do with this riddle for this use case. So let’s go and do a few things there. On the left hand side above settings you need to click on the paintbrush which will take you to palette. By default, the palette that’s set to this riddle is called Timeless. It’s this black and white base palette. And you can use any of our other default palettes, such as my other personal favorite is Forest.

And that will then be applied to your riddle right away. And you can always see that on the right-hand side of all these palette settings as well. So it’s nice while you’re working and editing and creating that you can see that. Now, within that palette or what you can do on top of using that palette is edit some things in that palette. So let’s take our original Timeless palette and make a copy of it. Click on the three dots next to Timeless. Click on Copy and Edit. Let’s call it Test Name. Save. And you now have that palette again, but you can make as many changes to it as you like. So you’ve got all of these options for colours, for example, for text, for links, for answers, for buttons, for the footer, if you’ve got one in there.

So let’s test it out, for example, with the global text. We could select that black colour and change it to this reddy pinky colour, click on Apply every time, and then you’ll see it here. So play around with that so that you’ve got the colours that you would like. What you can also do is change the font up here. You can select a font from the drop-down menu, or if you have a business or enterprise subscription, you can also use your own font. So you could upload your brand font, for example, and use that for everything in your riddle or for certain things in your riddle. That’s again up to you. Another thing we can do is, when we play the riddle, is you can see all these block instructions here.

For example, here it tells us to select one answer option. I can’t select more than one. And you can, if you want to, switch them off by disabling block instructions. That then goes away there if it’s unnecessary for you. And another thing, next level customization that you might want to use is custom CSS. So, for these cascading style sheets, what you can do is add your own snippets either use them from our help website or use your own and you can add them in here. Scroll down to custom CSS, click on edit here and you can copy and paste any code into this gray field here. So, I’m going to use this code here to capitalize the first letter of each word on buttons. So, I copied it.

I’m going to paste it into here. Click on format code. You can see that choosing button as it is at the moment. Click on save. And now you can see that taking effect straight away. What this allows you to do is to really target any specific element in your riddle so that you can change something just to suit you or what you need for your riddle. So we’ve had a look at some different design settings. Play around with that now if you like, and if you have any questions, feel free to write to us at academyriddle. com or on our support chat on our website, and after that, you’re ready to release your riddle into the world. So I’ll see you in the next video to publish and embed your riddle.