Overriding theme colors on specific controls with AppearanceKey

0
0

Hello, hopefully this is an easy one for you guys to show me what I’m doing wrong…

I want all of the panels in our system to have a consistent blue background, so I set the color on the theme, no problem.

But I want of all of the HTML Panels in our system to have a consistent white background. By setting the panel backgrounds to blue, the HTML panel backgrounds are also set to blue.

To fix this, I am trying to use the AppearanceKey property of each html box. As such:

this.htmlBox1.AppearanceKey = “hTML-panel”;

And then I added this custom appearance to my theme:
“hTML-panel”: { “text”: “HTML Panel”, “inherit”: “Panel”, “states”: { “default”: { “styles”: { “width”: [3, 1, 1, 1], “style”: [“solid”, “solid”, “solid”, “solid”], “color”: “windowFrame”, “backgroundColor”: “controlLight” }, “properties”: { “backgroundColor”: “controlLight” } } } },

But… the HTML panel is still blue, like all the other non-HTML panels. What am I doing wrong?

Thanks,
Andrew

Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

I believe I figured this one out on my own.  Somehow while using the theme designer I must have deleted the value of the “desktop” theme color.  This was causing my website to barf on itself a little, and that’s why the AppearanceKey was not getting respected.  Here is my code and theme change, if someone needs it in the future.  Thanks.

this.htmlPanel.AppearanceKey = “hTML-panel”;

 

"hTML-panel": 
        {
            "text": "HTML Panel",
            "inherits": "Panel",
            "states": 
            {
                "default": 
                {
                    "styles": 
                    {
                        "width": [3, 1, 1, 1],
                        "style": ["solid", "solid", "solid", "solid"],
                        "color": "windowFrame",
                        "backgroundColor": "controlLight"
                    },
                    "properties": 
                    {
                    }
                },
                "borderNone": 
                {
                    "styles": 
                    {
                        "width": [0, 0, 0, 0]
                    },
                    "properties": 
                    {
                    }
                },
                "borderDashed": 
                {
                    "styles": 
                    {
                        "width": [1, 1, 1, 1],
                        "style": ["dashed", "dashed", "dashed", "dashed"]
                    },
                    "properties": 
                    {
                    }
                },
                "borderDotted": 
                {
                    "styles": 
                    {
                        "width": [1, 1, 1, 1],
                        "style": ["dotted", "dotted", "dotted", "dotted"]
                    },
                    "properties": 
                    {
                    }
                },
                "borderDouble": 
                {
                    "styles": 
                    {
                        "width": [3, 3, 3, 3],
                        "style": ["double", "double", "double", "double"]
                    },
                    "properties": 
                    {
                    }
                }
            }
        }
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.