How to make question separator visible while using the new Look & Field? | XM Community
  • EN
Solved

How to make question separator visible while using the new Look & Field?

  • 25 June 2019
  • 8 replies
  • 444 views
fleb
Rank
Userlevel 5
Badge +6
  • fleb
  • Level 3 ●●●
  • 197 replies
Hi 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!
icon

Best answer by fleb 27 June 2019, 15:02

View original

8 replies

ana_velez
Rank
Userlevel 6
Badge +27
Hi!


this code worked for me:

.Skin .Separator {
height: 2px;
background: #1b00c0;
}
Ana Vl
fleb
Rank
Userlevel 5
Badge +6
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.
fleb
Rank
Userlevel 5
Badge +6
So the CSS for hiding the separator before the first question of all pages is:
`#Questions > div:first-child{display:none!important;}`
Bharath
Rank
Userlevel 1
Badge +3

How 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?

S

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!

N
Badge +2

https://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;
}

B
Badge +3

https://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?

N
Badge +2

Yes you add it to the theme's custom css section.

Leave a Reply


Terms & Conditions