You can change the default color and width of annotation callout borders with CSS. As a result, all annotation callouts are styled consistently in the output and there is no need to style them individually in the SVG Editor. Follow this procedure to style callouts and other annotation elements.

1. In the top-left corner, click the Main Menu and go to PDF Generator.
2. In the PDF Generator scenarios screen, click the publishing scenario you want to edit.
3. In the CSS tab, add this code:

   /* Custom annotation border */
    figure svg g path {
       stroke: #545454 !important;
       stroke-width: 2px !important;
    }

4. Click Save Scenario.

The annotation callout border is gray and its width is two pixels. You can modify the code to match your branding needs.

You can change the default white background color of your annotation callouts with CSS. Follow this procedure to style callouts and other annotation elements.

1. In the top-left corner, click the Main Menu and go to PDF Generator.
2. In the PDF Generator scenarios list, click the publishing scenario you want to edit.
3. In the CSS tab, add the following code:

   /* Custom annotations fill color */
    figure svg g path {
        fill: #fae3d9 !important;
    }

4. Click Save Scenario.

The background color of the annotation callout is light orange. You can modify the code to match your branding needs.

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

1. In the top-left corner, click the Main Menu and go to PDF Generator.
2. In the PDF Generator scenarios list, click the publishing scenario you want to edit.
3. In the CSS tab, add the following code:

   /* 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;
    }

4. Click Save Scenario.

Annotations callouts are now in red and in bold. You can modify the code to match your branding needs.

• 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.

Instead of imposing global styling on all annotated images, you may want to apply different styling to different groups of annotated images.

1. In the Content Editor, open a topic with an annotated image you want to style.
2. Click the Attributes tab in the right pane and from the Element drop-down menu, select Figure.
3. Apply a meaningful value to the outputclass attribute.

   You will need the outputclass attribute value for your CSS.

4. In the top-left corner, click the Main Menu and go to PDF Generator.
5. In the PDF Generator scenarios list, click the publishing scenario you want to edit.
6. In the CSS tab, paste this code and replace example-class with the outputclass attribute value you added to the figure.

   /* Custom annotations styling on specific images */
    figure.example-class svg g path {
       stroke: #545454 !important;
       stroke-width: 2px !important;
       fill: #eee !important;
    }

   This code combines a few changes. It modifies the:

   • border color
   • border width
   • background color
7. Click Save Scenario.

1. In the Content Editor, open a topic with an annotated image you want to style.
2. Click the image, then click Annotate Image.
3. In the Annotations interface, select the specific annotation that you want to highlight.
4. In the class field, add a meaningful class attribute value.

   You will need the class attribute value for your CSS.

5. Save changes and by clicking Close.

6. In the top-left corner, click the Main Menu and go to PDF Generator.
7. In the PDF Generator scenarios list, click the publishing scenario you want to edit.
8. In the CSS tab, paste this code and replace main-annotation with the class attribute value you added to the annotation element.

   /* Custom styling on specific annotations */
    figure svg g.main-annotation path {
        stroke: #ff0000 !important;
        stroke-width: 4px !important;
    }

9. Click Save Scenario.

Annotation elements with the defined class attribute value are styled according to the CSS code. You can modify the code to match your branding needs.

1. In the top-left corner, click the Main Menu and go to PDF Generator.
2. In the PDF Generator scenarios list, click the publishing scenario you want to edit.
3. In the CSS tab, add styling to .image, svg.

   /* Add image borders to image elements. */
   .image,
   svg {
       border: 5px solid #000;
   }