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.
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.tridi-hovered
- added to .tridi-viewer
when user hovers over Tridi containerThese 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 textThe 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 textWhile 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.