21 Design

Design covers everything from palettes and colors to fonts and custom CSS. 

In this step, we:

• switch off the block instructions
• change colors for different elements in the quiz
• change the font
• use custom CSS

Transcript:
Hello and welcome back to Riddle. In our quiz, it’s time to look at the design. So we’ve got our content and let’s look at how you can change the colours, different aspects of the styling so that it really matches either your purpose or your brand or both. So, go into the creator for that riddle and we’ve done all the blocks here, we’ve looked at branching logic down here and now click on this paintbrush symbol to go into the palette by default the palette that we have here is called Timeless and there are other palettes that you can choose from here, for example Forest, for example Peachy, and these are palettes that are available for any, any single riddle.

You can also create your own by clicking on Create a Palette, Your Brand Palette, Your Team Palette, whatever it is and setting everything up that you would want to do in here. We’ll go into those details in a moment. What you can also do as well as creating your own as well as using a default is editing an existing default or an existing palette that you’ve already created. So let’s do this as an example. So timeless is the default, and next to timeless click on the three buttons here and then copy, edit palette, so let’s call it Movie Quiz Palette, and within that we have lots of different aspects that we can change. Now let’s go through some of these.

The first thing you can do is change the font by default, it’s Inter, and You can either choose a font from the drop-down menu here. You can use your own font, use a Google font, use an Adobe font. For example, if you clicked on ‘use your own font’, so you have your own, use your own font, and you can then use the URL where you host your font. We can also host the font for you if that’s easier. Just message us if that’s the case. But let’s go back to the default for now. So we’re going to go back to enter okay now underneath this the next thing we can change is block instructions what that means is that when you have a question here for example it tells you select one and it’s the same for any type or any block it would tell you or tell the audience what to do for example select all that apply or type the answer whatever it is and you can disable them here

I prefer to have them off so I’m going to leave it that way but you can just enable and disable next to block instructions. The next thing is the block image. So by default we have the block image here that we’ve inserted in the block as a blurred background. What that means is it takes the colors from that image and extracts them and creates a blurred background underneath. So that you’ve got a really subtle way of having those colors there. You can strip that and disable that here and then it will just be a background color. In this case, it’s white because that is the default for that palette but you can also change that in the colors down here. What you can also do is enable block media as riddled background.

What that does is it, as you can see, it takes the image that we inserted and makes it the background for that whole block. Questions, answers, the button at the bottom, everything. So that’s really nice if the image that you’re using is really a background and just a question of style and colouring and not pertinent for the question you’re asking. In our case, we actually need the images sometimes to be the focus. For example, the questions where we had name the movie from the picture I really want the audience to be able to see the picture clearly so for this quiz it’s not the right option for me but I really like using it in some where yeah it really has this background for the whole thing and not just part of of the riddle so I’ll disable that for now and re-enable block image as blurred background down here.

Okay, the final thing we can do up here in these settings is change the riddle border radius. By default, it’s 24, and this is just about how round the edges are of the four corners of your riddle. It goes from zero, which is then a direct, a complete right angle, up to 50, making it much more round. I like the halfway or almost halfway house of 24. So let’s keep that there. Then the big section underneath is for all the colors. You can change text colors, background colors, button colors, the footer at the bottom, all sorts of different things. So you can really play with that to your heart’s content. Let’s just do an example so you can see the effect it has.

So for example, let’s go to answer background so that these are all the different answer options. At the moment, it’s white and it’s transparent. I could choose a color that comes from this list of colors here, which automatically appears because these are the colors that are used by that palette. So that’s really useful if you don’t want to put in a new color up here. For example, okay, you can change the transparency and see all these colors here. You can, of course, choose one here. You can put your RGBA in here or your hex code in there. Or you can, as I say, use one of these colours that already exist. So let’s do that. Let’s take this list and choose this green from the right, originally from the right answer section.

But I’m going to use it now for this answer background. Click on apply. And now it’s the colour for every single answer choice. So, yeah, that’s something that you can really play around with and have fun with. I want to put it back to white and transparent. Click on apply each time and there we go. That’s what we what I want for this quiz here. Underneath all these different color changes There’s a final section custom CSS if you’ve got other elements where you really want to focus on changing one specific thing or something that goes beyond colors and Beyond these options at the top then you can edit here click on edit under custom CSS and here’s a space for you to copy and paste or type CSS code and make these changes to your riddle so okay the sky’s the limit here depending on how much CSS you want to use we have on our website we have some code snippets that you can copy and paste directly into your riddle

Or you can type your own as I say. So just to give us an example, let’s think about the space in between these different answer options. So I want to imagine that I want to make it even smaller. So I’m going to copy and paste some code into there. Click on format code and then save. And then straight away you can see the change that’s taking place in the riddle. leave this blank you can fill this with code that’s up to you and yeah something really extra that you can really fine-tune your riddle to suit your brand and yeah I really like playing around with it but for now let’s leave it at that so you’ve got an example and yeah we we’re we’re done taking a look through at the different design settings if you have any other questions then feel free to write to us at academy riddle . com or write to us on our support chat and i look forward to seeing you in the next video thank you.