TTG Tips and Tricks

Here are just a few css tweaks you can use for your Backlight site. Just add to your custom css file.

Note: Originally written for Backlight 1.1, some of the below have been updated for Backlight 1.2 and have been noted as such.

Image border and shadows
Center footer text
Add borders around thumbnails
Center caption text under large Photoswipe images
Style metadata in thumbnails and large images

Image border and shadows

I like using inline images next to text in the copy area. I also prefer these images to have a black border and a bit of drop shadow.
Here’s a css rule that adds a border and shadow to any image in the main column or the sidebars:

.widget img, .the__copy img {
	border: 1px solid black;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

Adjust the border or box-shadow to your liking.

To learn about borders: http://www.w3schools.com/css/css_border.asp
To learn about box-shadows: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Center the footer text

This is a really easy thing to do with css.

.copyright p{
	text-align: center;
}

Add borders around thumbnails

Here’s some css to add borders around thumbnails in albums and album sets in Backlight 1 only.

This one adds a border to album thumbnails in albums using the classic thumbnail layout.
If using the Masonry layout (and not using the classic layout anywhere on your site), then use the border settings for the cell in the Designer.
If you have a mix of classic and masonry albums, you can still use this, just make sure that in your Masonry template that 1) you’re not using a cell border and 2) you’re not using a border radius on the cells.

/*Adds border around thumbnails in albums using classic thumbnail presentation
=======================================================*/

.pswp_go {
	border: 1px solid black;
}

This css will add a border around the thumbnail in Descriptive Album Sets.

/*Add border around album set images in descriptive album set
========================================================*/

.album-thumbnail img {
    border: 1px solid black;
    box-sizing: border-box;
}

I’ve not tested these with all possible layout options, but they seem to work with the caveat about masonry thumbs in albums.

Center caption text under large Photoswipe images

This selector can also be used to control fonts

/*Center caption under large image
================================================*/
.pswp__caption__center {
	text-align: center;
        font-size: 1.2em;
}

Style metadata in thumbnails and large images

Note: Includes Backlight 1.2 (Pangolin) updates.

Thumbnails

To control the fonts in thumbnail captions, use the selector: ul.metadata li

Valid for Backlight 1.1 and 1.2 (Pangolin)

Further, you can style the two lines separately using child psuedo selectors. Use :first-child for the top line and :nth-child(2) for the bottom line. The full selector for the top line is: ul.metadata li:first-child and the full selector for the bottom line is: ul.metadata li:nth-child(2)

Large images

For large image captions when using the Photoswipe presentation, use the selector: .pswp__caption .pswp__caption__center

Valid for Backlight 1.1 (Okapi)

For Backlight 1.2 (Pangolin), use this selector for the slide show presentation:
.fancybox-caption-collapsible .fancybox-caption.

And for Single-image HTML pages us the selector: .single_image figcaption

This is valid for both Backlight 1.1 (Okapi) and Backlight 1.2 (Panolin)