Using the CSS File to Customize Specific Screens

[Profound Logic]

Q:
Can I make special design changes to a specific screen with Genie?

A:
In Genie, each skin has a CSS file that controls settings for colors, fonts, and sizes. It’s very convenient for making global changes that affect all of your screens. But most people don’t realize that it can also be used to modify specific screens as well. The trick is identifying the screen by id using the # symbol syntax in CSS. Here is an example:

#MainMenu .A22 {
font-size: 15px;
}

This affects all white (hex 22 attribute) fields on the “MainMenu” screen. In addition to changing fonts and colors, CSS can also be used to hide elements. I was recently working with a customer that needed to hide certain types of elements and this worked great for them.