Add Style to Your UI with CSS

Modernize your Mashups with CSS to enhance the presentation of your application.

Guide Concept

This project will introduce using CSS to create a customized, consistent look and feel for your IoT application.

Following the steps in this guide, you will create a custom CSS class definitions and bind these classes to Mashup features.

We will teach you how to present a professional-looking user interface and ensure consistency of style treatments within your application by implementing Cascading Style Sheets (CSS) in Mashups.

add-style-css

Guide Info

Level Intermediate
Est. Time 30 Minutes
Published Jan 15, 2021
Author Allen Smith
Experience

You'll learn how to

  • Create custom CSS classes using the integrated CSS editor
  • Bind CSS classes to a Mashup and to individual Widgets
  • Use Media queries to dynamically apply styling
 Register to Start Guide

Things used in this guide

Environment:

This guide requires a connection to the ThingWorx Foundation.

It assumes that you are using the downloaded trial. Directions for the hosted instance may have some differences.

Software components:
Previous knowledge
Create Your Application UI

Add Style to Your UI with CSS

Outline