How to create different CSS to multiple blocks? | XM Community
Skip to main content

So I created a survey, it’s a combination of 3 types of questions and total 8 blocks. 
The main type of questions and the end result is shown as below, which are contained 3 text inputs and 1 None option regarding one image or audio. 
Ayvk1W9xDb1xiD0otEvsu1dk5n-7hYr97XYrN0pQ-B-N8p34cZIkt0bUrS-ckh-yPC8cLbjxMwf935Nd1DWeXkxD17DCzCQcI_nSKY5yjIu2sTfvo-iHkFPjhfl6-RH9tfCXoGulLQv5MX0uXb_PjalFEOlSYlZffU2M0q1dT3BMf-ZOrNcxFSV_RQ

The other two types are multiple choice or selective choice. 


The CSS I used below, works for some of the questions but not all of them, sometimes messing up with other types of questions as well.  

************************************************************
.Skin .MC label.q-checkbox {
    display: none
}
.Skin .MC labelnfor$="~4"] {
    display: block
}
.Skin .MC label.for^="QR~QID3~"] {
    display: block
}

.Skin .MC label    display: block
}
**********************************************************************

Is there anyone know how to create CSS for different blocks? And how do I know which one is the block number as I fail to find the patten from the naming convention for the questions label? 

Thanks. 


In general, you can't because there aren't any block identifiers in the page. I think there are much approaches anyway, but...
You could do it by setting a 'block' embedded data field in the survey flow, then use JS in the header or footer to insert its value into a class of an element in the DOM hierarchy (e.g., the .Skin element). Then you could use those class names in your CSS rules.


Thanks Tom.
I will try and report back. 🙂


Leave a Reply