Changing Lightbox Font

Hi, the tutorial you’re looking for is in the “Related” section of the link you provided:

Theme Overview — Learn more about registering and using custom themes in SLB.

All theme-related tutorials are also listed on SLB’s Themes Documentation.

Thank you. Unfortunately, I feel like I need a tutorial for the tutorial! (Which I am sure is me being dim, not a comment on the quality of your work at all…)

Sure, let me know where in the tutorial you’re encountering an issue, and I’ll see if I can clarify things further.

Thanks, I really appreciate that.

Adding a custom theme for Simple Lightbox is really straightforward:

function slb_theme_example_init($themes) {
    $themes->add($id, $properties);
}

$themes — SLB’s theme manager
$id (string) — The theme’s unique ID
$properties (array) — The theme’s properties

Where exactly do I put this piece of code? Do I replace those values (ie. ‘slb_theme_example’) with the names I want to use?

• This reply was modified 3 years, 11 months ago by Kit Marsden.

Where exactly do I put this piece of code?

The block of code you are referencing is already in the downloadable sample lightbox theme linked to in the “Follow Along” section at the top of the tutorial. The code does not need to be put anywhere else as long as you follow the steps in the tutorial.

Do I replace those values (ie. ‘slb_theme_example’) with the names I want to use?

Yes, generally speaking. All properties are described in the “Theme Properties” section just below the code you referenced. For example, slb_theme_example is the sample theme’s ID, which is described in that section as:

A theme’s ID must be unique so use something that is not likely to be used by another theme.

So you would want to set it to something unique for your theme.

An approach that may be helpful is to install and activate the sample theme as is, refreshing the page after each change you make by following the tutorial to see how the changes are applied.

Please let me know if you have any other questions.

Sorry, coming back to this after a few weeks because I have had some issues at home which have taken priority… Thanks for taking the time to help me.

An approach that may be helpful is to install and activate the sample theme as is, refreshing the page after each change you make by following the tutorial to see how the changes are applied.

OK, sure; that makes sense. But how do I install and activate a theme?! (Dumb question, but I really am struggling with this!) There are three folder under ‘Themes’ if I look into the plugin via an FTP client – ‘Baseline’, ‘Black’ and ‘Default’ – however when I go to select a theme in WordPress, only ‘Default (Light)’ and ‘Default (Dark)’ are available to me. So ‘Baseline’ and ‘Black’ are not activated? How would I go about activating them (and the sample custom theme)?

• This reply was modified 3 years, 10 months ago by Kit Marsden.

Hi, as noted at the start of the Theme Overview tutorial, the sample theme is installed as a WordPress plugin. Download the zip file of the example theme and follow the instructions on installing a plugin from WordPress’ documentation.

Once the sample theme is installed and activated, it will be available in the list of themes in SLB’s settings. Set is as the active lightbox theme and go through the tutorial, making changes as instructed.

Now you can reference the sample theme’s code while going through the tutorial and things should make a lot more sense. Going through the tutorial step-by-step without skipping or skimming over anything is highly recommended, or certain things may not make sense.

As before, let me know if there are any specific issues you encounter with the tutorial, and I’ll see if it can be made clearer.

Note: As noted in the tutorial, the Baseline theme is not displayed in the list of themes because it is a special theme to be used as a starting point by setting is as the parent for a custom lightbox theme. The “black” folder you referred to is the “Default (Dark)” theme. The folder name is not necessarily the theme name.

That’s helpful, thank you!

I have now installed and activated a custom theme, and that is all working… However, I still cannot change the font! I have tried changing the CSS, as here:

#slb_viewer_wrap .slb_theme_slb_baseline .slb_theme_slb_default .slb_theme_manek .slb-container {
	font-family: 'Raleway' !important;
}

but there is no change on the site.

What am I doing wrong?!

Hi, each space in the CSS selector string you provided targets a descendant of the previous selector in the string. So your selector string will be targeting an element in a HTML structure as follows:

#slb_viewer_wrap
    |__.slb_theme_slb_baseline
        |__.slb_theme_slb_default
            |__.slb_theme_manek
                |__.slb-container

The CSS selector does not match the lightbox’s structure, so the CSS is not applied. For example, the CSS selectors slb_theme_slb_default, slb_theme_slb_baseline, and slb_theme_manek are applied to the same element in the lightbox’s HTML, not descendant elements.

Please refer to SLB’s tutorial on customizing lightbox theme styles that you linked to in your first post. It provides full instructions on how to target your specific theme in CSS.

Also, if you are unfamiliar with CSS, here are some tutorials to help you get started:

• MDN: CSS selectors reference
• Beginner Concepts: How CSS Selectors Work | CSS-Tricks
• Child and Sibling?Selectors | CSS-Tricks