Companies that use Alfresco often want to match their own corporate branding within the Alfresco web app. Adding a custom logo in the upper left corner is an easy task in the Tools -> Options section of the Admin console, but changing colors and styles throughout the application may seem overwhelmingly tedious; anybody who has spent a lot of time reading through CSS files knows it can take a long time to find the right values to change.

User dashboard

In order to get a better understanding of the level of effort involved with a custom theme I decided to create one for my company, Tribloom. I called my theme Tribloom Theme and used colors based on our corporate logo, seen below. I used lighter and darker shades of green, blue, and orange to match the leaves plus a dark purple to match the logo text. My theme is a little more...vibrant...than the themes you might want to create for your own company or your customers, but I wanted it to be very obvious which CSS selectors went with which UI elements.

Tribloom logo

I learned that it can be very quick and easy to create a fully customized Alfresco theme if you know what colors you want to use, what files to modify and which CSS selectors match which UI elements. Figuring out which CSS selectors to use was the part that took the longest, but now that I know what they are it won't take me long at all to create my next theme - or for you to create yours if you follow the five steps below.

Step 1 - The XML config file

First, you need to create a new theme xml configuration file in the /tomcat/webapps/share/WEB-INF/classes/alfresco/site-data/themes directory. I copied greenTheme.xml and renamed it tribloomTheme.xml to make sure I would get the tag names correct. This is the file that makes the connection between the contents of the css files and the theme list item showing up in the Admin Console. In this file, you need to modify the and values to match your theme. My file ended up looking like this:


Tribloom Theme
theme.tribloomTheme

Step 2 - The theme directory

The second step is to add a directory for your new theme under /tomcat/webapps/share/themes. The easiest way to do this is to copy the contents of an existing custom theme and put them in a directory that matches the name of your new theme.

I started from greenTheme because it had some overlap with my custom colors and I figured I could probably leave some of the CSS values as-is, which would minimize my work. I created /tomcat/webapps/share/themes/tribloomTheme and pasted the contents of the greenTheme directory under that new directory.

Site dashboard

Step 3 - The CSS selectors

In order for YUI to know what styles match each custom theme, the YUI skin selectors need to use the correct name. Since the files under your new theme directory still have all the selectors from the theme you copied them from, you need to change them to reference your custom theme. To do this, open up the following files under your theme directory:

presentation.css
yui/assets/skin.css

In these files, you need to replace all instances of the original skin selector, e.g. .yui-skin-greenTheme with your skin selector - in my case, .yui-skin-tribloomTheme. There are a lot of instances to replace, especially in skin.css, so Replace All is your friend.

Step 4 - Applying your custom theme

After you complete Steps 1 - 3, start up your Alfresco instance and log in as an admin. Navigate to the Tools -> Options area of the Admin Console. Your custom theme will now appear in the Theme drop-down box. Select your theme and push the Apply button, and Alfresco will switch over to your new theme. It will still look like whatever theme you copied your files from, but that's just because the CSS files still have all the values from that original theme. Now it's time to start in with your real customizations.

While you're here in the Tools -> Options area of the Admin Console, you might as well go ahead and upload the custom logo you want to use in the upper left corner of the web app. The logo isn't technically part of your custom theme, but it's a crucial aspect of branding your Alfresco installation.

Step 5 - Changing the CSS styles

The almost-final step in creating your custom theme is to modify the CSS files to use your desired color scheme. (Or, frankly, you can go all kinds of crazy like the geniuses over at the CSS Zen Garden if that's how you roll; it's just CSS and the selectors are all available to you. I'm not going to promise "30 minutes or less" if you follow that route, though - I've gone down the rabbit hole of CSS tweaking in the past and know how easy it is to spend days of your life trying to get colors and positions and widths and borders and images just exactly perfect.)

Project Library

Ok, back to colors. This part took me a while because I needed to track down the right selectors for the UI elements I wanted to customize, but it won't take you any time at all because I'm giving you the answer key right here. For my theme, I ended up modifying about 20 values in presentation.css and 1 value in yui/assets/skin.css. In all cases the selectors already existed and I merely changed the color values and added a couple of gradients when I was feeling extra fancy. Below are the highlights of what I changed - all selectors can be found in presentation.css except for the one noted as being in skin.css.

Links on the User Dashboard and Site Dashboard
.theme-color-1,
a.theme-color-1,
a.theme-color-1:visited,
a.theme-color-1:hover
{
color: #8A4789; /* Tribloom middle purple */
}

"Dashboard" text on User Dashboard
.theme-color-3,
a.theme-color-3,
a.theme-color-3:visited,
a.theme-color-3:hover
{
color: #F8992F; /* Tribloom lighter orange */
}

Bar behind "Username Dashboard" text / site name text
.theme-bg-color-1,
div.theme-bg-color-1
{
background-color: #149AD5; /* Tribloom darker blue */
}


Toolbar background for all the project pages, e.g. Project Library, Project Wiki, etc - I used a subtle gradient here
.theme-bg-2
{
background-color: #9EC640; /* Tribloom lighter green; lightest green to lighter green in gradient */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(177,214,92)),
color-stop(1, rgb(158,198,64))
);
background-image: -moz-linear-gradient(
center top,
rgb(177,216,92) 0%,
rgb(158,198,64) 100%
);
}


Dashlet title bar - it was necessary to comment out the background-image url to allow the background-color to show through
.dashlet .title
{
background-color: #F8992F; /* Tribloom lighter orange */
/* background-image: url(images/dashlet-title-bg.png); Tribloom commented out */
background-repeat: repeat-x;
color: #fff;
}

Navigation bar within a site - it was necessary to comment out the background-image to allow the background-color to show through
.site-navigation
{
background-color: #6FC4EA; /* Tribloom lighter blue */
/* background-image: url(../../components/images/navigation-bg.png); Tribloom commented out */
border-bottom: 1px solid #3a6c38;
border-top: 1px dotted #bbd6e7;
color: white;
}


Background for Advanced Search and other forms
.share-form .form-container .form-fields
{
border: 1px solid #c2c2c2 !important;
background-color: #F6D4B4; /* Tribloom lightest orange */
}

Buttons - it was also necessary to comment out background and background-image on several other tags that included .yui-button; I added the subtle gradient
.yui-skin-tribloomTheme .title-button .yui-button
{
background-color: #9EC640; /* Tribloom added - lighter green */
/* background: transparent url(images/title-button-bg.png) repeat-x 0 0; Tribloom commented out */
/* Tribloom added gradient lightest green to lighter green */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(177,214,92)),
color-stop(1, rgb(158,198,64))
);
background-image: -moz-linear-gradient(
center top,
rgb(177,216,92) 0%,
rgb(158,198,64) 100%
);
border-color: #e3ffe3;
}


In yui/assets/skin.css - needed to comment out background to allow button color to show through
.yui-skin-tribloomTheme .yui-button {
border-width: 1px 0;
border-style: solid;
border-color: #808080;
/* background: url(sprite.png) repeat-x 0 0; Tribloom commented out */
margin: auto .25em;
}


Drop-down menus - border
body.yui-skin-tribloomTheme .yuimenu .bd
{
border: 1px solid #62AB45; /* Tribloom darker green */
}


Drop-down menus - selected item hover
body.yui-skin-tribloomTheme .yuimenu .bd ul li.yuimenuitem-selected
{
background-color: #9EC640; /* Tribloom lighter green */
}


Hover background color for item in Project Library
body.yui-skin-tribloomTheme .yui-dt-data tr.yui-dt-highlighted,
body.yui-skin-tribloomTheme .doclist tr.yui-dt-odd.yui-dt-highlighted,
body.yui-skin-tribloomTheme .doclist tr.yui-dt-even.yui-dt-highlighted,
body.yui-skin-tribloomTheme .links-body tr.links-selected-row,
body.yui-skin-tribloomTheme .over,
.topicview
{
background-color: #F6E7D8; /* Tribloom very lightest orange */
}

Background for selected item in Project Library tree view
.yui-skin-tribloomTheme li.selected,
body.yui-skin-tribloomTheme .treeview .selected,
body.yui-skin-tribloomTheme .categoryview .selected,
body.yui-skin-tribloomTheme .yui-columnbrowser .yui-carousel-content li.yui-columnbrowser-column a.yui-columnbrowser-item-selected
{
background-color: #F6D4B4; /* Tribloom lightest orange */
}


/* these rules need to be separate from the above for ie6 */
.yui-skin-tribloomTheme .treeview .selected > table,
.yui-skin-tribloomTheme .categoryview .selected > table
{
background-color: #F6D4B4; /* Tribloom lightest orange */
}


Link color in Project Library
.yui-skin-tribloomTheme .node .nodeTitle a,
.yui-skin-tribloomTheme .node .nodeURL a,
.yui-skin-tribloomTheme .nodeAttrValue a,
.yui-skin-tribloomTheme .nodeFooter .tag a,
.yui-skin-tribloomTheme .yui-dt-highlighted .detail .tag a,
.yui-skin-tribloomTheme .yui-dt-highlighted .detail .category a,
.yui-skin-tribloomTheme .yui-dt-highlighted .detail .item-social a,
.yui-skin-tribloomTheme a.wiki-tag-link,
.yui-skin-tribloomTheme .node .userLink a,
.yui-skin-tribloomTheme .site-members h3 a,
.yui-skin-tribloomTheme .yui-calendar td.calcell a,
.yui-skin-tribloomTheme .doclist .documents a,
.yui-skin-tribloomTheme .attrValue a,
.yui-skin-tribloomTheme .detail .item a,
.yui-skin-tribloomTheme .info .meta-value a,
.yui-skin-tribloomTheme .rules-none a,
.yui-skin-tribloomTheme .agendaview a,
.yui-skin-tribloomTheme a.previousEvents,
.yui-skin-tribloomTheme a.nextEvents,
.yui-skin-default div.channels a,
.yui-skin-default .info-balloon a
{
color: #8A4789; /* Tribloom mid purple */
}

Step 5+ - For extra credit, the login screen

The icing on the custom-theme cake is a customized login screen. I consider this extra credit because it requires you to do some minor graphics manipulation if you don't have a background image handy.

Login screen

I personally chose the path of least resistance and customized my login screen in the lowest-effort way possible: by modifying loginbg.png in the /images directory. I brought out the gimp and added the Tribloom logo directly onto the loginbg.png image so that it would show up next to the Alfresco logo on the login screen. Direct modification of the Alfresco images is not necessarily a best practice (really, don't do this except for testing), but it's certainly quick if you just want to make an addition to the login screen rather than a more fundamental change.

In conclusion

Ok - it took me more than 30 minutes to create my custom theme. All told it was two or three hours of going back and forth between my browser and the CSS files. The big time suck was that I wanted to change the colors on things like buttons and navigation bars and dashlet headers because those are some of the biggest visual elements in Alfresco, but they don't all match up with obvious selectors in the CSS. That meant using the web developer tools in my browser to hunt down the selectors I needed, which was easy enough but took some time. I also spent a little time up front creating a color-name-to-hex-value chart for all the colors I wanted to use so that I could quickly copy and paste the right values as needed, plus I farted around for a while deciding what color to apply to each UI element.

You, though - you can create your custom theme in 30 minutes or less. If you already know what color you want to apply to each UI element and you're willing to limit yourself to the UI elements outlined above, you'll be done practically as soon as you've started. Go forth and customize!


Loading Conversation