Title: Modifying Example Theme
Last modified: October 25, 2021

---

# Modifying Example Theme

 *  Resolved [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/)
 * Hi there, i’m trying to learn about modifying the SLB layout using a custom theme
   and have been going through your docs. I’ve got a theme setup without issue and
   I’ve made minor modification to the layout.html without issue (i wanted to remove
   the slideshow / play button, and i figured that out without issue).
 * The ui.group_status information is kind of floating in the middle of my lightbox
   caption area and i’m trying to figure out how to actually relocate it, either
   below the caption info and left-justified, or just fully right justified.
 * I’ve tried doing this in my theme’s layout.html, CSS, SASS and i’m not having
   any luck changing it at all – there’s no change in location on my site.
 * I’m wondering if you can give me a pointer on where the right place to change
   the location of the ui elements is
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fmodifying-example-theme%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Author [Archetyped](https://wordpress.org/support/users/archetyped/)
 * (@archetyped)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15005677)
 * If you want the `ui.group_status` tag to come after the description, then the
   first thing to do is position it after that element in the layout’s HTML.
 *     ```
       <div class="slb_data_desc">{{item.description}}</div>
       <span class="slb_group_status">{{ui.group_status}}</span>
       ```
   
 * You can further customize the element’s appearance with CSS:
 *     ```
       #slb_viewer_wrap .slb_theme_{your-theme-id} .slb_group_status {
           display: block;
           text-align: right;
       }
       ```
   
 *  Thread Starter [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15009784)
 * thanks for the reply! i seem to be having some issue with the CSS not working
   properly (the layout.html changes are working fine). eg: font size changes take
   effect, but formatting changes don’t.
 * Here’s the contents of my main.php
 *     ```
       	$properties = array (
       		//Theme name
       		'name'			=> __('Simple Lightbox: Liberty Thermionics', 'slb-lt'),
       		//Parent theme
       		'parent'		=> 'slb_default',
       		//Custom layout file
       		'layout'		=> $base_path . '/layout.html',
       		//Custom scripts - Each script is an array containing the script's properties
       		//Example: array( $handle, $src [, $deps, $ver ] )
       		'scripts'		=> array (
       				array ( 'core', $base_path . '/js/client.js' ),
       		),
       		//Custom styles - Each style is an array containing the style's properties
       		//Example: array( $handle, $src [, $deps, $ver] )
       		'styles'		=> array (
       			array ( 'core', $base_path . '/css/styles.css' ),
       		),
       	);
       ```
   
 * Then the contents of plugins/simple-lightbox-lt/css/styles.css is:
 *     ```
       #slb_viewer_wrap .slb_theme_slb-lt .slb_group_status {
           display: block;
           text-align: right;
       }
       ```
   
 * I’ve tried several other things in the CSS and it doesn’t take effect.
 * I’m going to try troubleshooting it some more this evening. I’ve got a couple
   of other minor things i want to do with the fonts / sizing too but there’s something
   going on with my child theme css i can’t figure out.
 *  Thread Starter [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15009811)
 * I’ve tried a few other examples that you have listed in the custom theme documentation(
   related to css and styling) too with no luck.
 * What seems weird to me is that changes to the layout file (layout.html) are working
   fine, but the CSS doesn’t seem to be working, or is possibly being overridden.
   I’m not sure how to troubleshoot this though.
 *  Thread Starter [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15013221)
 * I don’t know what else to try with regard to debugging this – but it does seem
   that the slb theme css isn’t being processed appropriately, or maybe more likely
   is being overridden by something in my wp theme / child theme.
 * I have been able to apply most of the styling i want just using my wp child theme
   and so i’ll probably just stick with that for now and maybe keep trying to figure
   out the slb theme in the background.
 *  Plugin Author [Archetyped](https://wordpress.org/support/users/archetyped/)
 * (@archetyped)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15013287)
 * Hi, it looks like the styles are not being applied because the selector used 
   in your CSS does not match the theme ID set for your theme.
 * This appears to be partly because you include the `slb_theme_` prefix when registering
   your theme. SLB adds the `slb_theme_` prefix itself when setting class names,
   so this results in a class name of `slb_theme_slb_theme_lt_init` for your theme.
 * **Solution:** Do not include the `slb_theme_` prefix when setting your theme’s
   ID (it’s unnecessary).
 * The other reason is that the CSS selector is using a different theme ID than 
   the one you registered:
    - CSS Selector: `.slb_theme_slb-lt` → Targeted theme ID: `slb-lt`
    - Theme ID: `lt_init` (after prefix removed as noted above).
 * **Solution:** Ensure CSS selector matches theme ID.
 * See the **Targeting Your Theme** section of the [tutorial on customizing lightbox styles](https://archetyped.com/know/slb-theme-styles/)
   for more details.
 *  Thread Starter [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15017232)
 * Thank you, this is helpful but it’s still driving me nutty. Here’s what’s been
   difficult for me to figure out:
    - naming my “custom” theme and how that translates to the correct config in 
      main.php to register it. I think it’s what gets pre-pended and appended to
      the theme name that’s confusing.
    - Following the docs on your site the other pages aren’t using the same name
      as the example theme so it’s hard to follow changes all the way through to
      the CSS using the example theme
    - Having some css examples in the example theme would probably help this, it’s
      just an empty file in the example. The example theme name is straight-forward
      but it’s also very close to some of the other function names.
    - The complete example that you provide of the layout.html file is very helpful,
      something similar for css and js would be great, especially if it ties back
      to the example theme.
    - I’m still working through this is but it’s continuing to confuse me unfortunately.
 *  Thread Starter [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/)
 * (@wholemilklatte)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15023077)
 * I’ve got this sorted out now. I think the naming in the sample theme config was
   confusing to me, specifically the use of dash *and* underscores and the prepended
   slb_theme syntax in the example along with the additional prepend of slb_theme
   in the css that i can’t find mentioned.
 * Thanks for pointing that out.
 * I figured it out just by iterating over a bunch of different combinations until
   i figured it out. I can now track the CSS via inspect, and it makes sense both
   in the styles.css as well as the main.php theme config.
 * EDIT: Now that i understand how it works i see the notes slb_theme being a prefix
   in CSS, the config variables in main.php i think were the thing that got me, 
   and i wasn’t making the connection between that plugin config and how it applied
   to the CSS.
    -  This reply was modified 4 years, 7 months ago by [wholemilklatte](https://wordpress.org/support/users/wholemilklatte/).
 *  Plugin Author [Archetyped](https://wordpress.org/support/users/archetyped/)
 * (@archetyped)
 * [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15034698)
 * Glad to hear you got it figured out! 👍

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Modifying Example Theme’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/simple-lightbox.svg)
 * [Simple Lightbox](https://wordpress.org/plugins/simple-lightbox/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/simple-lightbox/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/simple-lightbox/)
 * [Active Topics](https://wordpress.org/support/plugin/simple-lightbox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/simple-lightbox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/simple-lightbox/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [Archetyped](https://wordpress.org/support/users/archetyped/)
 * Last activity: [4 years, 7 months ago](https://wordpress.org/support/topic/modifying-example-theme/#post-15034698)
 * Status: resolved