Customizing QSM

Unite Theme
1

I’m using Quiz and Survey Master plugin to create quizzes. I’m not very happy with some style functions. How can I customize the following?
-height and width of the fill-in-blank box (I want to decrease height and increase width.)
-spaces between questions (I want to decrease the space.)
-font type (I want to remove bold type in the main text of questions.)

Thank you in advance!

This is a sample quiz:

This is the Custom CSS of the plugin style:

.mlw_qmn_quiz label {
				display: inline;
			}
			.ui-tooltip
			{
				max-width: 500px !important;
			}
			.ui-tooltip-content
			{
				max-width: 500px !important;
			}
			.qmn_error, .qmn_page_error_message
			{
				color: red;
			}
			.mlw_qmn_hint_link
			{
			text-decoration:underline;
			color:rgb(0,0,255);
			}
			.mlw_qmn_quiz_link
			{
				display: inline;
				vertical-align:top !important;
				text-decoration: none;
			}
			div.mlw_qmn_quiz input[type=radio],
			div.mlw_qmn_quiz input[type=submit],
			div.mlw_qmn_quiz label {
				cursor: pointer;
			}
			div.mlw_qmn_quiz input:not([type=submit]):focus,
			div.mlw_qmn_quiz textarea:focus {
				background: #eaeaea;
			}
			div.mlw_qmn_quiz {
				text-align: left;
			}
			div.quiz_section {
			}
			.mlw_horizontal_choice
			{
				margin-right: 20px;
			}
			div.mlw_qmn_timer {
				position:fixed;
				top:200px;
				right:0px;
				width:130px;
				color:#00CCFF;
				border-radius: 15px;
				background:#000000;
				text-align: center;
				padding: 15px 15px 15px 15px
			}
			div.mlw_qmn_quiz input[type=submit],
			a.mlw_qmn_quiz_link
			{
				border-radius: 4px;
				position: relative;
				background-image: linear-gradient(#fff,#dedede);
				background-color: #eee;
				border: #ccc solid 1px;
				color: #333;
				text-shadow: 0 1px 0 rgba(255,255,255,.5);
				box-sizing: border-box;
				display: inline-block;
				padding: 7px 7px 7px 7px;
				margin: auto;
				font-weight: bold;
				cursor: pointer;
			}
			.mlw_qmn_question, .mlw_qmn_question_number, .mlw_qmn_comment_section_text
			{
				font-weight: bold;
			}
			.mlw_next
			{
				float: right;
			}
			.mlw_previous
			{
				float: left;
			}
			.mlw_qmn_question_comment, .mlw_answer_open_text, .qmn_comment_section {
				width: 100%;
				border-radius: 7px;
				padding: 2px 10px;
				-webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.075);
				box-shadow: inset 0 3px 3px rgba(0,0,0,.075);
				border: 1px solid #ccc;
			}
2

Hi @wafa,

I hope you are well today and thank you for your question.

It is styled by the plugin and not theme but still we want to help you.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Unite Options -> Other -> Custom CSS

#page .quiz_section input[type="text"] {
    padding: 4px 8px;
    min-height: 0;
    width: 200px !important;
}
#page .quiz_section {
    padding: 10px 0;
}
#page span.mlw_qmn_question {
    font-weight: normal;
}

Best Regards,
Movin

3

Hi Movin,

I knew you would help me out :slight_smile:
It’s better now.
Many thanks.

4

You are most welcome here :slight_smile: