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.