Customizing Visual Appearance

Need a different look and feel? Customizing the visual appearance of Annotorious is easy. All elements of the annotation layer and the editor popup can be styled with CSS.

Customizing Shape Styles

Annotorious renders annotations using SVG. You can completely alter the visual appearance of every graphical element via CSS.

To make styling more flexible, Annotorious adds a few extras:

Custom Style Example

A custom annotation layer style

This example applies custom CSS rules to enable the dim mask and give different appearance to the annotation outlines.

/** Hides the outer shapes - for this style we only need one **/
svg.a9s-annotationlayer .a9s-selection .a9s-outer, 
svg.a9s-annotationlayer .a9s-annotation .a9s-outer {

svg.a9s-annotationlayer .a9s-handle .a9s-handle-outer {

/** New style for the annotation outlines **/
svg.a9s-annotationlayer .a9s-selection .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation .a9s-inner  {

/** Disable the hover effect from the default stylesheet **/
svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner {

/** Corner handles **/
svg.a9s-annotationlayer .a9s-handle .a9s-handle-inner {

/** Enable the dim mask, black with 60% transparency **/
svg.a9s-annotationlayer .a9s-selection-mask {
  fill:rgba(0, 0, 0, 0.6);

Customizing the Editor Popup Style

The editor has the following markup structure and CSS classes:

<div class="r6o-editor">
  <div class="r6o-arrow"></div> <!-- renders the up- or downwards arrow -->
  <div class="r6o-editor-inner">
    <!-- a list of editor widgets, each contained in a DIV -->
    <div class="r6o-widget">
      <!-- ... -->

    <div class="r6o-footer">
      <button class="r6o-btn left delete-annotation">
        <!-- Trashcan icon -->
      <button class="r6o-btn outline">Cancel</button>
      <button class="r6o-btn ">Ok</button>