Custom CSS guidelines
- 1 Scope
- 2 Adding styling for a specific form
- 3 Targeting a specific type of survey
- 4 Targeting Mobile Device / Small Screens
- 5 Applying fonts via custom CSS
- 6 Examples of custom CSS
- 6.1 Hide required mark
- 6.2 Hide icons from navigation buttons
- 6.3 Move position of the close cross
- 6.4 Slide-in close cross
- 6.5 Modal close cross
- 6.6 Modify z-index
- 6.7 Reduce gap from header to first question
- 6.8 Reduce gap between questions
- 6.9 Modify the width of form
- 6.10 Add placeholder text to the translation button
- 6.11 Make the feedback button transparent
The design editor of Mopinion lets you customize a great part of the form that you are building. But sometimes there is a need to add additional styling that cannot be added directly in the form interface.
If you are experiencing issues with the display of the survey in your live environment whereby the survey looks different than it did in the preview, please contact us at support@mopinion.com
These styling rules can be added in the Custom CSS section in the Design > Form tab.
The custom CSS rules are part of the currently selected theme, keep in mind that all surveys that share this theme will also share the additional styling rules added here.
Scope
All elements in the Mopinion forms are descendants of an element with the class mopinion-survey-content
. When adding rules in the Custom CSS editor, use this class to scope your rules to:
.mopinion-survey-content
Not starting your selector with this class poses the risk of the custom CSS influencing styling on your page.
Adding styling for a specific form
It is possible to add custom styling that will only apply to the styling of a specific form, so even if multiple forms are sharing the theme, the rule can be scoped to apply to just one.
This can be done by utilizing the data-key attribute that is unique for each form. The value of that data-key attribute will be the form key associated with that form.
The form key for a survey can be found on the form overview page:
.mopinion-survey-content .mopinion-survey-output[data-key='c1ca409945618baa84fde4a564de806cc303d432'] {
/* styling for survey c1ca409945618baa84fde4a564de806cc303d432 goes here */
}
Targeting a specific type of survey
Mopinion has three distinct display types for the surveys:
These different types get their own class when rendered
Modal:
.is-modal
Slide-in:
.mopinion-slide
Embedded:
.is-embed
Modal
.mopinion-survey-content .mopinion-survey-output.is-modal {
/* Applies only to surveys displayed as modal */
}
Slide-in
Embedded
Targeting Mobile Device / Small Screens
It is possible to only apply CSS on mobile devices or those browsing on a small screen. One can do so by checking the max width of the user’s screen.
To do this you can add your CSS code on line 2 inside the following snippet
Feel free to modify the 450px value to your liking.
Applying fonts via custom CSS
It is possible to use your own fonts that are hosted on your website in a Mopinion form. This is useful if your company uses a proprietary font and the form should use the same typography as the rest of the page.
We can also host your fonts on our end for you, in this case we will add the font family to the custom CSS.
For both of the above options, one can then use the following rules to target the different elements used in Mopinion forms and apply the chosen font(s) to those elements.
Make sure that the font declaration matches the font declaration as used on your site, e.g. replace MyWebFont
with the actual font, we recommend using the same font fall backs as well.
Examples of custom CSS
Hide required mark
When setting a question element and setting it to required, Mopinion adds an asterisk after the question title to indicate that this is the case.
If you want to hide this asterisk, the following rule can be used.
Hide icons from navigation buttons
The navigational buttons have by default also an icon on them.
If you want to hide the icons on the navigational buttons the following rules can be used
Move position of the close cross
The position of the closing cross for modal or slide-in surveys can be changed by adding one of the following rules. This element is absolute positioned relative to its parent element.
Slide-in close cross
Modal close cross
Modify z-index
Reduce gap from header to first question
Reduce gap between questions
Modify the width of form
Add placeholder text to the translation button
The translation button has no text by default but this can be added.