Custom CSS for different questions in same survey | XM Community
Skip to main content

Hi all, 
I have two sets of CSS code (shown below) that need to be used in the same survey. Ideally, I would like to apply the first set of CSS code to a specific question ID and the other one to another different question ID. I have been putting it in custom look and feel in CSS and have worked out how to do each one separately, but do not know how to apply them to specific questions in my survey (both sets of code need to be used in the same survey). 
I’ve tried other suggested methods but none have worked. 
Does anyone know how to do this? Thank you!
Set #1:
HTML:


 
 

Just look at this little white poof of cuteness.



CSS:
div {
  position: relative;
  display: inline;
}
.imtip {
  position: relative;
  bottom: 10px;
height: 40px;
  right: -50px;
  width: 40px;
}
 span{
    background:url(https://upload.wikimedia.org/wikipedia/commons/8/89/HD_transparent_picture.png);
    color: black;
    font-size: 13px;
    height: 30px;
    width: 200px;
    letter-spacing: 1px;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    bottom: 50px;
    right:-120px;
    display:none;
    font-size: 1.5em;
}


 p{
    margin:100px;
    float:left;
    position:absolute;
    cursor:pointer;
width: 100px;
left: -150px;
height: 1%;
bottom: 300px;
}
  p:hover span{
    display:block;
}
Set #2:
HTML:

 
 

Just look at this little white poof of cuteness.



CSS:
div {
  position: relative;
  display: inline;
left:10px;
  bottom: -10px;
}
.imtip {
  position: relative;
height: 50px;
  bottom: 510px;
  right: 70px;
  width: 50px;
}


span{
    background:#F8F8F8;
    color: #FFA500;
    font-size: 13px;
    height: 50px;
    width: 300px;
    letter-spacing: 1px;
    line-height: 20px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -540px;
    left: 40px;
    display:none;
    
}
span:after{
    content:'';
    position:absolute;
    bottom:-5px;
    width:10px;
    height:10px;
    border-bottom:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}


p{
    margin:100px;
    float:left;
    position: absolute;
    cursor:pointer;
width: 500px;
height: 5px;
right: -60px;
}


p:hover span{
    display:block;
}

@catalyst Can you try passing an id for div? Something like this and in CSS


  https://www.rd.com/wp-content/uploads/2018/02/30_Adorable-Puppy-Pictures-that-Will-Make-You-Melt_124167640_YamabikaY.jpg?fit=700,467" width = "100%" height = "100%" />
 

https://cdn-icons-png.flaticon.com/512/32/32175.png" width = "50%" height = "50%" class="imtip"/> Just look at this little white poof of cuteness.




# Q2 div {
 position: relative;
 display: inline;
left:10px;
 bottom: -10px;
}
# Q2 .imtip {
 position: relative;
height: 50px;
 bottom: 510px;
 right: 70px;
 width: 50px;
}


If you are using page break between both Questions, then apply code respective to each question using under question text (html view), i.e. click Question text >> click HTML view tab at top right of question text tab >> paste code using style tag.

If you are not using Page break then find the QID of question via inspect element (F12) of broweser and apply #QID number before each HTML element selector and paste it on any question text under HTML view only. Don't forget to use . E.g.
If no page break




Leave a Reply