Flag CSS

A flag link consists of a bit more than HTML's {A} tag. It consists of a wrapper SPAN and of yet another SPAN --initially hidden-- that contains a message to be shown after a flagging or unflagging operation is carried out.

All HTML elements have CSS class names attached to them. The amount of classes might seem staggering at first, but there is an order to them, and eventually they allow you a great flexibility at theming your links.

Let's start by introducing a "map" of a flag link:

<span class="flag-wrapper flag-/flagname/">

  <a href="http:..." class="flag {flag|unflag}-action [flagged|unflagged]">
    Flag this!
  </a>

  <span class="flag-message flag-{flagged|unflagged}-message">
    Thank you for flagging this!
  </span>

</span>

Incidentally, this complete code is generated by a template. While it's indeed possible to theme a link by changing the template, as is explained in the next section, this section deals with theming by CSS only.

---

If you need to customize the javascript "message" that shows up when you flag or unflag something, the class is: .flag-message which the default values can be found in

/sites/all/modules/flag/theme/flag.css

[TODO: continue explanation about our CSS.]