Customizing the Share Header style - Alfresco Content Services - 23.4 - 23.4 - Ready - Alfresco - external

For this we use the Developer View in Share. To enable it select the Debug Menu > Toggle Developer View menu item from the top main menu. The Share UI should change so you see red boxes around Aikau widgets:

Note that it is only the Share Header that has been implemented with Aikau so far, and a few other pages. So the red boxes are only marking content in the Header (Menu and Title), the rest of the Dashboard page, dashlets, footer, and so on. is not implemented in Aikau, and hence not marked. To customize the background color for the main menu we need to click the information icon (i) in the upper right corner of the big black box surrounding the main menu:

Clicking this (i) icon brings up an information box as follows:

This tells us that the Aikau widget we are looking for is alfresco/header/Header. To find out what stylesheet (CSS) it uses we can lookup the widget source code online (Aikau is open source). Navigate to the documentation site for Aikau (http://dev.alfresco.com/resource/docs/aikau-jsdoc/), and then search for the widget there. In the source code you should see what CSS file it uses by looking at the cssRequirements: [{cssFile:"./css/Header.css"}] variable.

We can find out more about this CSS file by looking at the full source code on GitHub. Here we can see a number of CSS classes that control the style of the header, which contains the menu and title:

.@{alfresco} .alf-home-icon {
   background: url("./images/home.png");
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
   display: block;
   float: left;
}
    
.@{alfresco} .navigation-menu {
   margin-top: 23px;
}
    
.@{alfresco} .title-menu {
   margin-top: 23px;
}
    
.@{alfresco} .alfresco-header-Header {
   background-color: @header-primary-background-color;
   color: @header-primary-font-color;
   font-family: Open Sans,arial,helvetica,clean,sans-serif;
   padding: 0;
   width: auto;
}
    
/* Sets the highlight on the menu bar items in the header bar ONLY */
.@{alfresco} .alfresco-header-Header .alfresco-menus-AlfMenuBar .dijitMenuPassive .dijitMenuItemHover {
   background-color: @header-hover-background-color;
   color: @header-hover-font-color;
}
. . .

What we should be looking for here are so called LESS variables. These are our way into customizing the Header component style.

.alfresco-share .alfresco-header-Header {
    background-color: #799212; /* Overriding the black background color */
}

This should be avoided as this will make upgrades very difficult and it is not supported. LESS variables and themes are the supported way to change the style of Share.

Looking at the Header CSS file we can see that there are quite a few LESS variables that we can work with:

@header-primary-background-color
@header-primary-font-color
@header-hover-background-color
@header-hover-font-color
@header-focus-background-color
@header-focus-font-color
@header-menubar-font-color
@header-dropdown-menu-font-color
    

What LESS variables that are available differs slightly between versions of Share, and what Aikau version that is brought in. The best thing you can do is, find out what exact version of Aikau that is being used, for example aikau-1.0.25.2.jar (check tomcat/webapps/share/WEB-INF/lib). Then make sure it is a version that is newer than Aikau version 1.0.18, which was the first version to introduce LESS. You can find the Header.css file in the /META-INF/js/aikau/<aikau version>/alfresco/header/css/ directory in the JAR file, which means that you can check exactly what LESS variables are available for you to use.

Customizing the style of the header can be done either by overriding an existing theme, such as the Green Theme, or by creating a new custom theme. In this exercise we will customize the out-of-the-box Green Theme. If we are just customization LESS variables, and we don’t need to change anything else in the Green Theme, then it is enough to just create a Green Theme XML file and override the LESS variables. There is no need to copy over the complete theme directory like when creating a custom theme (see Styling Tutorials).

Overriding the default values for the LESS variables, which are defined in the defaults.less file in Aikau, is currently done by adding a particular element to the Theme XML file. A Theme is defined by an XML file that lives in the themes sub-folder of the client’s Surf configuration folder. In our example the greenTheme.xml file looks like this:

<?xml version='1.0' encoding='UTF-8'?>
<theme>
   <title>Green Theme Override</title>
   <title-id>theme.greenTheme</title-id>
   <css-tokens>
      <!-- Aikau related LESS variables (requires Aikau 1.0.18 or newer) -->
      <less-variables>
         @header-background-color: #799212;
         @header-font-color: #ccc;
         @header-hover-background-color: orange;
         @header-hover-font-color: green;
         @header-focus-background-color: yellow;
         @header-focus-font-color: red;
         @header-menubar-font-color: pink;
         @header-dropdown-menu-font-color: purple;
      </less-variables>
   </css-tokens>
</theme> 

/all-in-one$ ./run.sh build_start