Tridi v2 — CSS Styling

Looking for older version? Read Tridi v1 documentation or how to upgrade to version 2.x

Tridi provides minimum CSS stylesheet specified in tridi.css which can serve as a starting point for your customizations.

Additionally, Tridi generates CSS classes which can be used to target specific elements inside a viewer container.

State-specific CSS classes

Each Tridi container uses the following set of CSS classes denoting certain configuration options:

  • .tridi-draggable-{true|false} - derived from draggable option
  • .tridi-touch-{true|false} - derived from touch option
  • .tridi-mousewheel-{true|false} - derived from mousewheel option
  • .tridi-hintOnStartup-{true|false} - derived from hintOnStartup option
  • .tridi-lazy-{true|false} - derived from lazy option

User interaction CSS classes

  • .tridi-hovered - added to .tridi-viewer when user hovers over Tridi container

General CSS classes

These classes are present in all Tridi containers. Therefore it is not advisable to use them for styling if more Tridi instances are present on the same page. Multiple Tridi instance can be targeted with container-specific CSS classes.

  • .tridi-viewer — main Tridi container
  • .tridi-viewer-image — main Tridi image
  • .tridi-stash — stash of preloaded images, hidden by default
  • .tridi-image.tridi-image-{number} — single image in a stash. Number is derived from index of the image in source array, starting with 1
  • .tridi-loadingLoading overlay
  • .tridi-spinnerLoading spinner
  • .tridi-hint-overlayhint overlay
  • .tridi-hinthint element
  • .tridi-hint-texthint text

Container-specific CSS classes

The following CSS classes can be used to target specific Tridi instances if more than one is present in the same page.

Names are based on ID or class of HTML element passed as element option. For example, if element has ID #example, generated CSS classes will use example: .tridi-example-viewer, .tridi-example-loading etc.

  • .tridi-{element}-viewer — main Tridi container
  • .tridi-{element}-viewer-image — main Tridi image
  • .tridi-{element}-loadingLoading overlay
  • .tridi-{element}-spinnerLoading spinner
  • .tridi-{element}-hint-overlayhint overlay
  • .tridi-{element}-hinthint element
  • .tridi-{element}-hint-texthint text

Additional elements in Tridi container

While not advisable, it is possible to put custom HTML elements (e.g. navigation buttons) inside a Tridi container. Tridi is self-sufficient and ignorant of its surroundings. It does not and will never interfere with any DOM elements it didn't generate itself.

« Back to main page