CSS editor – how can I use?

You can use CSS with Riddle’s online quiz maker to customize pretty much every aspect of your riddles.

Using our CSS editor, you can customize almost every visual aspect of your Riddle quiz, personality test, or other interactive content.

(New to CSS? Here’s a good introduction about how to get started.)

Here’s just a small sample including:

• Buttons – want square buttons? What about rounder, wider, or narrower?
• Borders – remove/edit the border around your riddles.
• Hover states – change the look/feel when mousing over/clicking any button.
• Font types & sizing – complete control over every text element.
• Quiz layout – move things around. Want your quiz answers in one column or two? How about moving the logo?

We totally get it.

Sure, quizzes created with our online quiz maker using our standard layouts look good embedded on your site – but sometimes you want total creative control.

That’s where our CSS editor comes in.

As part of our Business and Enterprise plans, you can change virtually every visual element of your Riddles.

• Want to get rid of the 1 px border around the quiz? No problem.
• How about changing the colors of your Facebook/Twitter icons. Done.
• Display answers in one larger column instead of our default two columns.

CSS example – one quiz before/after using CSS

Want to see CSS in action with our quiz maker?

Look at these two quiz examples – one with CSS, and one without:

• Our standard ‘epic’ layout – no CSS: https://www.riddle.com/view/336731
• With CSS applied: https://www.riddle.com/view/338618

Using our CSS editor (in Riddle 2.0)

Creating a quiz in Riddle 2.0? Here’s how use our CSS editor.

1. Create or edit a quiz, personality test, poll/survey, or form.
2. Go to our design step and select palettes.

3. Edit a palette or create a palette from scratch.
4. Click on ‘Custom CSS’.

5. Add your CSS – immediately see the changes in your quiz preview.

Sample CSS codes to use (Riddle 2.0)

We’ve included two code samples you can use to customize your quizzes.

Code example: changing font color in form blocks

This is a small example – giving you control over the color of the text entered into form blocks.

.riddle .form-control {
color: red;
}

Code example: centering text in answer fields

You can use this more detailed example to center the text in each answer option.

.riddle .quiz-choices .choice .choice-content .choice-title { 
align-self: center; margin-bottom: 0; text-align: center; 
}

IMPT:When editing CSS in Riddle 2.0, you need to include .riddle to any selector.

• Correct: .riddle button.btn.btn-primary
• Wrong: button.btn.btn-primary

Video: Customizing with our CSS editor (Riddle 1.0)

Here’s a video walkthrough – including live quiz examples that use Riddle’s CSS editor:

For more information and detailed ‘how to’ steps – we recommend checking out our ‘Customize (almost) anything with our CSS Editor’ blog post.

Sample code – try in your quiz! (Riddle 1.0)

Want to try it out?

CSS can vary across different layouts and quiz types – for example, our newer epic layout uses different class names than our classic and modern layouts.

Check out our sample code below – it was designed for our ‘Epic’ layout using our ‘Quiz’ format.

For more options, here’s our handy library of 60+ CSS tweaks across all our different Riddle layouts in our online quiz maker.

body {
    font-family: "aktiv-grotesk", sans-serif;
}

.fb-overlay {
    background-color: white;
    border: solid 2px black;
}

.fb-overlay a {
   color: black;
}

h1 {
font-weight: 700;
font-style: normal;
font-size: 120%; 
text-align: justify !important;
}

h2 {
font-weight: 300;
font-style: normal;
text-align: justify !important;
margin-bottom: 0 !important;
}

p {
text-align: left !important;
}

.footer {
  visibility: hidden;
}

@media (max-width:1200px)  {
   h1 {
   text-align: left !important;
    }
 }

@media (max-width:396px)  {
   h1 {
   font-size: 100% !important;
    }

   h2 {
   font-size: 80% !important;
    }
 }

.content-div {
    background-color: #FFF !important;
    color: #000 !important;
}

.key-color-bg, .btn {
  background-color: #FFF !important;
  color: #000 !important;
  border: solid 2px black !important;
  box-shadow: 0 6px 30px 0 rgba(0,0,0,.18);
  border-radius: 0 !important;
opacity: 1 !important;
}

.key-color-bg:hover, .btn:hover {
    background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
    color: #fff !important;
}

p {
    font-weight: normal;
    line-height: 1.6;
    color: #6d6d6d;
}

.pageProgressIndicator {
    background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.pageProgressWrapper {
    border-bottom: 1px solid black !important;
}

.choice {
   background-color: #fff !important;
   border: solid 2px black !important;
   box-shadow: 0 6px 30px 0 
   rgba(0,0,0,.18) !important;
}

.choice:hover {
    background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}


@media (max-width:481px)  {
    .riddle-page-header {
             padding-left: 4px !important;
             padding-right: 4px !important;
    }

   .riddle-page-content {
       padding-left: 0 !important;
       padding-right: 0 !important;
}

 .riddle-page-content p, h1, h2 {
       padding-left: 4px !important;
       padding-right: 4px !important;
} 
 }

span.circle {
     display: none !important;
}

div.choice-text {
     margin-left: 4px !important;
}

.form-element-description {
   display:none !important;
}

form input[type=text], form input[type=email], form input[type=search], form input[type=password] {
font-size: 1.1rem !important;
    color: #000 !important;
    border: none !important;
    border-bottom: 1px solid #000 !important;
    font-weight: 500 !important;
    width: 100% !important;
    display: block !important;
    padding: 13.5px 8px !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    font-family: "aktiv-grotesk", sans-serif;
}

.btn-submit {
    font-size: 1.2rem !important;
    border: 0 !important;
    width: auto !important;
    min-width: 215px !important;
    max-width: 100% !important;
    font-weight: bold !important;
    color: #fff !important;
    background: #000 !important;
    border: 2px solid #000 !important;
    padding: 13px 28px 11px !important;
    margin: 20px 0 20px !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    letter-spacing: .25px !important;
    box-shadow: 0 6px 20px 0 rgba(0,0,0,.18) !important;
    transition: border .2s ease-in-out,background .2s ease-in-out !important;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
 color:transparent !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color:transparent !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color:transparent !important;
}
:-moz-placeholder { /* Firefox 18- */
  color:transparent !important;
}

.ql-size-large, .form-element-title {
    font-size: 1rem !important;
    color: black !important;
    font-weight: bold !important;
}
 
.ql-size-large::after {
   content: " *";
   color: red;
}

input:focus, textarea:focus, .choice:focus, .choice.active:focus {
    outline-color: black !important;
}

.result-score strong {
    font-size: 100% !important;
}

.result-page .riddle-page-header {
    background-color: #FFF !important;
}

.unrolled .riddle-page-header {
        background-color: #f6f8f9 !important;
}

.chosen {
    background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.correct {
background: #5AB87F !important;
background-color: #5AB87F !important;
}

.choices>.correct { 
background: #FFF !important;
background-color: #FFF !important;
    color: #000 !important; 
    font-weight: 400 !important;
}

.choices>.chosen {
background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
}

.choice-text {
   font-weight: 400 !important;
}

.explanation-content { 
   border: dashed 2px black !important;
}

.correct_circle_animation {
  stroke: #838ac3 !important;
}

.icon-linkedin {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.correct-icon, .wrong-icon {
   color: white;
}

.correct-icon span, .wrong-icon span {
color: white;
     font-weight: 900 !important;  
     text-transform: lowercase !important;
 display: inline-block !important;
}

.correct-icon span:first-letter, .wrong-icon span:first-letter {
    text-transform: uppercase !important;
}

rid-riddle.template-background .riddle-page.result-page>.btn-wrapper {
    background-color: transparent !important;
    background-image: linear-gradient(270deg, #838ac3 0%, #c1b2d8 28%, #fad9d8 100%) !important;
  color: black !important;
}

Video transcript

(We try to add video transcripts of our walkthrough videos to help our community members using accessibility devices like screen readers. Plus some folks just prefer to speed read instead of listening to us blather on in a video.)

Hi there. My name is Mike and I’m one of the co-founders here at Riddle, and in this video, I’m going to show you just how flexible and capable our CSS editor is. It gives you advanced customization over everything from borders to buttons, hover states, colors, fonts, pretty much everything.

Now, the CSS editor is part of our Team plan, and it’s really designed for agencies, brands, and publishers who really need their content to blend seamlessly into their website. Let me give you an example. In this case, this is our standard epic layout, which puts the image behind the text like this.

So in this case, you’ve got a very nice-looking quiz. It works really well. However, in this case, the customer wanted to use CSS to customize the heck out of it. Now watch what they’ve done here. They’ve moved the logo from the bottom up to the top.

They’ve also changed the text structure to be not over the image, but above and below it. And look here. They changed hove states here, so every time I select a button, it now has a nice gradient.

They did a fantastic job with this. And this is all possible with our CSS editor.

Now let’s take a look at another example.

Choice Hotels is another really good user of our CSS editor. In this example, they wanted to have the quiz not look like a widget, but actually, just blend seamlessly into their page. So what they’ve done here is they’ve taken away the border. They’ve also made it a bigger, wider quiz. And they used CSS to change the structure.

So now the image is below the text. And if you go a little bit further, you see here the buttons and the hover states are a little different, so it just fits and flows seamlessly on the page.

Okay, that’s an example of what you can do with it. Now let’s talk about how you can do it when you’re using Riddle.

So I’m going to create a new quiz and I’m going to copy it to my account. Now, in the customize step, this is where the magic happens.

Scroll down and you’ll see the CSS editor in our online quiz builder here. This is a blank spot, but it has a live impact on your quiz. So I’m going to go over to our list of about 50 or 60 CSS hacks that we have.

And I’ve included a link on this blog post so you can have access to this.

Okay, so you’ll see here we have everything from design options, how to change the Loading animation as a riddle loads, we have the three Riddle dots. You can change the color there. You can add more padding below the buttons. You can do all sorts of stuff.

You can also hide elements, things like this say, like, “Hey, I want to hide showing the number of questions in a quiz.”

So instead of showing ‘you’re at question three of ten’, I just want to hide that. You can customize pretty much everything in your Riddle content. So once you’ve found some CSS, in this case, we are just going to copy and paste one of our recipes.

Look what happens now. The quiz has updated automatically to reflect the CSS changes.

I’m going to remove this and you’ll see here it updates automatically so you can preview and make sure the CSS is doing what you want to do.

Now, if you need to inspect a particular element, you need to have some CSS knowledge. But in this case, I’ll just show you, for example, you’re going to want to inspect different elements. So I’m going to right-click on the title and I’m going to inspect this.

Again, you need to have some CSS skills here.

But you’ll see here it gives you the class names and things like that. So you then say, okay, I now know how to modify the CSS accordingly. You do need a little bit of CSS skills.

If you are a paid subscriber to our team plan, we can help you out. So we’re a lean team so you can ask us on support chat.

And if you are a paid subscriber, we can give you some basic help on getting started. However, we’re not an agency so we can’t give you extensive help. You do need to have CSS skills on your side, but if you need just the basics, give us a shout.

We’re happy to help out again for all of our active subscribers on our team plan. Okay, so again, that is the CSS editor in action – and here’s the quiz without it, showing what you can do with it.

If you have any questions, of course, give us a shout on support and we’re happy to help out.

Alright, that’s CSS, that’s Riddle… and Happy Riddling!