Skip to content
soundjester edited this page Jan 3, 2017 · 11 revisions

CSS Themes

Watcher has the ability to accommodate user created CSS themes. You can create a custom theme by adding a folder to the watcher/static/css/ directory. The name of the folder will be added to the theme drop-down list upon a restart of the application. Please ensure that the theme folder name is unique and descriptive.

Overview

Themes are built using the base CSS files and classes, meaning that wholesale replication of the CSS pages is not necessary. In your theme folder, include an @import url("../DefaultCSSFileNameHere.css") at the top of each CSS file. Then proceed to modify the specific class or element as required.

The Theme folder needs to have a CSS file that corresponds with every base CSS file. If no changes or modifications are needed for a specific CSS file, include only the aforementioned @import statement. This may be common with the movie_info_popup.css and movie_status_popup.css files in particular.

Integration

Custom theme CSS is loaded after the default CSS, so changes to an element, body for example, will take precedence over the default CSS. There may be some instances where an !important CSS enumerator appear within the default CSS, but these should also be superseded by the theme CSS.

Updates

Generally speaking, updates to the application will not overwrite user-created custom CSS themes (e.g. themes with folder names that are not included in the Watcher repository). However, if your theme folder name is generic and a theme is added to the repository with the same name, it is highly likely that the theme will be overwritten.

Feature development is ongoing, and it is likely that new CSS classes or pages will be added. The theme files will automatically accommodate new classes, thanks to the @import statement, but new elements may not match the existing theme, requiring user intervention. If new CSS pages are added to the "Default" theme, corresponding pages will also need to be created in the theme folder.

Support

Themes currently integrated in the Watcher repository will be supported on an on-going, semi-voluntary basis. User-created themes not included in the Watcher repo cannot be explicitly supported by the development team. Use at your own risk.