The Share web application comes with a number of themes that can be used to set the look and feel of the application. It is also possible to create your own custom UI themes.
Architecture Information: Software Architecture
The look and feel of the Share user interface is determined by what theme that is currently active, it provides the default CSS and image assets used across all pages. There are number of themes available out-of-the-box:
- Light Theme (Default)
- Google Docs
- Green
- Blue
- High Contrast Black
- Yellow
The default theme can be changed via the Share Admin Tools:
You set the theme for the whole Share UI, but you can also configure a theme per site.
It is possible to create a new custom theme based on one of these existing themes. The way to do that is to start by copying one of the themes under alfresco/tomcat/webapps/share/themes directory to a new directory under share-amp/src/main/amp/web/themes. Then update it with a new Theme ID and define the new Theme for Surf by adding a file to the alfresco/web-extension/site-data/themes directory. This XML file looks something like this:
<?xml version='1.0' encoding='UTF-8'?>
<theme>
<title>My Red Theme</title>
<title-id>theme.redTheme</title-id>
</theme>
When a custom theme has been created based on an existing theme it is time to configure the look and feel for it. This involves two steps as the Share UI contains both Aikau components and YUI components, and they are styled in different ways. See the tutorials section for more information on this.