LearnDash Quiz Styles for Social Learner/Boss Theme by BuddyBoss

learndash-quiz-styles-buddyboss.css

/**
 * These styles should be copied & pasted to a child theme or the "Additional CSS"
 * area of the WordPress Customizer. They will override the default styles
 * that are applied by the Social Learner & Boss theme by BuddyBoss.
 *
 * These styles only cover certain areas of LearnDash quiz content, and
 * do not apply to any other areas of LearnDash or the Social Learner/Boss theme.
 *
 * This is a sample to get you started.
 * Update the colors, borders, etc. to reach your desired outcome.
 */


/* Background for list of questions */
.learndash .wpProQuiz_content .wpProQuiz_reviewQuestion {
	background: #fff;
	padding: 10px;
	border: 0;
}

/* Each number block */
.learndash .wpProQuiz_content .wpProQuiz_reviewQuestion li {
	width: 25px;
	height: 25px;
}

/* The active question number block */
.learndash .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionTarget {
	background-color: #00a759;
	border-color: rgba( 0,0,0,0.1 );
	box-shadow: none;
	color: #fff;
}

/* Quiz content area */
.learndash .wpProQuiz_content .wpProQuiz_listItem {
	background: none;
	border-radius: 0;
}

/* Container for question + answers */
.learndash .wpProQuiz_question {
	margin-bottom: 1em !important;
}

/* Question Text */
.learndash .wpProQuiz_content .wpProQuiz_question_text p {
	margin-top: 1em;
	/*font-size: 20px;*/
	/*color: #000;*/
}

/* Answer List */
.learndash .wpProQuiz_content .wpProQuiz_questionList {
	background: transparent;
}

/* Each answer for multiple choice questions */
.learndash .wpProQuiz_questionList[data-type=assessment_answer] label,
.learndash .wpProQuiz_questionList[data-type=multiple] label,
.learndash .wpProQuiz_questionList[data-type=single] label {
	background-color: transparent;
	border: 0;
	padding: 5px;
}

/* Checkbox/Radio border color for multiple choice questions */
.learndash .wpProQuiz_questionList input[type=checkbox]+strong:before,
.learndash .wpProQuiz_questionList input[type=radio]+strong:before {
	box-shadow: 0 0 0 2px #00a759;
	border-radius: 0; /* removes the rounded corners */
}

/* Fill color for checked/selected checkboxes and radios */
.learndash .wpProQuiz_questionList input[type=checkbox]:checked+strong:after {
	background-color: #00a759;
	border-radius: 0; /* removes the rounded corners */
}