Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 31/12/2023 New Year SALE

    We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

  • 21/11/2023 BLACK FRIDAY 23 is coming

    BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

How do I customize the colours in the quiz?
(1 viewing) (1) Guest
"ARI Stream Quiz" WordPress plugin
Go to bottomPage: 12
TOPIC: How do I customize the colours in the quiz?
#62408
How do I customize the colours in the quiz? 6 Years, 2 Months ago Karma: 0
Is it possible to change the colours of the progress bar, the buttons and the highlighted answer within the quizzes? I don't really know CSS very well so any help would be very welcome. Thanks
The administrator has disabled public write access.
 
#62422
Re:How do I customize the colours in the quiz? 6 Years, 2 Months ago Karma: 748
Hello,

Open "Advanced" tab on "ARI Stream Quiz -> Settings" page and populate "Custom CSS styles" parameter with the following value:

Code:


/* progress bar */
BODY .asq-theme.asq-theme-buzzfeed .quiz-progress-bar {
  background: yellow; /* background of uncompleted part */
}

BODY .asq-theme.asq-theme-buzzfeed .quiz-progress-bar:after {
  color:red; /* text color */
  background: blue; /* background color */
}

/* Highlight of correct answer */
BODY .asq-theme.asq-theme-buzzfeed .quiz-question-answer-correct {
  background: blue !important;
}

/* Highlight of wrong answer */
BODY .asq-theme.asq-theme-buzzfeed .quiz-question-answer-wrong {
 background: orange !important;
}



Could you specify button(s) for which you want to change color?

Regards,
ARI Soft
The administrator has disabled public write access.
 
#62434
Re:How do I customize the colours in the quiz? 6 Years, 2 Months ago Karma: 0
The button I'm referring to is the Show Results button once they have put in their email address.

In place of the colour names can you put in hexadecimal codes instead? Do you just put the number in or do you need the hashtag still?

Also I believe the code below doesn't change the highlight over the personality quiz when you hover over each answer or when you click on the final answer and the form comes up below.

Thanks so much for your help.
The administrator has disabled public write access.
 
#62441
Re:How do I customize the colours in the quiz? 6 Years, 2 Months ago Karma: 748
Use the following CSS rule to change color of "Show Results" button, it contains color in HEX notation:

Code:


BODY .asq-theme.asq-theme-buzzfeed .button.button-collect-data {
 background-color: #ff0000;
}



Regards,
ARI Soft
The administrator has disabled public write access.
 
#62651
Re:How do I customize the colours in the quiz? 6 Years, 1 Month ago Karma: 0
Hello,

Could you please give me the same info for two extra buttons:

- the button to start the quiz
- the button to pass mail subscription and go to results

Many thanks in advance!
The administrator has disabled public write access.
 
#62652
Re:How do I customize the colours in the quiz? 6 Years, 1 Month ago Karma: 748
Hello,

1.

body .asq-theme.asq-theme-buzzfeed .button.button-start-quiz {background-color: green;}

2.

body .asq-theme.asq-theme-buzzfeed .button.button-collect-data {background-color: blue;}

Regards,
ARI Soft
The administrator has disabled public write access.
 
Go to topPage: 12