Define colors for SVG preview images in content items

In content areas, you can define a content item not to display the item itself, like the data workbench, graphic view, or configured report, but to display a preview image itself. The user must click the title of the content item to open the underlying content. If you add an SVG image with a single color as preview image to a content item, you can change the color of the SVG image depending on the color theme the user selected.

1. Go to the Reusable Elements tab.
2. Right-click the User Interface Groups node and select Create New Style Group.
3. Click the new style group node and set the attributes:
   • Name: Change the name to a meaningful name for display in the style selector in Alfabet Expand.
   • Caption: Change the caption to a meaningful caption for display in the Alfabet user interface in the views to edit the coloring for a new custom theme.
   • Type: Select Custom.
4. For each color you want to use for coloring SVG images, you need to create a separate style with one style attribute:
   1. Right-click the style group node and select Create Style.
   2. Click the new style node and change the Name and Caption attributes to help the person configuring content areas to select the correct color.
   3. Right-click the style node in the explorer and select Create Style Attribute.
   4. Click the style attribute node and set the attributes:
      • Name: Change the name to a meaningful name for display in the style selector in Alfabet Expand.
      • Caption: Change the caption to a meaningful caption for display in the Alfabet user interface in the views to edit the coloring for a new custom theme.
      • Description: Change the caption to a meaningful caption for display in the Alfabet user interface in the views to edit the coloring for a new custom theme.
      • Type: Select Color.
      • Default Value: Select a color from the color picker.

        color picker

        Click in the attribute value field. A button for opening the color picker appears on the right of the field. Click the button. The color picker has three tabs for different ways of color selection. Click a color field in one of the tabs to select it.

5. Go to the Presentation tab.
6. Expand the Content Areas node and expand the nodes of the content area and the content page the content item is assigned to.
7. Click the node of the content item and set the following attributes:
   • Item preview image: Open the editor. , select the SVG icon gallery and select the icon from the list of icons.

     Open an editor for an attribute

     Click in the attribute value field. A button for opening the editor appears on the right of the field.

   • Item preview image color Style Group: Select the style group containing the color definition.
   • / Item preview image color Style: Select the style defining the color the image should have as defaut color if not otherwise specified in a color theme.