How to add custom icon png to custom share header?

[henrikr]

Hi!

I have a AIO-project in Alfresco SDK 3.0.0 (I think?) with Alfresco community 5.2, and I have added a custom menu item for a Aikau-page I've made. But I wish to add a cool icon to it - for example like the icons for workflows and tasks - but I've tried a number of vague instructions out there, to no avail so far.

I think I've understood it correctly like this:
1. change the iconClass value in the widgets
2. create a corresponding style class in some css-file
3. add the png-file the css-style class is pointing to

My only question is - where in my AIO project do I add these files? Do I need a module for this or not? If someone knows a step-by-step instruction on how to successfully incorporate a custom icon into my aio-project/amp, I would be forever grateful

[abhinavmishra14]

The good idea is to create a share theme module and apply it to the share.war. You can take the reference of any existing themes available in share.war, all the ootb themes can be found here: <TOMCAT_HOME>\webapps\share\themes\ 

Here is a documentation : https://docs.alfresco.com/5.2/tasks/dev-extensions-share-tutorials-add-theme.html

Suppose you choose to take reference from blueTheme (default), then follow the below steps (i am telling at very high level):

1- Create a share module (e.g. custom-bluetheme-share)

2- Create custom-blue-theme.properties under \custom-bluetheme-share\src\main\resources\alfresco\web-extension\messages so that you can add the name of the theme which is displayed in admin cosole when you make selections.

3- Create a context file (e.g. custom-share-themes-context.xml) under "web-extension" and add the bean definition to load the properties file.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE beans PUBLIC '-//SPRING//DTD BEAN//EN' 'http://www.springframework.org/dtd/spring-beans.dtd'>

<beans>
  <bean id="custom.theme.resources" class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent">
    <property name="resourceBundles">
      <list>
        <value>alfresco.web-extension.messages.custom-blue-theme</value>
      </list>
    </property>
  </bean>
</beans>

4- Create theme definition, e.g. customBlueTheme.xml under src\main\resources\alfresco\web-extension\site-data\themes and add the following (copied from the orginal bluetheme definition found here: <TOMCAT_HOME>\webapps\share\WEB-INF\classes\alfresco\site-data\themes\default.xml)

<?xml version='1.0' encoding='UTF-8'?>
<theme>
   <title>Custom Blue Theme</title>
   <title-id>theme.customBlueTheme</title-id>
   <css-tokens>
      <less-variables>
@dashlet-background: transparent;
@dashlet-border: 1px solid #bababa;
@dashlet-border-radius: 0;
@dashlet-title-background: #d7e0e7 linear-gradient(to bottom, #e3ebef, #afc0cf);
@dashlet-title-border-bottom: 0;
@dashlet-title-border-radius: 0;
@dashlet-title-color: #262d35;
@dashlet-toolbar-background: #f6f6f6;
@dashlet-toolbar-border-bottom: 1px solid #d3d3d3;
@dashlet-body-background: #f9fcfd;
@dashlet-body-border-radius: 0;
</less-variables>
   </css-tokens>
</theme>

5- Now all theme customizations would go under META-INF folder (same as how you extend/add share components)

• Copy the custom logo here: src\main\resources\META-INF\components\images
• Footer image would go here: src\main\resources\META-INF\js\alfresco\footer\css\images
• Create a themes folder under META-INF (src\main\resources\META-INF\themes) and copy the original blueTheme (default- found here: <TOMCAT_HOME>\webapps\share\themes\default) here and update the images, css etc. accordingly. 

When you will apply the theme, the logo added here: src\main\resources\META-INF\components\images\, will automatically strat displaying

[henrikr]

Never thought about themes, interesting. But the impression I get from the documentation is that you only can replace, not add, and you only affect logos and such, not the icons.

Can I add additional images to be used in alfresco, and can I use them in the aikau widgets as iconClasses?

*** EDIT ***

I tested it and it looks like it worked! But is there any other way to do it, without adding it via a theme? Perhaps just a regular module in some way? Just the image and css?

[abhinavmishra14]

The idea of theme is not to replace but add. Suppose if you have a green theme applied and you want to use the same theme but you need different images such as, fabicon, header logo, footer logo, login page logo, app-logo etc. Then either you override the same theme and replace the images or create a theme. 

By creating the theme, you have ability to apply/remove your custom theme from admin console.

You can additionally add any other images and refer them as a resource in any email templates, any aiku pages etc.

For example if have an image under: <RESOURCE_PATH>\META-INF\components\images

And i want to use it in any of my email templates, i would refer to the image as: 

${shareUrl}/res/components/images/my-custom-image.png

I would suggest looking into an existing theme and all the images it has. As mentioned previously, you can find ootb themes here: <TOMCAT_HOME>\webapps\share\themes\ 

Select any theme as a reference and you can review all associated images (e.g. found here: <TOMCAT_HOME>\webapps\share\themes\ default\images\) you see on login page, header, footer, fabicon etc.

[henrikr]

Adding it via a theme is good, but in my case (and probably others occasionally) I already have a theme I must use, and I'm not allowed to tinker with. Inconvenient, I know, but non-negotiable. Sadly I must find another way to solve my problems. 

[henrikr · Accepted solution]

I found a way that might or might not be completely OK for everyone, but it solved the problem for me:
To import a CSS, you can inject it via a custom widget. You can use the aikau-github tutorial for guidance on how to create and deploy the widget. Just make sure the widget is used, and all the css will be available to everything else on the page. The widget can basically be a hollow base widget with html template as an empty div-tag, and no js functions.