The Infradox system can be customised by adding CSS – this article lists a number of simple CSS tricks that you can use. The article focuses on questions that we frequently get. It is recommended to first check if there’s a setting in Site configuration that will achieve the result that you want. Using settings is always preferred.
Several preferred settings are available in Site configuration to let you hide or change the appearance of thumbnail buttons. E.g. you can remove the Preview button from the thumbnails via Site configuration, Thumbnail pages, General settings. This is preferred to changing the CSS because this option removes the button from the HTML which results in faster page parsing. You’ll find several other settings in this section, e.g. how to add a “comping image” button, a “direct download” button et cetera.
Note that you can hide the “order” and “download” buttons on thumbnail pages for files that are blocked (or otherwise unavailable) with a setting in Site configuration, Metadata & Rights display, General settings.
If you want to make changes for which there are no Site configuration settings, then you can use custom CSS.
To hide a button, e.g. if you don’t want the lightbox buttons to appear, simply add:
To change the icon used for a button (if you are using Font Awesome), change the content property of the a element. For example, to change the lightbox icon to a “plus” icon:
To change the color and the size of the buttons:
To change the color of the buttons, when hovering over the buttons:
If you want to change the order in which the buttons appear underneath the thumbnails, then first add the following CSS for the ul that contains the buttons:
and then specify the order for each element as follows:
Thumbnail page classes
Every thumbnail page adds several CSS classes to the container of the thumbnails. For example, the search results page has the container #pagethumbnails. This container has classes based on several website settings, the active user’s settings and the user’s permissions.