Website customising: CSS tricks

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.

Thumbnail buttons

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:

.searchlinks .lightbox {
display: none;
}

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:

.previewtools.buttons li a.lightbox::before {
content: "\f0fe";
}

To change the color and the size of the buttons:

.previewtools.buttons li a::before {
color:red;
font-size:1.50em;
}

To change the color of the buttons, when hovering over the buttons:

.previewtools.buttons li a:hover::before {
color:black;
}

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:

.searchlinks .buttons {
display: flex;
flex-direction: row;
}

and then specify the order for each element as follows:

.searchlinks .buttons li.comp {
order: 1;
}
.searchlinks .buttons li.preview {
order: 2;
}
.searchlinks .buttons li.order {
order: 3;
}
.searchlinks .buttons li.lightbox {
order: 4;
}

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.
For example:

<div id="pagethumbnails" class="layout3 so0 showbuttons nohovering hover0 nocomps fnotes hideref rht2 rls2 rst2 rtt2 rtb1 blo0 hob0 ors0 cap1 ddl2 uddp1 um0 um2 msize1">

Below is a list of what these classes are used for. You can use these classes to manipulate pages with custom CSS.

• layout3 – the number indicates the currently active view style (0..4) – e.g. small, grid, large etc
• so0 – the number indicates the setting for the number of items per page (0 being the first setting in Site configuration)
• showbuttons – if this class exists then the thumbnail buttons are visible always
• nohovering – this class means that thumbnail hovering is off
• hover0
• nocomps – this class indicates that there are no comping images buttons
• fnotes – if this class exists, then there are buttons for file notes on lightbox pages
• hideref – if this class exists, then the reference numbers are not showing on the thumbnail pages
• rht2 – setting for rights (RM/RF) indicators/info, 0=nowhere, 1=thumbnail,preview,order pages, 2=preview,order pages, 3=order pages
• rls2 – setting for release (Model/Property release) indicators/info, 0=nowhere, 1=thumbnail,preview,order pages, 2=preview,order pages, 3=order pages
• rst2 – setting for restriction indicators/info, 0=nowhere, 1=thumbnail,preview,order pages, 2=preview,order pages, 3=order pages
• rtt2 – setting for territory restriction indicators/info, 0=nowhere, 1=thumbnail,preview,order pages, 2=preview,order pages, 3=order pages
• rtb1 – setting re how to handle territory restrictions, 0=nothing, 1=block add to order, 2=allow add to order but block download
• blo0 – setting re how to handle blocked files, 0=no add to order if blocked, 1=can add to order if blocked
• hob0 – 0=hide order/download button if blocked/unvailable, 1=show buttons (whether or not the buttons is visible doesn’t affect its behaviour when clicked)
• ors0 – order function setting, 0=enabled, 1=admins only, 2=disabled
• cap1 – 1=show caption always, 0=normal display settings
• ddl2 – 0=no direct download buttons on thumbnail pages, 1=show direct download buttons, 2=show direct download and hide normal add to order button
• uddp1 – 1=user has direct download permissions
• um0 .. um5 – indicates the media/file types for which the user has permissions (0=images and so on)
• msize1 – current thumbnail size (depending on settings and active layout), can be tsize0, tsize1, msize0, msize1

Thumbnail box classes

Each thumbnail box gets a number of classes too. The classes indicate Site configuration settings, but also classes regarding availability, file type and so on. So the classes may vary for each thumbnail on a page. For example:

<div class="gridModeBox large tfbox outerthumbbox na api0 img0 mt2 bo1 tb1 rf0 mr0 pr0 supp28 boxrm dyn0" id="slot_1">

• gridModeBox
• large – has this class if the large thumbnail layout is active (can
• tfbox – this class exists always
• outerthumbbox – this class exists always
• na – na=file is available, na1=file is not available
• api0
• img0 – im0=file is not of type image, im1=file is of type image
• mt2 – media type (0=image,1=video,2=audio,3=pdf,4=document,5=auxiliary)
• bo1 – bo1=add to order is blocked
• tb1 – tb1=file is blocked in the user’s territory
• rf0 – rf1=royalty free, rf0=rights managed file
• mr0 – mr0=file is not model released, mr1=model released
• pr0 – pr0=file is not property released, mr1=property released
• supp28 – this class is always ‘supp’ followed by the supplier’s id
• boxrm – for backward compatibility, boxrm=rights managed, boxrf=royalty free
• dyn0 – dynamic loading of this thumbnail 0=off,1=on
• nospin – if this class exists, then the spinner image is disabled (for dynamic loading)

Displaying random images on a custom page

To display images that you have uploaded using the File Manager in a custom page, add the “listimages” tag, e.g.

<div class="imagecontainer"></div>

This will simply generate html img tags for all the jpg images in the specified folder. Change the “usedivs” parameter to 1 to generate HTML with the images inside divs that you can then style with CSS. Example output:

<div class="imagedivcontainer">
<div class="imagediv"><img decoding="async" src="/siteowner/assets/publishedwork/calendars.jpg" /></div>
</div>

Change the “dynamicloading” property to “1”, to prevent the images from loading immediately. You can use this if you want to e.g. display only a few random images – or if you have many/large files in the folder. The output will look like the below example:

<div class="imagedivcontainer">
<div class="imagediv"><img decoding="async" class="dynamicloading" src="/siteowner/spinners/tspinner.gif" data-src="/siteowner/assets/publishedwork/calendars.jpg" /></div>
</div>

You will then have to add CSS and script to make the images load and visible once the page is complete in the user’s browser. For example:

<script>
$(".imagecontainer .imagedivcontainer:visible").each(function(){
    var img=$(this).find(".dynamicloading").not(".loading,.loaded");
    img.attr("src",img.attr("data-src")).addClass("loading").on("load",function(){
        $(this).addClass("loaded");
    });
});
</script>