A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Category | Use | CSS snippet | Additional information | |||||||||||||||||||||||
2 | General | Target only the desktop version of a riddle | .desktop | Use this class to target only the desktop version. If the Riddle is opened on a mobile device, any css assigned to this class will be ignored | |||||||||||||||||||||||
3 | Custom logo | Increase the size of your custom logo | .custom-logo, .riddle-logo img { max-width: 200px!important; max-height: 200px!important; } | ||||||||||||||||||||||||
4 | Custom logo | Center your custom logo | .custom-logo { position:relative; left:-50%; float:right!important; } | This is a bit tricky as you need to force overwrite the float: left; in our CSS. | |||||||||||||||||||||||
5 | Custom logo | Bigger custom logo: first upload custom logo as normal then find image URL in source code replace in this CSS snippet | .footer { background-image: url(/imageservice/q_80,f_auto,c_fit,w_400,h_20/v4jqylyer0jjgcsavtle); background-repeat: no-repeat; background-position: center left; } .custom-logo { display: none; } | You can see in action in this Riddle: https://www.riddle.com/view/152082. There are 2 parameters in the URL for the image (width and height). You can change those - but please not beyond the dimensions of the original image. | |||||||||||||||||||||||
6 | Design options | Customize start button ONLY on title page - not 'next' or 'play again' buttons that use same class. | .riddle-frame[data-currentpageindex="0"] .start-btn { margin-top: -100px!important; border: 4px black solid!important; } | Whenever you want to apply a change to only one slide of the riddle, use the data-currentpageindex The first page of any Riddle (title slide) is index 0. When you target stuff like the results, and then add or remove a question, you need to alter the css | |||||||||||||||||||||||
7 | Design options | Change height of Epic layout riddles | rid-riddle.template-background .riddle-page .riddle-page-content { height: 1300px !important; } | Only for Epic layout: Change the 1300px to any height you like. You can see the effect here: https://borispfeiffer.com/riddle/expertzone.html Using the unaltered standard embed code | |||||||||||||||||||||||
8 | Design options | Move CTA call to action button below reaction poll | .ctaWrapper { margin-top: 300px; } | ||||||||||||||||||||||||
9 | Design options | Change animation loading color | .animate-load [class*=animate-icon-] { color: #333333; } | ||||||||||||||||||||||||
10 | Design options | Add border, round corners, add padding to Start button | rid-riddle.template-background .riddle-page .start-btn { border: 4px white solid; border-radius: 5px; padding: 10px 40px; } | ||||||||||||||||||||||||
11 | Design options | Advanced customization of Epic layout | 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; } | ||||||||||||||||||||||||
12 | Design options | EPIC layout: remove the overlay with custom CSS by adding this code to the custom CSS section: | .content-div { background-color: #FFF !important; } | ||||||||||||||||||||||||
13 | Design options | General demo CSS - square buttons, center, remove border, etc. | .riddle-frame { border-radius: 0px; border: 0px!important; } .riddle-frame .content-div .footer-content .start-btn { width: 70%; padding: 0px; border-radius: 2px; padding: 15px 0; } .riddle-frame .share-result .btn { background-color: #07265D !important; border-radius: 1px; } | ||||||||||||||||||||||||
14 | Design options | Multi-poll - change text for individual poll question tabs | background-color: #FFF !important; | https://www.riddle.com/view/341340 | |||||||||||||||||||||||
15 | Design options | Demo CSS - add highlight to selected choices, remove border, etc. (works on Epic and all layouts) | } | ||||||||||||||||||||||||
16 | Design options | Reduce padding between footer and main text | .footer { height:150px; padding-top: 0; margin-top: -15px; } | https://www.riddle.com/showcase/255882/personality | |||||||||||||||||||||||
17 | Design options | Increase size of the checkbox in lead forms | .leadgen-new-form .form-group .checkbox .col-xs-1 { width: 50px; } .leadgen-new-form .form-group .checkbox .col-xs-10 { width: auto; } .leadgen-new-form .checkbox input[type="checkbox"] { visibility: hidden; width: 50px; height: 50px; } .leadgen-new-form .checkbox input[type="checkbox"]::before { width: 50px; height: 50px; border-radius: 15px; border: 2px solid #000000; background-color: #fff; display: block; visibility: visible; content: ""; float: left; margin-right: 5px; } .leadgen-new-form .checkbox input[type="checkbox"]:checked::before { box-shadow: inset 0px 0px 0px 3px #fff; background-color: #000000; } | ||||||||||||||||||||||||
18 | Design options | Change vertical height of Epic layout | rid-riddle.template-background .riddle-page .riddle-page-content { height: 90vh!important; } | ||||||||||||||||||||||||
19 | Design options | Resize custom in-quiz iFrame for mobile devices (they can adjust the break points at will). Use the .desktop class to style the Riddle for non mobile devices. | .iframe-view { padding-top: 800px !important; } /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) {} /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) {} /* Small Devices, Tablets */ @media only screen and (max-width : 768px) {} /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) {} /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) {} | ||||||||||||||||||||||||
20 | Design options | Make polls 4 choices in a row | .choice { width: 23%; float: left; margin: 5px; } .text-choice:first-child { margin-top: 5px; } | but you have to play with width and margin to make it look good for that riddle | |||||||||||||||||||||||
21 | Design options | Make lead form text (submit button) bigger | .leadgen-new-form .btn { font-size: 20px;} | ||||||||||||||||||||||||
22 | Design options | Make submit button bigger on lead form | .form-builder .action-area .btn { cursor: pointer; width: 60%; display: inline-block; } | ||||||||||||||||||||||||
23 | Design options | Add padding below Start button | .start-btn { margin-bottom: 20px;} | ||||||||||||||||||||||||
24 | Design options | Center lead form fields - 60% width | .leadgen-new-form .form-group { padding-left: 20%; padding-right: 20%; } body > rid-riddle > div.riddle-content.background > rid-embed-form > div > form > div.action-area.clearfix.text-center > div > div > button { min-width: 250px;} .leadgen-new-form .btn { font-size: 20px;} | ||||||||||||||||||||||||
25 | Design options | Change color of correct color bar - in quiz | .choice.correct .percentage-bar { background: rgba(47, 58, 140,0.5)!important;} .choice.correct { color: #ffffff; background: rgba(130, 47, 140,0.5)!important; } .choice.correct { border-color: rgba(141, 87, 47,1); | ||||||||||||||||||||||||
26 | Design options | Move share buttons above play again button - and change size | rid-share-buttons { order: 1; } rid-share-buttons .share-result { margin: -30px 0 30px 0 !important; } .footer-content .start-btn { order: 2; } .footer-content { display: flex; flex-direction: column; } | ||||||||||||||||||||||||
27 | Design options | Move play again button below extended results in a personality test | rid-personality { display: flex; flex-flow: column; } .result-page { order: 2; } | ||||||||||||||||||||||||
28 | Design options | Change color of description box (also color bar at top of Order It) | .description-wrapper { background-color: #000000!important;} | ||||||||||||||||||||||||
29 | Design options | Change color of incorrect color bar - in quiz | .choice.chosen:not(.correct) { background-color: #555; color: pink; } | example: https://www.riddle.com/showcase/130064/quiz | |||||||||||||||||||||||
30 | Design options | change the font color for answer explanation, if there are inline styles at work | .description span, .description em, .description strong, .description p { color: #fff !important; } | Very specifc for Sanoma who copied inline styles from Word https://www.riddle.com/view/130590 | |||||||||||||||||||||||
31 | Design options | Change opacity of audio clip progress bar | .audio-player .rangewrap .progress { background-color: #171d20; opacity: 0.9; } | ||||||||||||||||||||||||
32 | Design options | change the font color for correct/wrong! text in quizzes | .correct-icon span, .wrong-icon span {font-size: 45px;} | ||||||||||||||||||||||||
33 | Design options | Change color of 'wrong' icon | .wrong-icon { color: #ea9d9d;} | ||||||||||||||||||||||||
34 | Design options | Change background color of selected choices | .choice { background: #37474F!important;} .choice-tint { background: #c0c0c0; } | ||||||||||||||||||||||||
35 | Design options | Change image answers to 100% across (1 column) instead of 2 across | .image-choice { width: 100%; float: none; } | ||||||||||||||||||||||||
36 | Design options | Change color of circle in modern layout - when selected | .modern .choice.chosen .circle, .modern-compressed .choice.chosen .circle { background-color: black; } | ||||||||||||||||||||||||
37 | Design options | Change background color and also color of selected choice | .choice { background: red!important;} .choice-tint { background: blue; } | ||||||||||||||||||||||||
38 | Design options | Change the color of the selected choice in a poll | rid-riddle.template-background .riddle-page .choice .percentage-bar { background-color: rgba(216,42,42,.5); } | ||||||||||||||||||||||||
39 | Design options | Reduce space between answers - and 'next' button | .page-count { padding: 0 0 10px 0; margin-top: -40px; width: 30px; } | ||||||||||||||||||||||||
40 | Design options | Change the color of the share buttons | .share-result a { background-color: #fff !important; color: #000!important } | this creates a white circle and a black share icon | |||||||||||||||||||||||
41 | Design options | Change color and opacity of timer bar | rid-timer > rid-timer-rect > div, rid-timer > rid-timer-rect > div > div:nth-child(1) { background-color: rgba(200,56,3,0.5) !important; } | This number rgba(200,56,3,0.5) is the color of the timer bar - you can change to any RGBA color, and you can also change the .5 to any number from .01 to 1 (1% to 100% opacity), so the bar is more or less visible. | |||||||||||||||||||||||
42 | Design options | Change color of timer circle | #circle > g > circle { fill: pink; stroke: blue; } | ||||||||||||||||||||||||
43 | Design options | Change background overlay of reaction poll. Please note - you won't see the reaction poll change color when mousing over (on hover state). | .bg-tint { background-color: rgba(0, 0, 0, 0) !important; } | ||||||||||||||||||||||||
44 | Design options | Mobile-friendly polls and quizzes | @media only screen and (max-width: 480px) { .image-choice {float: none; width: 100%; } | ||||||||||||||||||||||||
45 | Design options | Reduce the vertical height of your quiz - reduces space between questions, answers, and buttons. | .footer-content.classic-quiz { margin-top: -40px; } | ||||||||||||||||||||||||
46 | Design options | Make logo bar white - and partially transparent (.5 = 50%) | .footer.theme-bg-strong.logo-custom { background-color: rgba(255,255,255,0.5); } | ||||||||||||||||||||||||
47 | Design options | Overlay title and question over image (semi-transparent background) | .title { color: #ffffff; text-align: center; font-size: 150%; line-height: 125%; margin-bottom:0px; margin-top: -80px; background-color: rgba(50,50,50,0.5); } | Useful if you want to overlay the title over your main quiz image. | |||||||||||||||||||||||
48 | Design options | Change the 'continue' button in the 'In-quiz iFrame' - make it smaller and change the color | .iframe-skip { font-size: 0.5em!important; padding: 1px!important; margin: 1px!important; } .theme-light a, .theme-light a.btn-empty, .theme-light a.btn-empty:active, .theme-light a.btn-empty:focus, .theme-light a.btn-empty:hover, .theme-light a:active, .theme-light a:focus, .theme-light a:hover { color: #f3f3f3!important; } | ||||||||||||||||||||||||
49 | Design options | Awesome 'next' button animation | .btn { height: 48px; width: 100% !important; font-family: inherit; font-weight: bold; background-color: transparent !important; cursor: pointer; display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 2em; padding-right: 2em; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; position: relative; overflow: hidden; outline: none; z-index: 1; font-size: rem(14px); color: #0d3ffb !important; border: 1px solid #0d3ffb !important; border-radius: 0; } .btn:active, .btn:focus, .btn:hover { transform: none !important; color: #ffffff !important; } .btn:before { content: ''; display: block; position: absolute; z-index: -1; bottom: 0; width: 20px; height: 10px; border-radius: 20px 20px 0 0; left: 50%; transform: translateX(-50%); transition: transform 0.4s linear; } .btn:hover:before { transform: scale(50); background-color: #0d3ffb; } | ||||||||||||||||||||||||
50 | Design options | Classic style only (quiz/personality test): move start button above title and description | rid-riddle[data-currentpageindex="0"] .content-div { display: flex; flex-flow: column; } rid-riddle[data-currentpageindex="0"] .title { order: 2; } rid-riddle[data-currentpageindex="0"] .description { order: 3; } rid-riddle[data-currentpageindex="0"] .footer-content { order: 1; margin-top: 0; margin-bottom: 20px; } | ||||||||||||||||||||||||
51 | Design options | (Pop quiz) Move headline and description above image on the first slide | .riddle-frame[data-currentpageindex="0"] .content-div .title p { font-size: inherit; } rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page { display: flex; flex-wrap: wrap; } rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div[class*=media] { width: 100%; order: 2; } rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div { width: 100%; } rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page > div:last-child { order: 3; } | ||||||||||||||||||||||||
52 | Design options | (Personality test) Move headline and description above image on the first slide | rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page { display: flex; flex-wrap: wrap; } rid-riddle[data-currentpageindex="0"] .tab-start + .riddle-page .media-single { width: 100%; order: 2; } | ||||||||||||||||||||||||
53 | Design options | Change color for hyperlinks | .content-div a:link { color: hotpink; } .content-div a:visited { color: blue; } .content-div a:hover { color: green; } .content-div a:active { color: red; } | ||||||||||||||||||||||||
54 | Design options | Change look/feel of answer buttons on only question 1 | /*altering the selection button for the first question*/ .riddle-frame[data-currentpageindex="1"] .choice-overlay { text-align: center; background-color: #003174; margin: 0 auto; float: none; width: 65%; display: block;} .riddle-frame[data-currentpageindex="1"] .choice { background: none; border: none; } .riddle-frame[data-currentpageindex="1"] .choice-overlay:hover { background-color: #1486cd; } | ||||||||||||||||||||||||
55 | Design options | Move play again and social share buttons below extended results in personality test | rid-personality { display: flex; flex-flow: column; } .result-page { order: 2; } | ||||||||||||||||||||||||
56 | Design options | Move question explanation below "next" button | .riddle-page.question-page { display: flex; flex-direction: column; } .content-div.modern-footer { order: 2; } .content-div.modern-footer:last-child { order: 1; } | only works with the style "modern-compressed" in this form. Other styles need slightly altered CSS | |||||||||||||||||||||||
57 | Design options | Center question and title for multi-poll | .poll2020-title, .poll2020-desc, .poll2020-selectText { text-align: center; } | ||||||||||||||||||||||||
58 | Design options | Change color of choice box when selected | .choice.chosen{ color: #ffffff; background: blue!important; } | https://www.riddle.com/view/338537 | |||||||||||||||||||||||
59 | Design options | Move the start button up to a position below the lead image in our classic styles template | rid-riddle[data-currentpageindex="0"] .content-div { display: flex; flex-flow: column; } rid-riddle[data-currentpageindex="0"] .title { order: 2; } rid-riddle[data-currentpageindex="0"] .description { order: 3; } rid-riddle[data-currentpageindex="0"] .footer-content { order: 1; margin-top: 0; margin-bottom: 10px; } | ||||||||||||||||||||||||
60 | Form customization | Center and narrow lead generation fields | .leadgen-new-form { max-width: 600px; margin: 0 auto;} | ||||||||||||||||||||||||
61 | Form customization | Reduce vertical spacing between form fields | .checkbox{ margin: -30px 0px 0px 0px!important; } | ||||||||||||||||||||||||
62 | Hide quiz elements | Hide the 'play again' button | .play-btn { display:none!important; } | ||||||||||||||||||||||||
63 | Hide quiz elements | Hide image attribution link | .attribution {display:none!important;} | ||||||||||||||||||||||||
64 | Hide quiz elements | Hide the percentages / change colors - who selected each answer. | .percent-number { display:none; } .choice.correct { background: #E6E6E6; color: black; } .choice.correct .percentage-bar { background: #E6E6E6; } | ||||||||||||||||||||||||
65 | Hide quiz elements | Hide quiz timer | .media-flip .timer { display: none; } | ||||||||||||||||||||||||
66 | .audio-player .time { display: none;} | ||||||||||||||||||||||||||
67 | Hide quiz elements | Hide percentages in extended personality results (personality test) | overviewTitlePercent { display:none;} | ||||||||||||||||||||||||
68 | Hide quiz elements | Hide text and percentages in reaction polls | .txt3.float-right.ng-binding { display:none!important; } | ||||||||||||||||||||||||
69 | Hide quiz elements | Hide %'s in extended results for personality tests | .overviewTitlePercent { display: none;} | ||||||||||||||||||||||||
70 | Hide quiz elements | Hide quiz score | .result-score.txt2 { display:none!important; } | ||||||||||||||||||||||||
71 | Hide quiz elements | Hide the quiz score (e.g. "You got 1/5!") | h1.result-score.txt2:first-of-type span{ display:none!important; } | ||||||||||||||||||||||||
72 | Hide quiz elements | Hide total # of votes (reaction polls) | .result .txt3.float-right { visibility: hidden; } .result .txt3.float-right .txt4 { visibility: initial; } | ||||||||||||||||||||||||
73 | Hide quiz elements | Hide description field in results | .description { display: none; } | ||||||||||||||||||||||||
74 | Hide page counter (1/X) | Hide display of total questions in quiz | .page-count {display:none!important}; | ||||||||||||||||||||||||
75 | Hide list item # (for particular item) | Hide list item number (change index# to the particular item you want to hide) | .riddle-frame[data-currentpageindex="6"] .counter-item .page-number { display: none; } | ||||||||||||||||||||||||
76 | Hide quiz elements | Hide numbers in reaction poll slider (-3 to +3) | 0- | ||||||||||||||||||||||||
77 | Hide quiz elements | Hide the intermediate voting section for ranked polls. | NEW RIDDLES post-Dec 15, 2019: body > rid-riddle > div.riddle-content.ng-scope > rid-riddle-type > rid-rankedpoll > div:nth-child(3) { display: block; } .standard-image { margin-top: 25px; padding-top:25px; } .title { display:none; } .rankedpoll-text { display:none; } | OLD RIDDLES that do not have the H2 tag applied automatically to the cards, use this: body > rid-riddle > div.riddle-content.ng-scope > rid-riddle-type > rid-rankedpoll > div:nth-child(3) { display: block; } .standard-image { margin-top: 25px; padding-top:25px; } .title { display:none; } .rankedpoll-text { display:none; } .ridRankedPollVoter h2 { display: none; } | |||||||||||||||||||||||
78 | Hide quiz elements | Hide the tile of your Riddle quiz result text | h1.result-score.txt2.ng-scope {display:none!important;} | ||||||||||||||||||||||||
79 | Hide quiz elements | Hide the score text for your Riddle quiz | .result-score { display:none!important;} | ||||||||||||||||||||||||
80 | Hide quiz elements | Hide the % of people who voted. Hide the left vertical color border - displayed by the user's choice. Change color of the background for the correct answer option. Hide the checkmark and oval for the correct answer. | .percent-number { display: none; } .choice.chosen { border: none; } .choice.correct, .choice.chosen { background-color: #00c3ff; } .choice-result h1 { display: none; } | ||||||||||||||||||||||||
81 | Hide quiz elements | Hide 'Correct' or 'Wrong' text - but keep icons visible | .correct-icon span, .wrong-icon span { display:none!important; } | ||||||||||||||||||||||||
82 | Text formatting | Use custom font for different classes | Customer send .woff2 file to Riddle - we host. We give a URL like this: https://cdn.riddle.com/website/fonts/segui/segui.css CSS needs to refer to the font family in the CSS in the above link: .title { font-family: "Segoe UI" !important; text-align: center; } .body { font-family: "Segoe UI"; } | ||||||||||||||||||||||||
83 | Text formatting | Customize start button text message | .riddle-frame[data-currentpageindex="0"] .start-btn .txt3 { visibility:hidden; } .riddle-frame[data-currentpageindex="0"] .start-btn .txt3::after { visibility: visible; position: absolute; top: 1; left: 0; width: 100%; content: "custom message"; } | ||||||||||||||||||||||||
84 | Text formatting | Multi-poll: Customize submit button text message | .poll2020-btn { visibility: hidden; position: relative; } .poll2020-btn:after { visibility: visible; position: absolute; top: 0; left: 0; width: calc(100% - 30px); padding: 10px 15px; border-radius: 0; border: none; text-transform: uppercase; background: rgba(0,76,84,1) !important; content: "custom text here"; } | ||||||||||||||||||||||||
85 | Text formatting | Multi-poll: make list item text larger on desktop only | @media screen and (min-width: 600px){ .list-text { font-size: 14px!important; color: blue!important;} } | note: added color: blue to make the change more prominent, they can delete that. The Showcase on Riddle has a width of 666 px which is why a regular media query for 768px will not work | |||||||||||||||||||||||
86 | Text formatting | Target and change font in the first H1 in unrolled quiz | h1:first-of-type { font-size:40px; line-height: 120%;} | Similar CSS can be used to target the first of anything really :) | |||||||||||||||||||||||
87 | Text formatting | Target and change font in the descriptions in unrolled quizzes | #questionDescription0 p{ font-size: 35px; } | You can target any item's description: description0 is for the intro, description1 for the first question and so on. | |||||||||||||||||||||||
88 | Text formatting | Change line spacing in the text. | .title { line-height: 1.4em!important; } p { line-height: 1.4em!important; } | ||||||||||||||||||||||||
89 | Text formatting | Change color of selected hyperlinks in text | .description a { color: #FFDD00 !important; font-weight:bold !important; text-decoration: none !important; } | Old version: a { color: #FFDD00 !important; font-weight:bold !important; text-decoration: none !important; } | |||||||||||||||||||||||
90 | Text formatting | Center result text - reaction polls | .sentiment .result .txt3 { width: 100%; } | ||||||||||||||||||||||||
91 | Text formatting | Change all text in a Riddle | *{ font-size: 50px; } | ||||||||||||||||||||||||
92 | Text formatting | Increase the size of text in 'description'. | .description { font-size: 2em; } | ||||||||||||||||||||||||
93 | Text formatting | Change the size of question text | .txt2, h2 { font-size: 20px; } | ||||||||||||||||||||||||
94 | Text formatting | Use different text sizes for questions, answers, and titles | h1.title.txt2 { font-size: 50px; } .description *{ font-size: 12px; } .choice .txt2{ font-size: 16px; } .footer-content *{ font-size: 20px; } | ||||||||||||||||||||||||
95 | Text formatting | Change 'choose as many as you like' text for multiple choice quetsions | .choice-cta { visibility:hidden;} .choice-cta::after { visibility: visible; position: absolute; top: 1; left: 0; width: 100%; padding-left:2.5%; content: "You can pick as many as you like"; } | ||||||||||||||||||||||||
96 | Text formatting | Change font sizes on mobile devices only | @media only screen and (max-width : 480px) { h1.title.txt2 { font-size: 50px; } .description *{ font-size: 16px; } .choice .txt2{ font-size: 16px; } .footer-content* { font-size: 20px; } } | ||||||||||||||||||||||||
97 | Text formatting | Change the share text message | .share-result h3 { visibility: hidden; position: relative; } .share-result h3::after{ text-align: center; visibility: visible; position: absolute; top: 0; left: 0; width: 100%; content:"new share message text here";} | .riddle-frame[data-currentpageindex="0"] .start-btn .txt3 { visibility:hidden; } .riddle-frame[data-currentpageindex="0"] .start-btn .txt3::after { visibility: visible; | |||||||||||||||||||||||
98 | Text formatting | Change the text of an element (in this example it keeps the start button as 'start' but changes the others to 'continue' - for a survey - but might work on other types.) | .riddle-frame:not([data-currentpageindex='0']) .footer-content .start-btn span::after { text-align: center; visibility: visible; position: absolute; top: 0; left: 0; width: 100%; content:'continue'; } .riddle-frame:not([data-currentpageindex='0']) .footer-content .start-btn span { visibility: hidden; position: relative; display: inline-block; width: 100%; } | content: "new start message"; | |||||||||||||||||||||||
99 | Text formatting | Change the headline above a question on a specific page | rid-riddle[data-currentpageindex="1"] .title { color: red!important;} | ||||||||||||||||||||||||
100 | Text formatting | Change the text of an element (in this example it changes the text of the Poll Closed message | .poll-closed .txt2 { visibility: hidden; position: relative; } .poll-closed .txt2::after { text-align: center; visibility: visible; position: absolute; top: 0; left: 0; content: "Umfrage beendet."; width: 100%; } | } |