Result page design, Buttons block designt and more (a universal solution?)

Hi @shaiweb,

First of all, please try pasting the CSS code in Appearance -> Customize -> Additional CSS section so that it gets implemented easily.

I am trying to get the buttons block to be narrow, let’s say 70% of the width, so it will fit nicely inside the container of the questions and test.

The buttons are already placed inside the quiz container. I request you to please share the quiz URL so that I can check why buttons on your quiz are outside of the container.

Secondly, I am trying to edit design for the result page, which seems to not be affected by the margin css for the other text, but will obey the css for background-color / text in a good way.

The CSS of the results page is different from the quiz page that is why it is not inheriting the CSS of quiz page.

thirdly, in the last page of the quiz, when ‘submit’ button appears, it will overide my ‘previous’ button.

Try appending the CSS class for qsm pages in front of the previous button class so that it doesn’t get overridden by the submit button at the last page. For e.g. .qsm-page-1

Please let me know.

Kind regards,
Kriti

thank you for your answer.

So the quiz url is yahasim.org.il/quiz1

as for the rsult page – how can i edit css for the result page?

I tried working with submit button like so and it didn’t take effect:

.quiz_section.quiz_end .qsm-submit-btn {

border-radius: 30px;}
display: block;
position: static;
float: left;
margin-top: 160px;
margin-bottom: 15px
}

with the other two things I dind’t manage to fix anything too so far.

thank you very much.

Hi @shaiweb,

I am looking into the css codes so that I can help you with the required solution. Please allow me some time, I will keep you posted regarding the same.

Kind regards,
Kriti

Hi,

The results page has different CSS and you can apply using .qsm-results-page.

To apply the custom CSS on the submit button, please paste the following CSS code in the Appearance -> Customize -> Custom CSS

.qsm-submit-btn {
border-radius: 30px;
display: block;
position: static;
float: left;
margin-top: 160px;
margin-bottom: 15px;
border-radius: 30px;
}

I checked the quiz URL and the buttons are inside the container.

Please let me know.

Regards,
Kriti

Thank you very much for your answer!

Indeed I managed to place the previous and next buttons inside the container.

The class for .qsm-results-page worked when I used it in the dashboarde-> appearance-> customize -> additional css. THANK YOU!!! ??

However, as far as the submit button I tried pushing the code to the same place as you mentioned in the same additional css box, but it didn’t take any effect, I tried to copy the code from here, but also tried copying a different code as follow. I tried using that also you you “style” tab in the plugin, took the same effect.
Maybe this has to do with the pagination style? (it comes before the btn style code, but here i pasted that afterwards so you could review)

.qmn_quiz_container .qmn_btn:hover, .qmn_quiz_container .btn:hover { background: #8e44ad !important; }
.quiz_section.quiz_end .qsm-submit-btn {
    border-radius: 30px;
    display: block;
    position: static;
    float: left;
    margin-top: 160px;
    margin-bottom: 15px;
    border-radius: 30px;
}

pagination

.qmn_pagination {
	position: relative;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	padding: 15px 30px 15px 30px;
	border-top: 1px solid #f3f3f3;
        

}

@media screen and (min-width: 500px) {
	.qmn_pagination {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	}
}

• This reply was modified 4 years, 4 months ago by shaiweb.
• This reply was modified 4 years, 4 months ago by shaiweb.

Hi @shaiweb,

Yes, the submit button CSS code isn’t taking place because it is getting a clash with the pagination style.

Kind regards,
Kriti

Hi kitty, thank you very much for all of your help!

So how would I work with this styling? i can’t manage to apply this.
Pagination is what makes stuff centered and contained well, so how can i work with that?

Hi @shaiweb,

I will talk to the development team regarding this and get back to you as soon as I hear back from them.

Kind regards,
Kriti

ok, thank you Kriti,
Will wait ??

Hi,

The following example will style submit button to black background with white text.

It does not affect previous and next button.

input.qsm-btn.qsm-submit-btn.qmn_btn {
background: #000 !important;
color: #fff !important;
}

Please check and let me know.

Kind regards,
Kriti

Hi kriti,

I believe I was provided with the right answe to the wrong question? I am pretty pleased with the color

My issue is around the location of the “submit” button which right now override my “back” button – I want the submit button to be placed at the left hand side of the container.

Thank you very much again!

Hi @shaiweb,

Thanks for reaching out to us again. We are looking into this and will provide you with a solution soon.

Kind regards,
Kriti

Hi @shaiweb,

The following css code will move the submit button above the previous button.

input.qsm-btn.qsm-submit-btn.qmn_btn {
    bottom: 110px !important;
    right: 30px !important;
}

Please check and let me know.

Kind regards,
Kriti