Hands On: Create Look and Feel Theme

Step 1: Add New Theme

1.1 In OpenWater click Public Settings and then click Themes.

1.2 Click Add New Theme.

1.3 Give your theme a Name, Description, Banner (logo) Size. Then configure Header Scripts, Header, Footer, and Widgets as needed. When ready click Save and Back.

Step 2: Configure Website

2.1 Under Public Settings click Website.

2.2 Click the General tab.

2.3 Uncheck Use Default Theme.

2.4 Click the new drop down menu option.

2.5 Select the theme you just created. When done click Save.

Step 3: Match Styles

3.1 On your main website right click on any element and click inspect. Change the styles as necessary and copy that code into your own CSS document.

3.2 This is an example of a custom CSS file in Visual Studio Code editor. As described in this lecture's PDF you must externally self host this and link to it in the Head Scripts section of your theme.