Cascading Style Sheet

Audience1st uses a cascading style sheet (CSS) file to govern the appearance of its web pages. Colors, themes, fonts, and content to include or exclude can all be controlled by editing the stylesheet. In this way you can make Audience1st’s pages look similar in style to the pages on your theater’s website.

Audience1st comes with a default stylesheet that you may leave as-is if you wish. However, a patron’s user experience will change when they move from pages on your theater’s website to Audience1st pages while purchasing subscriptions or tickets. To give your patrons a more seamless, consistent experience you may wish to have the person who built your theater’s website edit the Audience1st stylesheet in order to make Audience1st pages look more in line with those on your theater’s website.

The Audience1st stylesheet can be stored anywhere on the internet that is publicly accessible using a secure connection (https protocol). To find out where your Audience1st stylesheet is currently located so that you can examine or update it, go to the Options tab and note the web address entered in the “Stylesheet URL” field.

If you wish to edit the default stylesheet provided by Audience1st, you will need to download a copy from the web address specified in the “Stylesheet URL” field, edit as desired, and then upload the file to a new location. Some options for where to store your stylesheet free of charge include:

  • If your theater’s website has a static content area (for example, WordPress-based sites have directories from which static assets such as images are publicly served), host the stylesheet there.
  • Host it in a public repository on GitHub or GitLab, and use a service such as JSdelivr to serve it directly from there.
  • Host it on Netlify and serve from there.

Note that when you update your stylesheet, depending on how it is hosted, it may take a few minutes for the changes to propagate and become visible in Audience1st.

Audience1st uses Bootstrap version 4, so you can assume all Bootstrap CSS classes are loaded. See other articles in this section for discussions of the specific elements within the stylesheet.