Opinion Stage supports a feature that lets you perform advanced design customization using the CSS language.
Enabling the feature
The CSS settings feature can be found in the widget creation form: Settings > Design > CSS Override. After creating your CSS, copy it to the text box and click save.
Note that you can also set a default css override that will be applied to all items created in the global settings dashboard
Usage options
It's possible to either write your CSS directly into the "CSS Overwrite" input box, or embed an external CSS file with the following CSS @import statement:
@import url('https://mysite.com/opinionstage-widgets.css');
Please note: Opinion Stage widgets work only with "https" please make sure the url is https-accessible.
Please note: the CSS code you add should be based on the #css-api classes only, any other classes you use may not be supported in the future.
If you are already familiar with this feature and want to get the full details, please go to the CSS Override reference.
Otherwise, if you are new to the feature - we recommend to start by viewing the usage example below.
Usage examples
Let's create a simple poll like this:
Let's say we want to remove the border, set the font to be the infamous Comic Sans, and then set some cool background color. This is how it can be done with CSS override:
#css-api .css-api-widget-body {
font-family: "Comic Sans MS", cursive, sans-serif;
border: none;
background-color: #ccceff;
}
Here is the result:
Now let's change the title and options text color to a different one (by appending the following code into the CSS overwrite box):
#css-api .css-api-card-header__title, .css-api-widget-option__label {
color: #2519ce;
}
Now it should look like this:
And finally, let's change the options color:
#css-api .css-api-widget-option {
background-color: #fbf3f32e;
}
#css-api .css-api-widget-option__selection_mark {
background-color: #f9f218;
}
Following are some more popular css override examples:
Change title and text color on widgets cover:
#css-api .css-api-card-header__title { color: yellow; }
#css-api .css-api-card-header__description { color: yellow; }Change the background and text color of the button on the widgets cover:
#css-api css-api-widget-btn--start {
color: red;
background-color: blue;
}Change call to action button color:
#css-api .css-api-widget-btn--call2action {
color: yellow;
background: red;
}Change the background and text color of the widget's option:
#css-api .css-api-widget-option { background-color: white; }
#css-api .css-api-widget-option__label { color: black; }Change the background and text color of the widget's option, when the user hovers the mouse over it:
#css-api .css-api-widget-option:hover { background-color: black !important; }
#css-api .css-api-widget-option:hover .css-api-widget-option__label { color: white; }Change the background and text color of the widget's option, which is already selected by user:
#css-api .selected .css-api-widget-option { background-color: blue; }
#css-api .selected .css-api-widget-option .css-api-widget-option__label { color: yellow; }Change the background and text color of the widget's option, which is already selected by the user (user hovers mouse over it):
#css-api .selected .css-api-widget-option:hover { background-color: green; }
#css-api .selected .css-api-widget-option:hover .css-api-widget-option__label { color: red; }There are many more things you can do with the CSS override feature, for a full-featured example see the CSS overwrite demo file: https://www.opinionstage.com/css-api-example.css.
For advanced users, there is a sass source of the demo file: https://www.opinionstage.com/css-api-example.css.scss
Resources
for the full reference of the feature, please go to the CSS Override reference.