Changing the appearance of controls

The appearance of controls in a web app can be changed in two ways: for all controls in the project at once or for individual controls.

Changing all controls

Changing the appearance of all controls at once is done through the project's theme. Each Xojo web project has a theme which controls everything about the appearance of controls from size to font to colors, even some behavior. Xojo has a default theme but you can substitute other themes as well. Under the hood, Xojo uses as web technology called Bootstrap and thus the themes you can use in Xojo must be design for use with Bootstrap. Bootswatch is a website that provides many free Bootstrap themes that are Xojo-compatible.

On the Bootswatch website, clicking the Preview button for any theme will give you an idea of just how many different aspects web control appearance are governed by themes. Once you find a theme you like, click on the menu connected to the theme's download button and select the file titled bootstrap.min.css. That is the only file you need. To use it in your project, drop it into the project in the Navigator. The layout editor itself will even take on the theme as well.

There are many free themes available on the Internet. Some are more compatible with Xojo than others at the moment but those at Bootswatch are very compatible.

If the look of your web application needs to match a website, changing the theme is an easy way to do that. In fact, many websites use Bootstrap and can provide the Bootstrap theme file they are using.

Because themes can affect the size of controls, changing themes after you have laid out controls may require some adjustments.

Theme samples

Here are some of the controls with the default theme:

../../../_images/changing_the_appearance_of_controls_web_controls_with_default_theme.png

Here are the same controls with the Darkly theme:

../../../_images/changing_the_appearance_of_controls_web_controls_with_darkly_theme.png

Here are the same controls with the Pulse theme:

../../../_images/changing_the_appearance_of_controls_web_controls_with_pulse_theme.png

Creating your own theme

You can create your own themes as well. Bootstrap Magic is one example of a free online editor.

Changing individual controls

Changing the appearance of individual controls is done through their Style property. This property allows you to change appearance properties such as ForegroundColor, BackgroundColor, BorderColor, BorderThickness, font, font size, font styles and opacity. All this is done in code.

Example

The example below, the first WebTextField is unchanged. Via changing it's Style property, the second WebTextField has the Opacity set to 80 (out of 100), the border thickness set to 3 and the border color set to Color:

The code for this (in this case in the WebTextField.Opening event, is straightforward:

Me.Style.Opacity = 80
Me.Style.BorderThickness = 3
Me.Style.BorderColor = Color.Blue

Changing a control's style can be a great way to indicate errors. For example, a the user has forgotten to fill in a mandatory field, setting its border color to red helps make clear which fields need to be completed:

../../../_images/changing_the_appearance_of_controls_webstyle_example_-_blank_mandatory_field.png