Custom CSS guidelines
- 1.1 Scope
- 1.2 Adding styling for a specific form
- 1.3 Targeting a specific type of survey
- 1.4 Targeting Mobile Device / Small Screens
- 1.5 Applying fonts via custom CSS
- 1.6 Examples of custom CSS
- 1.6.1 Hide required mark
- 1.6.2 Hide icons from navigation buttons
- 1.6.3 Move position of the close cross
- 1.6.4 Slide-in close cross
- 1.6.5 Modal close cross
- 1.6.6 Modify z-index
- 1.6.7 Reduce gap from header to first question
- 1.6.8 Reduce gap between questions
- 1.6.9 Modify the width of form
- 1.6.10 Add placeholder text to the translation button
- 1.6.11 Hide default language from language toggle button
- 1.6.12 Make the feedback button transparent
- 2 Centering of form elements
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
.mopinion-survey-content .mopinion-survey-output.mopinion-slide {
/* Applies only to surveys displayed as slide-in */
}
Embedded
.mopinion-survey-content .mopinion-survey-output.is-embed {
/* Applies only to surveys displayed as 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
@media screen and (max-width: 450px){
}
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 MyFont
with the actual font, we recommend using the same font fall backs as well.
/* Feedback button */
button.btn.btn-open-survey{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Form title */
.mopinion-survey-content .srv-title{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Front page */
.mopinion-survey-content .front-page .custom-section{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Last page */
.mopinion-survey-content .last-page .custom-section{
font-family:'MyFont', Helvetica, sans-serif;
}
/*question block titles */
.mopinion-survey-content .control-group .block-title{
font-family:'MyFont', Helvetica, sans-serif;
}
/* question blocks ( rating scores, radio/checkbox text etc ) */
.mopinion-survey-content .control-group label{
font-family:'MyFont', Helvetica, sans-serif;
}
/* input & textarea */
.mopinion-survey-content .control-group input,
.mopinion-survey-content .control-group textarea{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Likert/Matrix */
.mopinion-survey-content .control-group th,
.mopinion-survey-content .control-group td{
font-family:'MyFont', Helvetica, sans-serif;
}
/* error message */
.mopinion-survey-content .alert.alert-danger{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Rating legend */
.mopinion-survey-content .rating-legend{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Button previous/next */
.mopinion-survey-content .btn.btn-previous,
.mopinion-survey-content .btn.btn-next{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Button submit */
.mopinion-survey-content .btn.btn-submit{
font-family:'MyFont', Helvetica, sans-serif;
}
/* Translation language options*/
.mopinion-survey-content .toggle-menu-label{
font-family:'MyFont', Helvetica, sans-serif;
}
Keep in mind that if you use on-page fonts, the preview page within Mopinion won’t have access to this font. As a result the form preview will look slightly different from what is rendered on your site. If we host the font for you, then the custom font will shown in the form preview.
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.
.mopinion-survey-content .required-mark{
display:none;
}
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
/* Hide icon from previous button */
.mopinion-survey-content .form-actions .btn.btn-previous i{
display:none;
}
/* Hide icon on next button */
.mopinion-survey-content .form-actions .btn.btn-next i{
display:none;
}
/* Hide icon from submit button */
.mopinion-survey-content .form-actions .btn.btn-submit i{
display:none;
}
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
/* Change position close cross for Slide-in surveys */
.mopinion-survey-content #surveyBody.mopinion-slide .close-modal {
top: 0;
right: 0;
}
Modal close cross
/* Change position close cross for Modal surveys */
.mopinion-survey-content #surveyBody .close-modal {
top: 10px;
right: 10px;
}
Modify z-index
/* Change z-index of the feedback button */
.mopinion-survey-content .btn-open-survey.tab{
z-index: 9500!important;
}
Reduce gap from header to first question
.mopinion-survey-content #surveyHead{
margin-bottom:0;
}
Reduce gap between questions
.mopinion-survey-content .control-group{
padding-bottom:0;
}
Modify the width of form
.mopinion-survey-content .surveyWindow {
width:20%!important;
min-width:300px!important;
max-width:1000px!important
}
Add placeholder text to the translation button
The translation button has no text by default but this can be added.
.language-toggle .current:before {
content:'Language'
}
.language-toggle.has-icon .current:before {
content:''
}
Hide default language from language toggle button
.toggle-item-wrap .toggle-menu-item:first-child{
display:none;
}
Make the feedback button transparent
/* Modify the fourth parameter to set the opacity */
.mopinion-survey-content button.btn-open-survey.btn-primary.tab-right {
background-color:rgba(3, 169, 244, .3);
border-color:rgba(3, 169, 244, .3);
}
Centering of form elements
/* Form Title */
.mopinion-survey-content #surveyHead h1 {
text-align:center;
}
/* Question Titles */
.mopinion-survey-content .block-title {
text-align: center;
}
/* Thumbs */
.mopinion-survey-content .button-container {
justify-content: center;
}
/* Smileys */
.mopinion-survey-content .rating-group.emoji {
margin: auto;
}
/* Stars */
.mopinion-survey-content .rating-group.stars div{
display: flex;
justify-content: center;
}
/* Screenshot */
.screenshot-group fieldset div {
text-align: center;
}
/*GCR / Category */
.mopinion-survey-content .gcr-wrapper.button label,
.mopinion-survey-content .category-wrapper.button label {
text-align: center!important;
}
/* Select */
.mopinion-survey-content .nice-select .option {
text-align: center;
}
/* Radiobuttons / Checkboxes */
.mopinion-survey-content .radio-group,
.mopinion-survey-content .checkbox-group{
text-align: center;
}
.mopinion-survey-content .radio-group div,
.mopinion-survey-content .checkbox-group div {
display: inline-block;
}
.mopinion-survey-content .radio-wrapper,
.mopinion-survey-content .checkbox-wrapper {
display: flex!important;
}
/* Link element */
.mopinion-survey-content .link_block {
text-align: center;
}
/* Section break */
.mopinion-survey-content .section-title,
.mopinion-survey-content .srv-description, .mopinion-survey-content .section-description {
text-align: center;
}
/* Form control buttons */
.mopinion-survey-content .form-actions {
display: flex;
justify-content: center;
}
/* Add spacing between back - next/submit button */
.mopinion-survey-content .form-actions button:nth-child(2) {
margin-left: 2rem;
}