Modifying Example Theme

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;
}

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.

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.

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.

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 for more details.

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.

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 3 years ago by wholemilklatte.

Glad to hear you got it figured out! ??