Perspective Menu Tree Linear Gradient

I have a left dock with a slight Linear Gradient…

linear-gradient(to right, #0C7BB3, #0C5BB3)

In that dock I have a Menu tree that I’m trying to get to match the gradient behind it. Linear Gradient in the style properties (Background Image) doesn’t work, it just makes the menu tree match the session theme. If i try and make the background transparent that doesn’t work either as that makes level 2 transparent also. Liner Gradient works for each individual item but that still doesn’t work if level 2 is shorter then level one.

What is the best way around this ?

@craigb, there are 4 spots where you’ll need to apply that gradient:

image

Thank you, When I do that it leaves me with white space as picture attached.

Fixed it, I noticed you are using ‘background:’ rather then ‘backgroundImage’

Once I changed that, it now works. :grin:

Scratch that… Level 2 now doesn’t cover level 1.

Shoot; it sure doesn’t! There is a solution for that, but you’ll need to get into custom themes:

https://docs.inductiveautomation.com/display/DOC80/Perspective+Themes

You’ll need to create a style override so you can apply that gradient to one of the inner layers that the standard styling can’t reach:

image

ezgif-3-dbca34b6c4f6

One caveat… As you get into custom themes, you’ll have the ability to style layers of the components that are subject to change between releases. You’ll just need to make sure that any custom theme styling that you’ve done is still functional as you upgrade. If anything breaks, you’ll need to debug with your browsers debug console. Custom themes give you ultimate control over the look and feel, but they certainly fall into the “use at your own risk” category.

Thank you.

I created the style over ride but it never changed. Do i need to do anything addition to reset / reload the CSS ?

Looks good. Probably just need to restart your gateway for it to take.