Design of limelight bar to support multiple color themes (e.g. ‘Palette’ from STH)

Big White Duck BWD Support
1

I am exploring a website with different optional color themes using the ‘Palette’ stack by STH (@habitualshaker ). I also like to create an element displaying different content selected by tabs - the limelight bar offers a nice looking solution to accomplish what I am after. However, some of the necessary styling (e.g. active button fill color, or border color, …) is done with the typical color selections. While this works well to support one color scheme, it doesn’t allow to ‘dynamically’ follow a theme change.

As far as I understand it, the ‘Palette’ colors can be accessed as CSS variables or classes (e.g. bg-3), and/or as specific ‘Source’ IDs (e.g. ‘secondary (alt)’). However, the styling options for the limelight menu bar buttons don’t allow to directly link to those page-wide defined colors. Is there a way to possibly use some CSS coding to assign the ‘Palette’ colors to the design element in limelight ?

If helpful, i can create a test page as a testing ground.

Thanks for teaching me/us some CSS tricks to go beyond what comes already with this great stack (if there is a way ;) )

Cheers

2

Hi @GKs -

The following should get you started. Leave the limelight settings as default for the buttons and uncheck the Style active tab option.

From top to bottom these three rules style the inactive button, the button when being hovered over and the button when the associated limelight is active.

button.spl-nav{
	background-color: var(--accent-color);
	color: var(--accent-color-alt)
	}
	
button.spl-nav:hover{
	background-color: var(--accent-color-hover)
	}
	
button.spl-nav.lightbox-open{
	background-color: var(--second-color);
    color: var(--second-color-alt)
	}

Adapt the colours as necessary using the Source colours guide on the Knowledge Base.

Edit: Just realised i need to update Palette stack to use --accent-color-alt which I added to Source quite recently to make it easier than using the less logical --button-primary-color. Have changed the code above to reflect what things need to be for now.

Edit 2: Have just pushed out the update to Source Palette 1.2.2 now to use the --accent-color-alt variable so have amended the code above to use that.

2 Likes
3

Hello Stuart,

Thanks for the quick reply - I will give it a try later and report back. So glad to have your expertise available in this FORUM !

Edit: … so I will happily update before giving it a try ;)

2 Likes
4

Quick feedback … as expected, that works perfectly well !

Can I add another question on top - this likely needs to address the limelight classes.
The SVG used to close the limelight has a stroke color (and hover change) - ideally I would also love to use a defined ‘Palette’ colour there ?!

I will try to use the web inspector to learn more, but always appreciate a hint to set me on the right track ;)

5

I think this should set the close icon to pick up the Source colors (again adapting the variable value as desired):

.infix-close svg path{
stroke: var(--accent-color) !important	
}

.infix-close:hover svg .ring{
stroke: var(--accent-color) !important	
}
1 Like
6

Thank you Stuart !

It always looks so obvious (and works of course), but getting there on my own is still a bridge too far ;) Thanks to you (and others, too) we can do amazing things with Stacks. Cheers to this community.

1 Like