Dynamically Changing Styles

[Context: HL Kit … Basic Concepts and Terminology … Manipulation of Visual Elements]

Every portal is assigned a style, and that style dictates a variety of visual characteristics about the portal. They can include the font size, font style, text color, background color, border, bitmaps used, and an assortment of other attributes. In a nutshell, the style is what gives a portal its visual look and behavior. However, the style is not fixed - it can be changed.

There will be many situations where you'll want to highlight a particular condition to the user. If you think of the style as fixed, then you're likely to conclude that the best way to switch from a normal looking label to one that is in red text and a large bold font is to have two different portals. You can then hide whichever portal is not applicable based on the prevailing condition state. While this approach will definitely work, it entails extra effort.

The better approach is to simply change the style used on the portal. Since you'll need to define the alternate style to support a second portal, there is no extra work involved there. Then, within the Position script for the containing template, simply check the condition and, if appropriate, use the "setstyle" target reference on the portal.

The only caveat that you'll need to worry about with this approach is that you have to be aware of changing the font size and/or font style. If you change either of those characteristics with the new style, the default sizing of the portal will become invalid. Fortunately, all you need to do is then use the "autosize" target reference on the portal to trigger the appropriate resizing. Just make sure that you do this before you position the portal within the template.