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 > Look & Feel > 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 item defaults 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.

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:

Lets 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 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 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 background and text color of the button on 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 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 background and text color of the widget's option, when user hovers 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 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 background and text color of the widget's option, which is already selected by user (user hover 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

  1. for the full reference of the feature, please go to the CSS Override reference.
  2. For more information on CSS, please consult the following articles: colors , backgrounds, borders, margins and padding, text   


Did this answer your question?