Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
1. On the lefthand side of your On The Stage dashboard, click on Settings.
2. Underneath Settings, click on 'Widget'.
3. This will take you to the Widget Configuration page, where you can configure what you would like your widget to display.
4. If you scroll down to the bottom of the page, you will see a section called 'Widget CSS Templates'.
Here you can manage the look of your widget by uploading custom CSS.
5. Click on Download CSS Template to download a default template from OTS with labels explaining what you can change on the widget.
If you already have a CSS file - you can skip this step and go directly to upload!
6. Click on Upload CSS File to import your CSS file.
7. After clicking on upload, this modal will appear. Drag and drop your file or browse to upload.
8. Once you upload your file, it will appear on the Widget CSS Templates table. You can view the name of the file, the date it was uploaded, and take actions.
9. Click on the three dots to the right of the file you wish to take action on.
10. Click on Activate to make that CSS template active and reflect changes on your widget.
11. Once you click Activate, a pop-up will open asking if you wish to perform this action.
By clicking 'Activate CSS Template' the current styling of your widget will be overwritten, and your changes will show.
Click on Cancel or X to leave without applying changes.
12. Once you activate a template, a green ACTIVE icon will appear to the left of the template name.
13. Click on Deactivate to stop displaying the CSS from that template on your widget.
Once you do this, the CSS will return to default On The Stage styling. If you would like to activate another CSS file, you can do so now.
14. Click on Download to download your CSS file. You can do this if you wish to make any changes to the current CSS. You will need to re-upload the file once you have made changes.
15. Click on Delete to remove a CSS template from this table. You can only Delete an inactive file.
16. Once you click Delete, a pop-up will open asking if you wish to perform this action.
By clicking 'Delete CSS Template' the template you've selected will be removed from the list. Click on Cancel or X to leave without applying changes.
Helpful Hint: To change the date select color, remove the following code "var (--onstage-primary-1-main)". From there you can enter the hex code for the color you would like it will update that aspect.