nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Custom icons for space

bgl

Hi,

I would like to have a custom icon for a given type of space. I have created a new type (v:voyage-simple) that extends cm:folder.

In the web-client-config-custom.xml, I have set the following:

  <config evaluator="string-compare" condition="Space Wizards">
    <folder-types>
      <type name="v:voyage-simple"
            icon="/images/icons/32/avion.png"
            description="Voyage Simple"
            display-label="Voyage Simple"/>
    </folder-types>
  </config>

 <config evaluator="string-compare" condition="v:voyage-simple icons">
    <icons>
      <icon name="space-icon-default" path="/images/icons/32/avion.png"/>
    </icons>
  </config>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The first part of the previous code sets a special icon in Advanced Space Wizard for this type of space.

My problem comes when Alfresco displays a space that contains my v:voyage-simple. I see the usual folder icon for my space instead of the one I wanted. This also happens when displaying details (icon on the left of the property sheet) and at last the icon in the navigation tree on the left is also the default folder icon.

So I would like to know how I can customize those icons ? I've searched in Alfresco source code. The icon "space-icon-default-16.gif" which is displayed in navigation tree seems to be hardcoded in org/alfresco/repo/template/BaseContentNode.java.
The icon displayed in property-sheet and in parent space is the space-icon-default.

Any hints ?

Find more posts tagged with

Comments

gavinc

Let me clarify a few things….

Are you creating your spaces of type v:voyage-simple through the 'Advanced Space Wizard' or via the 'Create Space' dialog?

If you use the former your space should have the correct icon.

The config you have for the icons is slightly incorrect, you need to define a unique name and place your icon in the correct place i.e. you'll need:

<config evaluator="string-compare" condition="v:voyage-simple icons">
    <icons>
      <icon name="space-icon-voyage" path="/images/icons/space-icon-voyage.gif"/>
    </icons>
  </config> ‍‍‍‍‍

Basically what happens is the app:icon property stores the name of the icon i.e. "space-icon-voyage", then depending on the scenario the path to the image is calculated i.e. for different sizes. If you look in the /images/icons folder you'll see various images with similar names i.e.

space-icon-cd.gifspace-icon-cd-16.gifspace-icon-cd-16.pngspace-icon-cd-64.pngYou will therefore need to put your custom icon file in this location and also supply a 16x16 version (the 2 png images are used by the new web scripts stuff so it depends if you are using them whether you need the png versions)

Hopefully that will help!

bgl

Hi Gavin,

Thanks a lot for your answer. It is working perfectly. I thought I needed to override existing definition for spaces instead of defining something new. Knowing this, your solution is very logical.

To answer your question, I create my space through the advanced space wizard. But I don't see how I could create it from "Create Space" since this action, I can only create "regular" spaces using this menu, isn't it ?

Thanks again for your very clear and sharp answer.

Boris

gavinc

Correct, you can only create 'regular' spaces through the dialog, I was just trying to get an idea of what steps you had taken, but if it's working now thats great!

jzaruba

Is it possible to 1) change space-icon-default and 2) make it PNG, please?