Tridi — CSS Styling

In a default configuraiton. Tridi does not require CSS styles to work correctly. Examples in the documentation use minimum stylesheet specified in tridi.css. You can use this stylesheet as a starting point for your customizations.

To make styling easier, Tridi generates CSS classes which can be used to target specific container elements generated inside a Tridi container.

State-specific CSS classes

Each Tridi container gets a 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-loading — Loading overlay
  • .tridi-spinner — Loading spinner
  • .tridi-hint-overlay — hint overlay
  • .tridi-hint — hint element
  • .tridi-hint-text — hint 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}-loading — Loading overlay
  • .tridi-{element}-spinner — Loading spinner
  • .tridi-{element}-hint-overlay — hint overlay
  • .tridi-{element}-hint — hint element
  • .tridi-{element}-hint-text — hint 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