Layout — building blocks for organizing your application as a tree of widgets

Styling with a theme

A theme provides the look and feel of several built-in widgets, using CSS style rules. The rules for each CSS theme are defined in the folder resources/themes/. There each theme is organized in a subfolder.

You can choose from three themes:

default
You don't have to do anything to use this theme from the WCssTheme class as it is the default theme.
polished
This theme is also implemented by the WCssTheme class. You can change to this CSS theme with setCssTheme("polished") in your WApplication.
bootstrap

This theme is implemented by the WBootstrapTheme class, and relies on Twitter's Bootstrap CSS framework. Use setTheme(new WBootstrapTheme()) to use this theme.

As of version 3.3.2, Bootstrap 2 and Bootstrap 3 versions are supported. The widget gallery has been restyled to use Bootstrap 3. While the theme makes sure that Wt's widgets are rendered with the markup expected by bootstrap, there are many features that are particular to the layout system of bootstrap (and chaned from version 2 to version 3). Thus you need to know how bootstrap expects you to layout widgets in order to effectivily use this theme, for which we refer to the Bootstrap documentation.

Example
source
#include <Wt/WApplication.h>
#include <Wt/WEnvironment.h>

// Main application class
class ThemeExample : public Wt::WApplication
{
public:
    // Constructor
    ThemeExample(const Wt::WEnvironment &env)
        : Wt::WApplication(env)
    {
	setCssTheme("polished");

	/*
	 *  Create UI, Set initial values, ...
	 */
    }
}

Remark

Setting an empty theme (with parameter "") will result in a stub CSS theme that does not load any stylesheets.

Top