Custom CSS in Backlight

(updated for Backlight 4)

In CE4 and previous TTG products, custom css needed to be implemented through phplugins. That is a thing of the past.

In Backlight, custom css is enabled on a per template basis. Go to Designer > Templates > Page Templates. Click on Design next to your page template and scroll down to Advanced Setup.

Inside Advanced Setup you’ll see where to enable custom css and choose the file you want to use.

There is a demo custom css file (stylesheet-sample.css) included with Backlight. In your FTP program, go to /backlight/modules/custom-resources/css/.  This demo css file will turn your page body background to red. Move it to the /backlight/custom/css/ folder. Or download it to your computer and then upload it to the proper folder. You can use it to make sure custom css is working properly. You can then add to it if you like.

But my suggestion is to create your own custom css file that contains your own customization. In a plain text editor, create a file and name it custom.css or whatever you want. Add any custom css to this file and upload it to your /backlight/custom/css/ folder.

Once you do, this new file will be available to use in any of your templates.

5 thoughts on “Custom CSS in Backlight”

  1. I have done this and added the css examples that you wrote but only the tip of centering the footer text works for me.
    When I added

    img.pswp__img {
    border: 1px solid #A39994;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4)
    }

    For example nothing changed 🙁

    Any ideas why?

    1. no idea without seeing the site. Can you post a link? The ttg forum would be the best place to post it.

    2. Actually, there should be a semi-colon after the box-shadow property

      img.pswp__img {
      border: 1px solid #A39994;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
      }

  2. Rod,
    I very much appreciate the guidance your site provides. Particularly as a newbie to css, your examples have been enormously helpful.
    I am wondering if there is a tool that I’ll call a css navigator for a lack of a better name that shows css source files and locations in a tree structure, or the obverse, for an element shows where it is referenced?

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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.

Subscribe to new posts

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  4 & 5

See the Backlight Modules page on your site for latest Backlight and module versions and changelogs.

You’ll also find the latest version number and download link for the Lightroom Publisher plugin.
(BL 3 and later)

 

Backlight 1 Versions

Backlight 1.2.4
Pages module 1.2.4
Cart Add-on 4.1.7
Client Response Add-on 7.1.3
Theater Add-on 1.2.6
Galleria Add-on 1.0.0
WordPress Add-on 1.2.6
Publisher 3.2.3

Backlight 1 has seen its end of life. See this post.

CE4 Versions

note: CE4 is no longer being developed or sold. See this post.

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