Annotations

Attribution

Description

Annotate attribution of page contents or artifacts.

Design

Attribution: Source

 

Template

GitHub Gist

annotate01.html

 

Information

Description

Annotate product comments on content.

Design

Informative Comments

 

Template

GitHub Gist

annotate02.html

 

Author

Description

Annotate author’s comments on content.

Design

Author’s Comments

 

Template

GitHub Gist

annotate03.html

 

Favorite

Description

Annotate and rate favorite.

Design

          

 

Template

GitHub Gist

annotate04.html

 

Read more

Description

Annotate read more.

Design

Read more …

 

Template

GitHub Gist

annotate05.html

 

Screenshot

Description

Annotate screenshot.

Design

Screenshot comments

 

Template

GitHub Gist

annotate06.html

 

Image

Description

Annotate image.

Design

Image comments

 

Template

GitHub Gist

annotate07.html

 

Warning

Description

Annotate warning.

Design

Warning comments

 

Template

GitHub Gist

annotate08.html

 

Help

Description

Annotate help.

Design

Help comments

 

Template

GitHub Gist

annotate09.html

 

Skill

Description

Annotate skill level.

Design

          

 

Template

GitHub Gist

annotate10.html

 

 Installation

  • Highlight the desired template code
  • Copy to clipboard
  • Navigate to where the annotation will be applied
  • Click the embed ( save_alt ) button
  • Paste clipboard content into the text box
  • Click the “OK” button
  • Update and style as desired

 

The lack of css classes is intentional. Using inline styles permits a high level of customization. In the case of the favorites and skill level annotations, the “stars” and the “caps” are glyphs which can be styled by highlighting and applying a different color.