4.5.7.1.1. Using Existing Themes

The platform includes two ready to use themes: Halo and Havana. By default, the application will use the one specified in the cuba.web.theme application property. The user may select the other theme in the standard Help > Settings screen. If you want to disable the option to select new themes for users, register the settings screen in the web-screens.xml file of your project and set the changeThemeEnabled = false parameter for it: 

<screen id="settings" template="/com/haulmont/cuba/web/app/ui/core/settings/settings-window.xml">
    <param name="changeThemeEnabled" value="false"/>
</screen>

Some branding parameters can be configured for default themes, such as icons, login and main application window captions, and the website icon (favicon.ico). This can be done in the following way:

  1. Create the following files structure in the modules/web directory of the project: 

    themes/
  havana/
    branding/
      myapp-login.png
      myapp-menu.png
    favicon.ico

    Here, havana is the directory of the theme, favicon.ico is the website icon, myapp-login.png - login window logo image, myapp-menu.png - main window logo image.

  2. Open Project properties > Edit in CUBA Studio and click Branding at the bottom of the page. Set the paths to icon files for application and login window using Set application logo image and Set login window logo image links. The path is specified relatively to the theme directory. Other links can be used to set window captions and the login window welcome text.

    These parameters are saved in the main message pack of the gui module (i.e the modules/gui/<root_package>/gui/messages.properties file and its variants for different locales). Message packs allow you to use different image files for different user locales. A sample messages.properties file: 

    application.caption = MyApp
application.logoImage = branding/myapp-menu.png

loginWindow.caption = MyApp Login
loginWindow.welcomeLabel = Welcome to MyApp!
loginWindow.logoImage = branding/myapp-login.png

    You should not specify the path to favicon.ico, since it must be located in the root directory of the theme.

Image files that will be used in the icon properties for actions and visual components, e.g. Button, can be also added to default themes.

For example, to add an icon to the Havana theme, you just have to add the image file to the modules/web/themes/havana directory described above (it is recommended to create a subfolder): 

themes/
  havana/
    images/
      address-book.png

After that, you can use the icon in the application by specifying the path relatively to the theme directory in the icon property: 

<action id="adresses"
        icon="images/address-book.png"/>

Font elements of Font Awesome can be used instead of icons. You should just specify the name of the required constant of the com.vaadin.server.FontAwesome in the icon property with a font-icon: prefix, for example: 

<action id="adresses"
        icon="font-icon:BOOK"/>

Images used for standard actions and screens of the platform can be replaced in the project. To replace a Havana theme icon, you should just copy the required image file to the modules/web/themes/havana/icons directory of the project. For example, create.png file should be created to replace the icon for the standard create action (the file name can be easily identified by URL of the corresponding img HTML-element in the running application): 

themes/
  havana/
    icons/
      create.png

In Halo theme, Font Awesome icons are used for standard actions and platform screens by default (if cuba.web.useFontIcons is enabled). In this case, you can replace a standard icon only by creating a custom theme based on Halo (see below) and setting the required correlation between the icon and the font element name in <your_theme>-theme.properties file: 

cuba.web.icons.create.png = PLUS

If cuba.web.useFontIcons property is disabled, the icons for standard actions and screens are loaded similar to Havana theme - from image files in the icons subfolder. They can be replaced in the manner described for Havana.

Halo theme supports the cuba.web.useInverseHeader property, which controls the colour of the application header. By deafult, this property is set to true, which sets a dark (inverse) header.You can make a light header without any changes to the theme, simply by setting this property to false.

Prev  Up  Next
  Home