Custom CSS guidelines

1 Scope
2 Adding styling for a specific form
3 Targeting a specific type of survey
- 3.1 Modal
- 3.2 Slide-in
- 3.3 Embedded
4 Use on-page fonts
5 Examples of custom CSS
- 5.1 Hide required mark
- 5.2 Hide icons from navigation buttons
- 5.3 Move position of the close cross
- 5.4 Slide-in close cross
- 5.5 Modal close cross
- 5.6 Modify z-index
- 5.7 Reduce gap from header to first question
- 5.8 Reduce gap between questions
- 5.9 Modify the width of form
- 5.10 Add placeholder text to the translation button
- 5.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

.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 */
}

Use on-page fonts

In most cases, it is possible to use fonts that are used on your website in the Mopinion form as well. This is useful if your company uses a proprietary font and the form should use the same typography as the rest of the page.

The following rules will target the different elements used in the Mopinion forms.

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 fallbacks as well.

/* Form title */
.mopinion-survey-content .srv-title{
    font-family: MyWebFont, Calibri, sans-serif;
}

/* question blocks */
.mopinion-survey-content .control-group{
    font-family: MyWebFont, Calibri, sans-serif;
}

/*question block titles */
.mopinion-survey-content .control-group .block-title{
    font-family: MyWebFont, Calibri, sans-serif;
}

/* custom front / last page */
.mopinion-survey-content .custom-section{
    font-family: MyWebFont, Calibri, sans-serif;
}

/* buttons */
.mopinion-survey-content .btn.btn-previous,
.mopinion-survey-content .btn.btn-next,
.mopinion-survey-content .btn.btn-submit {
    font-family: MyWebFont, Calibri, sans-serif;
}

/* standard thanks page */
.mopinion-survey-content .last-page{
    font-family: MyWebFont, Calibri, sans-serif;
}

/* Passive Feedback  button */
.mopinion-survey-content .btn-open-survey.btn.btn-primary.tab.allow-button {
   font-family: MyWebFont, Calibri, sans-serif;
}

Keep in mind that the preview page within Mopinion won’t have access to this font. So the form preview will look slightly different from what is rendered on your site.

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;
}

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;
}

/* 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.

The “language” text is just an example

.language-toggle .current:before {
    content:'Language'
}

.language-toggle.has-icon .current:before {
    content:''
}

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);
}