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
        .btn-primary
        .btn-default
        .btn-danger

Optional for sizing buttons:

  •     .btn-sm
        .btn-xs

Lists:

  •     .list-unstyled

Texts:

  •     .text-muted
        .text-danger
        .rtl
        .ltr

Messages:

  •     .alert
        .alert-warning
        .alert-danger
        .alert-info

Dialogs:

  •     .dialog
        .modal-dialog
        .modal-lg
        .modal-sm
        .modal-header
        .modal-title
        .modal-body
        .modal-content
        .modal-footer
        .close

Overlays:

  •     .modal-overlay
        .modal-overlay-close
        .modal-overlay-level-0..3
        .overlay-open  (added to the body element)

Misc:

  •     .pull-left
        .pull-right

Forms:

  •     .form
        .form-inline
        .form-group
        .form-control
        .form-actions
        .checkbox
        .control-label
        .help-block
  •     .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)
        .loadmask-progress
        .loadmask-msg
        .masked-relative (added to static positioned masked elements)

Growl messages:

  •     .notice-wrap
        .notice-item-wrapper
        .notice-item
        .notice-item-close

HTML element classes:

  •     .environment-...  (development, production, acceptance etc.)
  •     .ui-state-auth-anonymous
        .ui-state-auth-user
        .ui-state-auth-authenticating
        .ui-state-auth-error-fetch
        .ui-state-auth-error
  •     .ui-state-bridge-disconnected
        .ui-state-bridge-connected

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

  •     .z-bridge-warning
        .z-bridge-ok

 

Templates Developer Guide Media