Alfresco Design customizing manual

[a_thakur]

Editing the theme in Alfresco is not the hardest thing to do, yet it needs to be done properly because an upgrade could override your edited work. Because this has been documented but the documentation didn't work for me properly, I have decided to make this post for others who had problems during the creation of custom designs.

To start off with, i have made this 'manual' in steps, so it should be easy to follow it:

Step 1
Go to:
……\webapps\share\themes

Here you will find a list with the current themes. Create a new folder and copy the content from an existing folder. Use a unique folder name; this will also become your theme name. The default folder does not contain the yui file, so copy it from one of the others. You can edit skin.css later.

Step 2
Go to the Shared folder outside your webapps folder:
…..\tomcat\shared\classes\alfresco

Here you will find the web-extension folder. Open this and if it is empty, make a new folder. Call it site-data. Under site-data, create a new folder. Call it themes.

Under themes, create an XML file. Name the XML file identical to your created theme. These are the contents of the xml file:

<?xml version='1.0' encoding='UTF-8'?>
<theme>
 <title>VLC Theme</title>
</theme>
‍‍‍‍‍‍

Step 3
Go back to the root of this extension folder, web-extension

Create a new XML file here and call it: web-framework-config-custom.xml


Place the following code in this file:

<alfresco-config>
  <config evaluator="string-compare" condition="WebFramework">
    
  <web-framework>
         <!– Application Defaults –>
         <application-defaults>
            <theme>vlc</theme>
            <site-configuration>slingshot.site.configuration</site-configuration>
            <!– slingshot region chrome override –>
            <region-chrome>slingshot-region-chrome</region-chrome>
            <!– no chrome required for components –>
            <component-chrome></component-chrome>
        <page-type>
         <id>login</id>
         <page-instance-id>slingshot-login</page-instance-id>
        </page-type>
        <page-type>
         <id>logout</id>
         <page-instance-id>slingshot-logout</page-instance-id>
        </page-type>
         </application-defaults>
 
 </web-framework>
  
  </config>
  
</alfresco-config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Between the theme tags, you place your theme name.

Restart the server and run your Share. Your new design should be taken in use now.

Cheers,
Anand Thakur

[gregorhamsfield]

Oh sweet solution! I was having trouble with this same thing!

I just tried out these steps and it worked like a charm, in one try.

Thanks a lot A.Thakur!