Custom class for quiz container

  • Resolved Gyanesh Kumar

    (@ghackk)


    2 years, 2 months ago

    Can you tell me how to use ( Custom class for quiz container ) , provide with one example with css so that i may understand and customize it on my own?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Jasmine

    (@hyenokian)

    2 years, 2 months ago

    Dear @ghackk,

    Thank you for your topic.

    As for your request, please, note that you will need to decide the CSS class name, for example: quiz-maker-custom-class

    See the screenshot below:

    View post on imgur.com

    After that, you can write the appropriate styles in the Custom CSS using the decided CSS class name. 

    .quiz-maker-custom-class p {
	color: red !important;
}

    See the screenshot below:

    View post on imgur.com

    Let me know if I can be of any further assistance.

    Thank you.

    Thread Starter Gyanesh Kumar

    (@ghackk)

    2 years, 2 months ago

    body,html{
    margin: 0;
    padding: 0;
    }

/* Basic styling for quiz section */
    .ays-questions-container {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    }

.ays-image-question-img, .ays-quiz-answers.ays_grid_view_container {
    display: flex;
    }

.ays-image-question-img img {
    width: 40%;
    height: 40%;
    object-fit: contain;
    object-position: center center;
    }

[id^="ays-quiz-container-"] .ays-answer-image {
    width: 250px;
    height: 250px;
    object-fit: contain;
    object-position: center center;
    }

div.ays-quiz-answers.ayz_grid_view_container {
    width: 40%;
    }

    This are the containers i want custom css on , can you tell me how to make override the already set styling by the plugin.

    Thread Starter Gyanesh Kumar

    (@ghackk)

    2 years, 2 months ago

    Please give a example showing me output too , the ss before css and the output after css.
    Thanks in advance for the support, love it how responsive you are

    Plugin Support Jasmine

    (@hyenokian)

    2 years, 2 months ago

    Dear @ghackk,

    Thank you for your response.

    We recommend you write a strong selector with ID and add !important next to the property.

    For example, you can write the given part like this: 

    div#ays-quiz-container-YOUR_QUIZ_ID {
	margin: 20px !important;
	padding: 20px !important;
	border: 1px solid #ccc !important;
	border-radius: 5px !important;
	background-color: #f9f9f9 !important;
}

    Make sure to change the YOUR_QUIZ_ID with the convenient quiz ID.

    That is, if your Quiz ID is 3, it must look like this:

    div#ays-quiz-container-3

    The result will be the following.

    Before:

    View post on imgur.com

    After:

    View post on imgur.com

    You can do the same for other cases as well.

    Thank you.

    Plugin Support Jasmine

    (@hyenokian)

    2 years, 1 month ago

    Dear @ghackk,

    We’re closing this ticket for now as we last heard from you 1 month ago.

    If the query is unresolved, drop us a line and we’ll get back to you at the earliest and the ticket will be re-opened.

    For a new query, feel free to open a new topic. Our Customer Care Specialists will be happy to help you.

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom class for quiz container’ is closed to new replies.