Solved
How to make question separator visible while using the new Look & Field?
+6Hi all,
I'd like to display question separator in the whole survey. In the old Look & feel editor, it was easy. Unfortunately, I can't find the way while using the new one. Therefore I tried some CSS code. I ended up with the one below, however, it doesn't work at all:
.Separator{
border-style: solid!important;
border-width: 5px!important;
border-color:green!important;
height: 5px!important;
color:green!important;
background-color:green!important;
display:block!important;}
I've also tried the code by @Shashi from this discussion, but nothing happened.
The question separator is there and its HTML looks like this:
<div id="QID10Separator" class="Separator" data-runtime-show="runtime.SeparatorDisplayed"></div>
I use the classic layout and rthe compact spacing.
Thanks for any ideas!
Best answer by fleb
Hi @ana_velez_voce,
thank you very much. Unfortunately, it did not work for me even if I added `!important.` to both terms.
Finally, I find out that in my case, the following code worked:
.Skin .Separator {
height: 2px;
background: green;
display:block!important;
}
However, there is still a problem that there is a separator also before the first question. I'll try to sort this out and put the solution here for others.
Sorry, I haven't accepted your answer, but I found out my solution after I started to think I won't manage to solve this on my own based on your answer.
+27Hi!
this code worked for me:
.Skin .Separator {
height: 2px;
background: #1b00c0;
}
Ana Vl
+6Hi @ana_velez_voce,
thank you very much. Unfortunately, it did not work for me even if I added `!important.` to both terms.
Finally, I find out that in my case, the following code worked:
.Skin .Separator {
height: 2px;
background: green;
display:block!important;
}
However, there is still a problem that there is a separator also before the first question. I'll try to sort this out and put the solution here for others.
Sorry, I haven't accepted your answer, but I found out my solution after I started to think I won't manage to solve this on my own based on your answer.
+6So the CSS for hiding the separator before the first question of all pages is:
`#Questions > div:first-child{display:none!important;}`
+3How to make question separator visible while using the new Look & Field?I tried including this code in the custom CSS section, but it does nothing.. Am I doing something wrong?
https://community.qualtrics.com/XMcommunity/discussion/comment/15837#Comment_15837Dear Fleb, when I used these code to hide the separator before the first questions, it worked. However, it unfortunately worked badly in that the default "End of Survey" message that respondents are supposed to see after they have successfully submitted their responses became hidden as well. The respondents would only see a blank page.
If you have any way to (1) hide the separator but (2) still display the "End of Survey" message, please do share! Thank you!
+2https://community.qualtrics.com/XMcommunity/discussion/comment/15837#Comment_15837You can also use this to hide any div at any give position - 2, etc.
#Questions > div:nth-of-type(2) {
display:none !important;
}
+3https://community.qualtrics.com/XMcommunity/discussion/comment/15325#Comment_15325I can't get any of these separator codes to work! I know nothing about CSS. I'm trying to add it in to our theme's "Custom CSS" section. Is that the correct place? We only have one other CSS element for a custom font, and I'm unsure if it matters if I add this in before or after it, but it doesn't seem to work no matter what code I use from this page or where I place it. Any ideas?
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.