Jump to content

Archived

This topic is now archived and is closed to further replies.

janpeeters

Custom colour for ScrollSpy

Recommended Posts

janpeeters

Hi,

 

I'm using a ScrollSpy on my website. As far as I can tell it mimics the main background colour. I'd love to achieve that it takes the background colour of the section it's in. [Consider this a feature request ;-)]

But for now my question is how do I change it's colour. I searched with Chrome Dev Tools but with no luck in finding the right CSS selectors.

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny

ScrollSpy as far as I am aware has one color and doesn't react to what the color of the background color of your site is.

 

If you want to change the color, it will take quite a bit of CSS, you can find the correct classes here - http://cl.ly/image/0P2a333o321H


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

No magically the spynav changes colour with the global background colour (discovered that now for sure ;-))

http://cl.ly/image/2e0p080o1f3k

http://cl.ly/image/2g0k1w0f2M2K

Maybe with a LESS mixin. Hoping to find a way to feed it a new variable, namely my sections background colour.

 

Thanks anyway for pointing me towards the right CSS, indeed quite a lot.

If you come up with a way to achieve it by overruling a variable that would be great.

 

Best and thanks, Jan

Share this post


Link to post
Share on other sites
Danny

Oh sorry yeah its based on the color you select for your base content color, I thought you mean it changed color based on your background color you added yourself not from the option.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

Hi Danny,

 

what you thought is what I hope to achieve. It could be a great feature if you could define in DMS editor what the bg-color should be. The spynav in that section changes it's colour accordingly. Until such a feature is implemented I'm looking for a way to feed it my own bg-color instead of the global one. I presume I should be able to override a variable. But no idea how complex this is.

 

Thanks for your help, Jan

Share this post


Link to post
Share on other sites
Danny

The thing is, we don't like to many options as the product will become bloatware and will just confuse users. Therefore, I think using custom CSS to change the default styling is the best method for everyone.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

I agree with the preventing DMS to become bloatware but I presume you are already at work making the editor a lot more WYSIWYG and intuitive. A bit like what Squarespace tries to achieve.

 

And to round it off have you got any thoughts on how I can feed the Spynav a custom color to adapt to? I presume you are using a LESS variable that I might be able to alter with a child theme LESS file. 

 

Thanks, Jan

Share this post


Link to post
Share on other sites
Danny

You could if you like create an override section of ScrollSpy and edit the sections style.less file. I haven't checked but from what I can remember it uses the @baseContrast variable.

 

You could edit that file to your hearts content and use different or custom variables.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
janpeeters

That's a great idea. Thanks.

Share this post


Link to post
Share on other sites

  • Similar Content

    • janpeeters
      By janpeeters
      Hi,
       
      I'm trying to find out how I can keep the scrollspy centered on the page when it locks to the top of the page. In the current DMS/Bootstrap implementation the scrollspy jumps to the left. This is confusing for visitors because they have to refocus there eyes on a different spot.
       
      Any help would be appreciated in how I can prevent the thing from jumping. You can see the effect here http://j.mp/15Zpyks
       
      Thanks.
       
      Jan
×