How to do styling
New markup uses div's, not tables as it was before. To make markup responsive we use media-queries and CSS3 flexbox.
Almost each element on a page has CSS class assigned. Class names follow BEM naming convention.
Style bundle customization
This is the easiest way of customization. It allows you to change colors used by survey and use your logo.
Style bundle selection and settings are on a survey layout theme level.
Custom CSS
For changes not supported by style bundle you should use theme level custom CSS. All CSS specified there will be added to survey CSS file in a runtime.
Class names follow BEM naming convention.
For example question container div have cf-question
class.
If it's a single question it also have cf-question--single
.
Div with question text have cf-question__text
class.
Div for selected answer in a single question - cf-list__item cf-single-answer cf-single-answer--selected
Totally custom CSS
For a complete restyling, where you don't need any styles provided by Forsta you can select 'none' as your stylebundle. In that case no Forsta styles will be applied to the survey. You'll need to write your styles for a whole page in custom css or link external file.