Most customers have OpenWater build themes for them. However, there is no reason why you can't have your own design team build a theme instead. Additionally, OpenWater provides a default theme which you can modify as much as you want. It is also possible to have multiple themes used across many programs.

This article is for the adventurous, HTML experts out there.

The goal of the theme is to take the site's header and footer while using our platform's content area.

Save Existing Website

We suggest using Chrome or Firefox's Save Website feature to take all of the HTML and javascript elements that are needed. In Chrome, you perform the following action shown in the screenshot.

Make sure to save as type: Webpage, Complete and click Save.

Convert all script and style files to https

It is essential that all javascript, css, and image files are hosted on https:// for security. Re-host any content as needed and adjust the URLs in your saved HTML.

We recommend Amazon S3 as a resource for hosting files.

Make sure fonts, including Google fonts, point to https as well.

Download Starter Template

Download this starter template here: OpenWater Base Theme

Insert HTML

  • In the test file, you will notice 3 places where you can insert HTML.
  • Populate the css rules and javascripts in the 'headscripts' area. Add the header and footer HTML accordingly and test locally.
  • Double check all css, javascript, and image files are uploaded to a server, accessible over SSL and all links are https
  • You can ask OpenWater to host these files for you if need be.

Migrate Theme to OpenWater Platform

In the left side navigation, click Public Settings and then Themes.

Click Add New Theme.

Give the theme an identifiable name, and then populate the Head Scripts, Header, and Footer sections and click Save.

Set the new theme as the Default theme.

Click Public Website at the top of your screen to view your theme applied.

Did this answer your question?