Theming your Opal application
Opal applicatoins ship with a basic theme that is good enough to use in production, but we expect that most applications will wish to customise the look and feel. Accordingly, we support a range of different theming options.
Basic Options
Basic theming comes in the form of settings which can be tweaked. You can give your application a different name, logo, and set the version number.
Overriding CSS and templates
You can override the CSS to change the core colours et cetera, and there are some key templates that you can tweak.
Changing the home page.
By default, the home page of an opal application simply renders the welcome.html
template.
Form styles
Opal defaults to using Bootstrap form-horizontal style widgets. That means that the
label is rendered on the same line as the form widget. You can change this to the
vertical (default Bootstrap style )for an individual form widget by passing the style
argument:
{% input field="Demographics.first_name" style="vertical" %}
Custom Themes
Comprehensive re-skins likely require you to write your own Opal theme. You can do this within an application directly, or if you definitely have a theme you want to use in multiple applications, you can write a theme plugin.
Example themes
We have created a number of example themes for Opal. These are intended to demonstrate the possibilities rather than for production use.