CSS classes used in templates

If you are building a website then you might want to use the standard dialogs, overlays, authentication and other parts of Zotonic. To make those look like your own design it is useful to know which classnames are used. This is a short overview of most of the classes used in these standard components.

Button classes:

  •     .btn

Optional for sizing buttons:

  •     .btn-sm


  •     .list-unstyled


  •     .text-muted


  •     .alert


  •     .dialog


  •     .modal-overlay
        .overlay-open  (added to the body element)


  •     .pull-left


  •     .form
  •     .label-floating (Used to position control label for)

Form validation (LiveValidation.js):

  •     .z_form_valid (element to show when form valid)
        .z_form_invalid (element to show when form invalid)
  •     .z_invalid (on validation message)
        .z_validation.help-block (on validation message)
  •     .valid (on field)
        .invalid (on field)
        .validating (on field when async validation is in progress)
  •     .form-group (element grouping the validated input element)
        .has-error (on form group)
        .has-validated  (on form group)

Busy indicator for elements (mostly forms when waiting for response):

  •     .masked
        .loadmask (div positioned over the masked element)
        .masked-relative (added to static positioned masked elements)

Growl messages:

  •     .notice-wrap

HTML element classes:

  •     .environment-...  (development, production, acceptance etc.)
  •     .ui-state-auth-anonymous
  •     .ui-state-bridge-disconnected

For the MQTT bridge status template (_bridge_warning.tpl):

  •     .z-bridge-warning