Simple Lightbox’s theme engine is incredibly robust, but it is not complex. You can completely change the appearance of a lightbox as easily as making a web page using HTML and CSS.

Just like making a web page, a theme’s layout (HTML) defines the structure and the stylesheet (CSS) controls the appearance of the lightbox in the browser.

After this short tutorial, you will be able to fully customize a lightbox’s appearance with your own custom theme.

Sample Layout

This tutorial focuses on styling elements in a lightbox’s layout. As a reference, this is the HTML layout used in SLB’s default themes:

<div class="slb_container">
    <div class="slb_content">
        {{item.content}}
        <div class="slb_nav">
            <span class="slb_prev">
                {{ui.nav_prev}}
            </span>
            <span class="slb_next">
                {{ui.nav_next}}
            </span>
        </div>
        <div class="slb_controls">
            <span class="slb_close">
                {{ui.close}}
            </span>
            <span class="slb_slideshow">
                {{ui.slideshow_control}}
            </span>
        </div>
        <div class="slb_loading">
            {{ui.loading}}
        </div>
    </div>
    <div class="slb_details">
        <div class="inner">
            <div class="slb_data">
                <div class="slb_data_content">
                    <span class="slb_data_title">
                        {{item.title}}
                    </span>
                    <span class="slb_group_status">
                        {{ui.group_status}}
                    </span>
                    <div class="slb_data_desc">
                        {{item.description}}
                    </div>
                </div>
            </div>
            <div class="slb_nav">
                <span class="slb_prev">
                    {{ui.nav_prev}}
                </span>
                <span class="slb_next">
                    {{ui.nav_next}}
                </span>
            </div>
        </div>
    </div>
</div>

Styling the Lightbox

Styling the lightbox is basically the same as styling a web page– you use selectors to target specific elements in the lightbox’s layout and add style rules to customize their appearance.

Targeting Your Theme

As SLB is added to existing pages with their own styles, it is important that your theme’s styles do not adversely affect anything else on the page.

To do this, SLB generates a selector specifically for lightboxes using your custom theme:

.slb_theme_[theme-id]

As you might expect, [theme-id] represents the theme’s ID. For example, the selector for a theme registered with the ID my-theme is:

.slb_theme_my-theme

By preceding all rules in your theme’s stylesheet with its unique selector, you ensure that the theme’s custom styles do not affect anything else on the page.

// Target custom theme
.slb_theme_my-theme {
    // Style links in lightbox
    a {
        border-bottom:none;
        color:#000;
        text-decoration:underline;
    }
}

Increasing Specificity

If a rule requires more specificity (e.g. to override another rule), you can also use the global lightbox selector:

#slb_viewer_wrap

Example

// Target global lightbox selector
#slb_viewer_wrap {
    // Target custom theme
    .slb_theme_my-theme {
        // Style links in lightbox
        a {
            border-bottom:none;
            color:#000;
            text-decoration:underline;
        }
    }
}

Styling Template Tags

Template tags also have special selectors that let you style the tags in a theme with varying levels of precision.

Style All Template Tags

To target all template tags in a theme, use the base template tag selector:

.slb_template_tag

Example

// Target custom theme
.slb_theme_my-theme {
    // Style all template tags
    .slb_template_tag {
        font-weight: bold;
    }
}

Style A Specific Template Tag

You can also style all instances of a specific template tag simply by adding the tag’s name to the base tag selector:

.slb_template_tag_[tag-name]

Here, [tag-name] is the name of a specific template tag (e.g. item, ui, etc.).

Example

This example demonstrates how to style all item template tags in the theme (e.g. {{item.title}}, {{item.description}}, etc.)

// Target custom theme
.slb_theme_my-theme {
    // Style all "item" template tag instances
    .slb_template_tag_item {
        font-weight: bold;
    }
}

Style Template Tags with Specific Properties

You can get even more precise and target only the template tags using a specific property by appending the property to the tag selector:

.slb_template_tag_[tag-name]_[property]

• [tag-name] — Name of specific template tag
• [property] — Specific template tag property

Example

This example demonstrates how to style the {{item.title}} template tag in the theme:

// Target custom theme
.slb_theme_my-theme {
    // Style the "{{item.title}}" template tag
    .slb_template_tag_item_title {
        font-weight: bold;
    }
}

Styling Other Layout Elements

You may have noticed other classes in the reference layout above. You can add classes to elements in your theme’s custom layout to help you target and style those elements.

Example

Say you want to style the slb_details block in the layout:

<div class="slb_details">
<!-- Title, Description, etc. go here -->
</div>

You would simply target the class name and apply your styles:

// Target custom theme
.slb_theme_my-theme {
    // Style "details" element
    .slb_details {
        padding: 1em;
    }
}

Now You’re Stylin’

You now know everything you need to completely customize the appearance of a lightbox in SLB! Too cool.

Now the fun begins! You can create a lightbox theme to perfectly match your site’s theme, or you can even create unique themes that others can add to their own sites.

In any case, please let me know about your theming adventures. I’d love to hear about how you’ve customized Simple Lightbox!

Related

• Simple Lightbox — The awesomest ever lightbox plugin for WordPress!
• Theme Overview — Learn more about registering and using custom themes in SLB.
• Customizing Theme Layouts — Learn how to create a layout for your custom lightbox theme.
• Sass — An awesome CSS preprocessor that does everything you wish CSS could do.