Styling Annotated Images

In Heretto CCMS, you can add callouts to the images to annotate them. These callouts can be globally styled according to your branding needs.

Guidelines

  • We recommend inserting images inside <fig> elements. Our styling examples are prepared with respect to that suggestion.

  • Note that you need to use the !important CSS property to overwrite the styling applied in the SVG Editor embedded in Heretto CCMS.

  • Remember that the updated styling is applied in the final output and is visible the Preview mode. Your Heretto PDF Generator publishing scenario customizations do not overwrite the Content Editor styling.

  • Annotation callouts are represented by <path> elements. Modified CSS code will also affect other <path> elements created in the SVG Editor, specifically those created either with the Path or Pencil tool.

Examples

You can apply customizations by pasting the following code snippets under the @import rules.

Styling the annotations border

You can change the default border look of annotations globally by applying a proper CSS code. Then, there is no need to individually change the color of each callout. In the following example, new styling has been applied to the border color and width.

/* Custom annotation border */
 figure svg g path {
    stroke: #545454 !important;
    stroke-width: 2px !important;
 }
An exemplary product image with styled annotations
Styling the annotations fill color

You can change the default white fill color of your annotations.

 /* Custom annotations fill color */
 figure svg g path {
     fill: #fae3d9 !important;
 }
An exemplary product image with styled annotations
Changing the default font styling

You can change the default font properties of the numbers in the annotation callouts.

/* Custom annotation font */
 figure svg g + text {
    fill: #e65f26 !important;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
    font-weight: bold !important;
    font-size: 22px !important;
 }
An exemplary product image with styled annotations
  • Note that in this case, the fill property is responsible for the font color, not the color property.

  • Remember that changing the font size may result in numbers not aligned with the callout. This calls for additional styling with CSS.

  • This styling does not impact text fields introduced with the Text Tool in the editor.

  • If you want to apply these settings only to annotations in a particular figure, see how to apply outputclasses to the figures.

Applying styling to particular images only

You may want to apply different type of styling to different kinds of products instead of imposing the global styling on all images.

  1. Select a figure element with an annotated image.

  2. Go to the Attributes tab in the right pane.

  3. Apply some meaningful value to the outputclass attribute.

  4. Introduce the same value to the provided code in place of the underlined example-class phrase.

    /* Custom annotations styling on specific images */
     figure.example-class svg g path {
        stroke: #545454 !important;
        stroke-width: 2px !important;
        fill: #eee !important;
     }
    The provided code combines a few changes. It modifies the:
    • border color
    • border width
    • fill color
Applying styling to particular annotations only

If there is a specific annotation callout that you want to highlight, you can prepare a global styling for such annotations. This is a much safer option than modifying the individual styling in the editor because it enables you to easily change the appearance of selected annotations globally. Then, you do not need to apply individual styling to the selected annotations in numerous topics.

  1. Annotate your image.

  2. Select the annotation that you want to highlight.

  3. Introduce some meaningful value in the class field.
    A specific class applied to the annotation
  4. Save changes by selecting the Close button.

  5. Introduce the same value in the provided code in place of the underlined main-annotation phrase.

     /* Custom styling on specific annotations */
     figure svg g.main-annotation path {
         stroke: #ff0000 !important;
         stroke-width: 4px !important;
     }
  6. Save your scenario. Styling will be applied only to the annotations with a class specified in the previous steps.

Styling applied only to the annotations with a specific class

You can change the font of a given annotation too:

/* Custom font on specific annotations */
figure svg g.main-annotation + text {
    fill: #ff0000 !important;
    font-weight: bold !important;
}

Remember to change the change the main-annotation phrase to the one that you have specified earlier in the SVG Editor.

Font styling applied only to the annotations with a specific class