Simple Lightbox: Customizing Theme Styles
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>
Pro Tip: Use Sass
While you could use plain CSS to style a theme, using a CSS preprocessor such as Sass is highly recommended as it is much more efficient at styling the lightbox as you will soon see.
All code examples in this tutorial use Sass. Sass looks a lot like CSS though, so it shouldn’t be too hard to follow along even if you’re not familiar with it. There’s a link at the end of this post with more information if you want to learn more about Sass.
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.