Changing Font and Color in Plugin
-
Hi,
I would like to know how I can change font and color in SlickQuiz, so it would look more customized.
As well, could you please tell me where the details (name and email address) are saved, when people use the quiz while not being logged in?
Thanks a lot in advance!
-
@andre_bei_wordpress All the SlickQuiz elements are nested under a wrapper element with the class of
.slickQuizWrapper
. So you’d need to choose which elements in particular you want to style and then write some CSS to target those items in your theme’sstyle.css
file.As for saved user info, that is all stored with the saved scores which you can access via the main quiz listing – click the user icon under the Scores column that corresponds to the quiz you’d like to see user information for. Alternatively, quiz scores and user data are saved in the database in a tabled named something like
wp_plugin_slickquiz_scores
(the exact naming will depend on your WP configuration).Hi jewlofthelotus,
First of all thank you for this awesome plugin! 🙂
Unfortunately I just started using wordpress and I only created a “training site” for myself to get used to everything.
I tried my best to follow your instructions and was able to change the color for the buttons, but couldn’t find how to change the font.
This is my ling, where I try to test different plugins. It would be really great and much appreciated, if you could have a fast look into it:
http://andretestetseite.bplaced.net/?page_id=42
I would like to change the font in red and make it maybe a bit smaller/bigger etc. Could you maybe write a short step-by-step guide how to do this exactly?
Sorry for asking you for this favor but couldn’t find anything.
Hey @andre_bei_wordpress,
No problem – here’s a pretty basic CSS cheatsheet that should help:
http://www.pxleyes.com/blog/wp-content/uploads/2010/03/css-cheatsheet.pdf
To change the color of the button text, you’d use something like
color: white;
To change font size, you’d use something like
font-size: 10px
where the10px
is whatever size you want.Hope that helps!
Okay so I’m lost guys. I’m desperately trying to change the button color…I’ve found the original CSS I THINK…I should be able to just put code in my child theme’s CSS editor. I have no idea which code to use. Clearly I”ve used the wrong code because it didn’t change the button color.
SOOOOOO. can you PlEASE tell me. Just give me a block of code..the original that came with the plugin and I will change the colors. I know which colors I want to change, I just seem to be randomly picking up code and hoping it will work. Am I right in putting it in my child theme css editor or should I be going into a CSS file in the control panel. If so be specific. there are different css files under the slickquiz name…one is admin and the other is front I believe.Used the code below…
.slickQuiz .button img {
vertical-align: text-top;
}/* BUTTONS */
.slickQuiz .DarkSlateBlue {
width: 200px;
margin-top: 10px;
color: #fff;
background: #598920;
border: 1px solid #fff;
border-radius: 5px;
-moz-border-radius: 5px;
display: block;
font-weight: normal;
font-size: 15px;
padding: 10px 30px 8px;
cursor: pointer;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.slickQuiz .buttonLavendar:hover {
color: #fff !important;
background: #427108;
text-decoration: none;
}
.slickQuiz .buttonLavendar:visited {
color: #fff !important;
}.slickQuiz .buttonWrapper {
margin-top: 30px;
}@colette Cormier – SlickQuiz does not apply classes of
.DarkSlateBlue
or.buttonLavendar
to the buttons so that would be why the styles you’re writing are not taking effect. If you instead apply your styles to.slickQuiz .button
, that should work.If you want your styles to target specific buttons within the quiz, then you’d want to apply your styles to
.slickQuiz .startQuiz
,.slickQuiz .nextQuestion
,.slickQuiz .backToQuestion
, etc.Sorry…I just found this reply. I didn’t get an email that a reply was posted (despite my forum settings) Have no clue what language you are speaking but you are adorable in your avatar so I’ll let you get away with speaking not my language…no big deal. I can live with the default colours!
I’m one of these “paste me the code and I’ll copy it” people.
just an add on to be clear about my confusion..when you said to apply styles to .slickQuiz. button I didn’t know what you meant about that or applying styles…obviously I have to change the code I created and imagined would work but I don’t know how what you said computes with that. Sorry. Great plugin in though my dear.
@colette Cormier – If you send me a link to your quiz and let me know specifically what you’d like to change stylistically – I can try to get you some code to copy & paste.
Colette Cormier: Just a suggestion that I used to help me learn was to use a web developer browser plugin. When activated, I could see the code and the page at the same time and watch what my changes did. Once you have gotten it looking like you want, save the code into your file. It also told me which style sheet was being used for that particular item.
Best Wishes!
hi summer…thank you so much. I’m not a web developer so I didn’t even know those plugins existed: i’m just a control freak wanting to do all my site myself. any suggestions for specific pluig in names?
Julie the page I have the quiiz on is http://ecbiz97.inmotionhosting.com/~makeup34/weddingmakeuptoronto/weddingmakeupartisttoronto/
it’s a temp site till I get the thing all done
quiz is at the bottom of the page.
wanted the button to be dark purple #502e70
and the text to be white #ffffffjewlofthelotus —
I use right click all the time now for quick checks or just to see what the css looks like for something I like! If the site is right click protected though it doesn’t work too well!Still totally love slickquiz plugin too!
just to add…i want to change all the buttons and I’m guessing that would work if I made one code change…so that as each question get’s clicked on and a new button pops up, the next button would have the same colour…I’m assuming one code change to button does that
Thanks @summer! By the way, if right click is disabled – there is usually an option to open the Developer Tools / Console in the browsers menu. 🙂
@colette Cormier if you add the following to the bottom of your theme’s
style.css
, it should change the button color to your purple:.slickQuizWrapper .button { background-color: #502e70; }
You’ll probably want a hover color as well, in which case add the following with your color of choice:
.slickQuizWrapper .button:hover { background-color: #502e70; }
If for some reason those don’t work, add an
!important
like so:.slickQuizWrapper .button { background-color: #502e70 !important; }
- The topic ‘Changing Font and Color in Plugin’ is closed to new replies.