Silk UI Panel Header Color 

Silk UI Panel Header Color 

  

Hello,

This may turn out to be a simple question, but i there any way to change a Silk UI's Panel header color "on-the-fly".  We have a requirement to show two panels on page with different header border colors.  I know I can go into the CSS (.Panel{}) and change the color there, but that would change it for BOTH panels.

I have tried adding a container around the panel and add the extended property "style" setting the "border-top-color" property, with no results.  I have also tried to add it to the Expression in the "Title" placeholder, with no effect.

Maybe I'm missing something?

Regards,

Steven Crozier

Solution

Hi Steven,

Did you already resolve this? If not, you could do the following:

  1. Create CSS classes for all different colours you want, e.g. RedHeader, BlueHeader etc. Make sure the selector is ".RedHeader .Panel_header" etc.
  2. Create a local variale that holds the name of the appropriate class for the specific Panel.
  3. Put the Panel in a container, with a "class" Extended Property and a value set to the local variable.
  4. When you need a different panel header colour, assign the local variable the class name you want and Ajax refresh the container.

This should give you what you want.

Solution

Thanks VERY much Kilian.  It worked a charm!

You're most welcome. Sorry I didn't see your post earlier :).