Support » Plugin: SlickQuiz » Changing Font and Color in Plugin

Viewing 15 replies - 1 through 15 (of 25 total)
  • Plugin Author jewlofthelotus

    (@jewlofthelotus)

    @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’s style.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).

    Thread Starter Andre_bei_Wordpress

    (@andre_bei_wordpress)

    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.

    Plugin Author jewlofthelotus

    (@jewlofthelotus)

    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 the 10px 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;
    }

    Plugin Author jewlofthelotus

    (@jewlofthelotus)

    @colette Cormier – SlickQuiz does not apply classes of .DarkSlateBlue or .buttonLavendarto 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.

    Plugin Author jewlofthelotus

    (@jewlofthelotus)

    @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 #ffffff

    Plugin Author jewlofthelotus

    (@jewlofthelotus)

    @summer & @colette Cormier – Almost all modern browsers have these tools built in now. Try right clicking on this paragraph – then click the option that says something like “Inspect Element”.

    jewlofthelotus —
    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

    Plugin Author jewlofthelotus

    (@jewlofthelotus)

    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; }

Viewing 15 replies - 1 through 15 (of 25 total)
  • The topic ‘Changing Font and Color in Plugin’ is closed to new replies.