CSS Style Overrides - Sept 2020
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

View only
 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAA
1
CategoryUseCSS snippetAdditional information
2
GeneralTarget only the desktop version of a riddle.desktopUse 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 logoIncrease the size of your custom logo.custom-logo, .riddle-logo img {
max-width: 200px!important;
max-height: 200px!important;
}
4
Custom logoCenter 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 logoBigger 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 optionsGeneral 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;
}
7
Design optionsReduce padding between footer and main text.footer {
height:150px;
padding-top: 0;
margin-top: -15px;
}		https://www.riddle.com/showcase/255882/personality
8
Design optionsIncrease 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;
}
9
Design optionsResize 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) {}
10
Design optionsMake 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
11
Design optionsChange 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);
12
Design optionsMove share buttons above play again button - and change sizerid-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;
}
13
Design optionsChange color of description box (also color bar at top of Order It).description-wrapper {
background-color: #000000!important;}
14
Design optionsChange color of incorrect color bar - in quiz.choice.chosen:not(.correct) {
background-color: #555;
color: pink;
}		example: https://www.riddle.com/showcase/130064/quiz
15
Design optionschange 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
16
Design optionschange the font color for correct/wrong! text in quizzes.correct-icon span, .wrong-icon span {font-size: 45px;}
17
Design optionsChange image answers to 100% across (1 column) instead of 2 across.image-choice {
width: 100%;
float: none;
}
18
Design optionsChange color of circle in modern layout - when selected.modern .choice.chosen .circle, .modern-compressed .choice.chosen .circle {
background-color: black;
}
19
Design optionsChange background color and also color of selected choice.choice {
background: red!important;}

.choice-tint {
background: blue;
}
20
Design optionsReduce space between answers - and 'next' button.page-count {
padding: 0 0 10px 0;
margin-top: -40px;
width: 30px;
}
21
Design optionsChange 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
22
Design optionsChange color and opacity of timer barrid-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.
23
Design optionsChange 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;
}
24
Design optionsMobile-friendly polls and quizzes@media only screen and (max-width: 480px) {

.image-choice {float: none; width: 100%; }
25
Design optionsReduce the vertical height of your quiz - reduces space between questions, answers, and buttons..footer-content.classic-quiz {
margin-top: -40px;
}
26
Design optionsMake logo bar white - and partially transparent (.5 = 50%).footer.theme-bg-strong.logo-custom {
background-color: rgba(255,255,255,0.5);
}

27
Design optionsOverlay 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.
28
Design optionsChange 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;
}
29
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;
}
30
Design options(Personality test) Move headline and description above image on the first sliderid-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;
}
31
Design optionsChange 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;
}
32
Design optionsChange 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;
}
33
Form customizationReduce vertical spacing between form fields.checkbox{
margin: -30px 0px 0px 0px!important;
}
34
Hide quiz elementsHide the 'play again' button.play-btn {
display:none!important;
}
35
Hide quiz elementsHide image attribution link.attribution {display:none!important;}
36
Hide quiz elementsHide the percentages / change colors - who selected each answer..percent-number {
display:none;
}

.choice.correct {
background: #E6E6E6;
color: black;

}

.choice.correct .percentage-bar {
background: #E6E6E6;
}
37
Hide quiz elementsHide text and percentages in reaction polls.txt3.float-right.ng-binding {
display:none!important;
}
38
Hide quiz elementsHide %'s in extended results for personality tests.overviewTitlePercent {
display: none;}
39
Hide quiz elementsHide quiz results.result-score.txt2 {
display:none!important;
}
40
Hide quiz elementsHide the quiz score (e.g. "You got 1/5!")h1.result-score.txt2:first-of-type span{
display:none!important;
}
41
Hide quiz elementsHide total # of votes (reaction polls).result .txt3.float-right {
visibility: hidden;
}

.result .txt3.float-right .txt4 {
visibility: initial;
}
42
Hide quiz elementsHide description field in results.description {
display: none;
}
43
Hide page counter (1/X)Hide display of total questions in quiz.page-count {display:none!important};
44
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;
}
45
Hide quiz elementsHide numbers in reaction poll slider (-3 to +3)0-
46
Hide quiz elementsHide 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; }
47
Hide quiz elementsHide the tile of your Riddle quiz result texth1.result-score.txt2.ng-scope {display:none!important;}
48
Hide quiz elementsHide the score text for your Riddle quiz.result-score {
display:none!important;}
49
Hide quiz elementsHide 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;
}
50
Text formattingTarget and change font in the first H1 in unrolled quizh1:first-of-type {
font-size:40px;
line-height: 120%;}		Similar CSS can be used to target the first of anything really :)
51
Text formattingTarget 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.
52
Text formattingChange line spacing in the text..title {
line-height: 1.4em!important;
}

p {
line-height: 1.4em!important;
}
53
Text formattingChange 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;
}
54
Text formattingCenter result text - reaction polls.sentiment .result .txt3 {
width: 100%;
}
55
Text formattingChange all text in a Riddle*{
font-size: 50px;
}
56
Text formattingIncrease the size of text in 'description'..description {
font-size: 2em;
}
57
Text formattingChange the size of question text.txt2, h2 {
font-size: 20px;
}
58
Text formattingUse different text sizes for questions, answers, and titlesh1.title.txt2 { font-size: 50px; } .description *{ font-size: 12px; } .choice .txt2{ font-size: 16px; } .footer-content *{ font-size: 20px; }
59
Text formattingChange 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;
}
}
60
Text formattingChange 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";}
61
Text formattingChange 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%;
}
62
Text formattingChange the headline above a question on a specific pagerid-riddle[data-currentpageindex="1"] .title {
color: red!important;}		Change the number of the page index from "1" to the index of the page where you want to change the headline format. Please note that the first slide of the Riddle has the index "0".
63
Text formattingChange 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%;
}
64
Text formattingChange the text on the 'start' buttonrid-riddle[data-currentpageindex="0"] .start-btn span {
display: none;
}

rid-riddle[data-currentpageindex="0"] .start-btn:after {
content: "This text replaces the original.";
}
65
Text formattingChange the text on the 'next' buttonsrid-riddle[data-currentpageindex="1"] .start-btn span {
display: none;
}

rid-riddle[data-currentpageindex="1"] .start-btn:after {
content: "This text replaces the original.";
}		copy this as many times as the quiz has cards. Change the number 1, to reflect the current question number
66
Text formattingChange the text of the Choose button in Free Text answers without changing the text of the next button on the same card. Note: needs start page to be enabled and not hidden.riddle-frame:not([data-currentpageindex='0']) .footer-content > button[tabindex$="49"] > span::after {
text-align: center;
visibility: visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
content:'enter your answer';
}
.riddle-frame:not([data-currentpageindex='0']) .footer-content > button[tabindex$="49"]> span {
visibility: hidden;
position: relative;
display: inline-block;
width: 100%;
}
67
Text formattingChange font used in lead generation formsp, span, label, .save-by-riddle {
font-family: futura-pt, sans-serif!important;
font-style: normal!important;
font-weight: 400!important;
}		Please note: Futura is an Adobe Typekit font.. so only use if you have TypeKit is set up correctly along with an active TypeKit subscription.
68
Text formattingChange 'positive/negative' text on Reaction polls (Belgium/England in this example) rid-sentiment > div > div.riddle-page > div.content-div > div:nth-child(4) > p.direction.txt4 > span:nth-child(1)::before { visibility: visible; content: "Belgium"!important; right: 18px; position: absolute; } rid-sentiment > div > div.riddle-page > div.content-div > div:nth-child(4) > p.direction.txt4 > span:nth-child(1){ visibility: hidden; } rid-sentiment > div > div.riddle-page > div.content-div > div:nth-child(4) > p.direction.txt4 > span:nth-child(3)::before { visibility: visible; content: "England"!important; } rid-sentiment > div > div.riddle-page > div.content-div > div:nth-child(4) > p.direction.txt4 > span:nth-child(3){ visibility: hidden; }
69
Text formattingChange only the text on a specific page. For example, change only the headline on the intro page but no other headlines throughout the quiz. Use the data-currentpageindex to target a specific page and please note that the first page has the number "0".rid-riddle[data-currentpageindex="0"] h1 {
font-size: 30px;
line-height: 36px;
}
70
Text formattingChange the font size just for mobile using media queries@media only screen and (max-width : 480px) {
/* hier mobile */
h1 {
font-size: 12px;
}

p {
font-size: 8px;
}
}
71
Text formattingchange the spacing around the correct / wrong message.choice-result {
margin-top: 5px;
}
72
Text formattingCenter result text - personality testh1[ng-if="isResult(page) && !timeIsUp"] {
text-align: center;
}
73
Text formattingCenter main text on any pagerid-riddle[data-currentpageindex="10"] h1 {
text-align: center;
}

data-currentpageindex="10" replace 10 with nr of questions + 1
74
Text formattingCenter page counter.footer-content .page-count { text-align: center; }
75
Text formattingChange all font sizes in a poll.title.txt2, .title.txt2 * {
font-size: 20px!important;}

.choice-text {
font-size: 20px;
}
76
Reaction PollHide number of votes and only show percentagesbody > rid-riddle > div.riddle-content.classic > rid-riddle-type > rid-sentiment > div > div.content-div.riddle-page.breakdown.ng-scope > rid-sentiment-bars > div > div.result.ng-scope > p.txt3.float-right.ng-binding {
visibility: hidden;
}
body > rid-riddle > div.riddle-content.classic > rid-riddle-type > rid-sentiment > div > div.content-div.riddle-page.breakdown.ng-scope > rid-sentiment-bars > div > div.result.ng-scope > p.txt3.float-right.ng-binding span{
visibility: visible;
}
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
Loading...