Some css “recipes” for your Backlight site

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

Note: these are valid through Backlight version 1.1.1. I’ll update as needed.

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


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

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: these are valid through Backlight version 1.1.1. I’ll update as needed.)

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

ul.metadata li {
font-size: 1.25em;
font-family: 'your font', arial, 'sans serif';
color: #FF0000;
}

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)

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

.pswp__caption .pswp__caption__center {
font-size: 1.25em;
font-family: 'your font', arial, 'sans serif';
color: #FF0000;
}

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

.single_image figcaption {
font-size: 1.25em;
font-family: 'your font', arial, 'sans serif';
color: #FF0000;
}

 

4 thoughts on “Some css “recipes” for your Backlight site”

  1. Hi Rod

    I think your css tips are absolutely great, subtle & very effective!!
    I have put them into effect on my new backlight site.

    Do you know how to get drop down menu’s in backlight?
    I can’t seem to find any info

    Regards

    Michael Regan

    1. Drop down menus are built into Backlight. It’s all controlled in the Menu Sets designer. For Album Sets, choose a descendant level.
      For normal pages, just click on the Add button

  2. I tried the
    .single_image figcaption {
    font-size: 1.25em;
    font-family: 'Roboto', arial, 'sans serif';
    color: #FF0000;
    }

    to center the caption of a large single-image display (in Theater module) but it’s not working. What did I forget to do?

    1. That css is for large images in the Singe Image HTML presentation for regular albums. And there is no declaration in that rule for centering anyway.
      try
      figcaption {
      text-align: center;
      }

      That may affect other albums. If it does, try this:

      figure.prevent_fouc figcaption {
      text-align: center;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *

About this site

This site is: a repository of time-savers and best practices from a user's perspective, picked up from several years of using TTG plugins.
This site is not: a support site.
Read more here.

Tip Jar

If this site has saved you some time, kept your hair attached, or otherwise prevented you from tossing the mouse through the monitor, feel free to donate.

Categories


Highly recommended. This is my go-to Lightroom book. Click on the book image. (affiliate link)

Affiliate link!

Current TTG versions

Backlight Versions

Backlight 1.2.1
Pages module 1.2.1
Cart Add-on 4.1.1
Client Response Add-on 7.1.1
Theater Add-on 1.2.1
WordPress Add-on 1.2.1

CE4 Versions

TTG-BE: 2.0.5a
Autoindex: 7.0.8
Cart: 3.1.4a
CRG: 6.1.3a
Gallery: 6.1.9
Pages: 7.0.15
Publisher: 2.3.3
Stage: 6.1.6
Theme for WordPress: 3.1.2

Subscribe to new posts