Styling¶

As mentioned several times, page content is parsed and converted to be sent to the user's browser. The final page content actually is pure HTML that one can apply some style to, providing the best user experience.

Styling involves some knowledge of Cascading Style Sheets. This section describes what sort of styling you may want to apply, in different situations.

Style sheets¶

There are two ways you can apply a stylesheet to your application:

Global style sheet.
The css_file parameter of the Gui constructor lets you specify a CSS file that your application will use for every page. The default value for this parameter is a file located next to your main Python script, with the same name except for the extension that must be '.css'.
Page-specific style.
The method Gui.add_page() has a style parameter that can be set to CSS content. This additional style is applied to the page and only this page.

Beside explicit style sheets, you can also modify the global theme, as described in the section on Themes.

Applying style¶

Once the style sheets are set for the application, you can start learning about how styles can be expressed to pages.

Global styles¶

As in any Web application, the root element (:root) is available for global style settings.
For example, if you want to make your application bigger, enlarging the font size, you could write:

:root {
  font-size: 2rem;
}

And all pages will appear twice as big.

Markdown styles¶

Thanks to the Attribute Lists extension, the Markdown text can hold attributes used for styling.

If, for example, your Markdown content is the following:

...
This line should be displayed in blue.
{ .blue-line }
...

and a style sheet used by the application indicates:

.blue-line {
  color: blue;
}

then the text line is displayed in blue.

Please check the documentation for the Attribute Lists extension to find more information.

div vs. p

Instead of generating <p> HTML tags for lines of text, Taipy uses <div> tags. This allows more complex structures in pages, such as elements within elements.

Main page style¶

The top-most element of the generated page is a <div> element with the 'id' attribute set to "root".

If you need to reference the top-most element of your page, you can select it in your CSS stylesheets using the selector: div#root.

Visual elements-specific styles¶

You can apply some style to any visual element you have added to your pages.

Using CSS classes¶

Every visual element is assigned a CSS class that depends on the type of the element.
The default associated class name is made of the string "taipy-" followed by the type of element: all Taipy buttons, for example, have the CSS class name: "taipy-button".

You can therefore create a weird-looking button displayed in an oval by setting a style sheet that contains:

.taipy-button {
  border-radius: 50%;
}

Now all the buttons of your application will look the same, with an oval shape instead of a rectangle with rounded corners.

If your Markdown page contains the following control:

<|Click me|button|>

The CSS rule above will impact your display this way:

You can also add CSS class names of your choice using the classname property of all visual elements. If you need to assign more than one class to an element, you can separate each individual class name with a space character:

<|Click me|button|classname="option testing"|>

This Markdown fragment gets converted into an HTML element with three CSS classes assigned: taipy-button, option, and testing.

Using the HTML 'id' attribute¶

You can use the id property of all visual elements to generate an HTML id that can be used by CSS styling.

For example, if your Markdown page contains the following control:

<|Click me|button|id="my_button"|>

You can change the style of that button using a CSS selector that relies on the id of the button:

#my_button {
  text-transform: none;
}

Now the button shows the text 'Click me' instead of 'CLICK ME': the default in Material UI (which is the components library Taipy GUI relies on) is to capitalize the text of buttons.

Themes¶

The visual elements that Taipy GUI generates are extensions of Material UI components. This components library has great support for theming, so you can customize how things will look across all components.

Material UI exposes the full API for handling themes, which you can find on the MUI Theming page.

To change the theme of your application, you must use the theme configuration parameter (for example in the Gui.run() method) as explained in the Configuration section. You could also impact only the light or the dark theme using the light_theme or dark_theme configuration settings.

Here is how you would change the general theme if you wanted the background color to be a neutral gray color (#808080 in CSS) and make the primary color an orange-looking color instead of the default blue color.
In your Python code, you would create a theme dictionary and provide it as the value of the theme parameter of the method Gui.run():

...
my_theme = {
  "palette": {
    "background": {"default": "#808080"},
    "primary": {"main": "#a25221"}
  }
}
...
gui.run(theme=my_theme)

See the impact of setting this custom theme: