The style and layout is extremely customizable. Use the following classes in the CSS class string to determine the layout you require. Default styles do not need to be declared, but are listed here for reference.
A layout is an arrangement of recommendations in a module. Where applicable, the suffixed number indicates the quantity of recommendations that will be displayed. Choose one layout only.
- Row:
bib--row-1,bib--row-2,bib--row-3,bib--row-4 - Carousel:
bib--car-6 - Column:
bib--col-2,bib--col-3,bib--col-4,bib--col-5,bib--col-6 - Showcased Box:
bib--box-3,bib--box-5,bib--box-6 - Grid:
bib--grd-4,bib--grd-6,bib--grd-6v - Text-only:
bib--txt-1,bib--txt-3,bib--txt-6 - Next Article:
bib--nxt-title,bib--nxt-thumb,bib--nxt-overlay,bib--nxt-label,bib--nxt-side
Choose one font family to change the headline font of all recommendations in a module. By default, the module uses the font assigned to the containing element in your page. If you have a particular font that is neither assigned to the containing element within which you've placed the module or is one of the common system fonts listed below, you can declare it in your own CSS. For legibility, all other text in the recommendation is set to Arial. This can also be overridden within your own CSS.
- Inherit page's own font:
bib--font-inherit(default) - Arial:
bib--font-arial - Arial Black:
bib--font-arialblack - Comic Sans:
bib--font-comic - Courier New:
bib--font-courier - Georgia:
bib--font-georgia - Palatino Linotype:
bib--font-palatino - Tahoma:
bib--font-tahoma - Times New Roman:
bib--font-times - Trebuchet MS:
bib--font-trebuchet - Verdana:
bib--font-verdana
Choose one headline text size only.
- 14px:
bib--size-14 - 16px:
bib--size-16 - 18px:
bib--size-18(default) - 20px:
bib--size-20 - 22px:
bib--size-22
You can hide a module from view for testing purposes. Be aware that despite the module not being visible, it will still call the Bibblio API, which could impact your recommendation call allowance and metrics. To avoid this you can use the Hide Add-on instead.
- Hide module:
bib--hide
Choose a combination of these classes to display and reveal information when a pointer hovers over a recommendation. (These do not apply to Text-only or Next Article layouts.)
- Show title and properties (default)
- Show image only, hover for title:
bib--image-only - Show image only, hover for title and properties:
bib--image-only bib--title-only - Show image only, hover for title, properties and preview:
bib--image-only bib--hover - Show title, hover for properties:
bib--title-only - Show title, hover for properties and preview:
bib--title-only bib--hover - Show title and properties, hover for preview:
bib--hover
By default, images are cropped to their center to fit within a chosen tile ratio. All images can be set so that they are cropped to their top or bottom instead. (Nb. The image file itself is not cropped and resaved - it is only its appearance within the tile that gives the effect of being cropped.)
- Crop from the top:
bib--image-top - Crop to the middle:
bib--image-middle(default) - Crop from the bottom:
bib--image-bottom
Set an effect if a pointer hovers over a tile image. Choose one effect only.
- Shine effect:
bib--shine - Spectrum effect:
bib--spectrum
Choose one invert text setting only.
- Automatically invert the text color if the user's OS is set to dark mode and the website is designed to switch to this mode:
bib--mode-dark - Manually invert the text color for darker webpage designs:
bib--invert
Choose one or more these content recommendation properties to display.
- Show author:
bib--author-show - Show date published:
bib--recency-show - Show domain name:
bib--site-show
You can display up to five custom properties on your recommendations. (These custom properties are defined using the customFields property when importing your content items via the Bibblio API.)
Each custom property's name and value can be displayed separately. E.g. A content item's custom property 1 has the name "Genre" and the value "Drama". When both bib--custom1-name-show and bib--custom1-value-show style classes are used, "Genre Drama" is displayed when that item is recommended. When only the bib--custom1-value-show style class is used, only "Drama" is displayed.
- Show custom property 1 - name:
bib--custom1-name-show - Show custom property 1 - value:
bib--custom1-value-show - Show custom property 2 - name:
bib--custom2-name-show - Show custom property 2 - value:
bib--custom2-value-show - Show custom property 3 - name:
bib--custom3-name-show - Show custom property 3 - value:
bib--custom3-value-show - Show custom property 4 - name:
bib--custom4-name-show - Show custom property 4 - value:
bib--custom4-value-show - Show custom property 5 - name:
bib--custom5-name-show - Show custom property 5 - value:
bib--custom5-value-show
The majority of layouts use a tile arrangement, wherein each tile contains a recommendation. The ratio of all tiles in a module can be set with the following. If a tile has an image, this image will be cropped within the bib__image HTML element to the desired ratio. Choose one ratio only.
- Standard (4:3):
bib--4by3(default) - Widescreen (16:9):
bib--wide - Square (1:1):
bib--square - Tall (2:3):
bib--tall
The following classes align all tile text horizontally. Choose one horizontal alignment only.
- Left:
bib--text-left(default) - Center:
bib--text-center - Right:
bib--text-right - Justify:
bib--text-justify
When using a tile arrangement where the image is displayed to the left or right side of the text, use the following classes to align all tile text vertically in relation to the image. Choose one vertical alignment only.
- Top:
bib--text-top(default) - Middle:
bib--text-middle - Bottom:
bib--text-bottom
By default, all tiled layouts display the recommendation text overlaid upon a background image (or fallback gray background). Alternatively, the image can be separated from the text overlay, and displayed above or to the side of its corresponding information.
- Image above:
bib--split - Image to the left:
bib--split-left - Image to the right:
bib--split-right