Element Styling

What is Element Styling?

The Element style is designed to set a specific style on selected element/s. As opposed to the Project style, this style does not affect all elements of the same type, but only the element/s you select on canvas.

For example: if you select a specific button and make its background color pink, then only this button will be pink. All the other existing buttons in the project or newly added buttons after that will not be affected by this style change.

The Element styling panel can be opened for every element selected on canvas. It displays the element parts and the style properties available for each part. This panel can also be used to apply a specific style on multiple elements, (on the condition that they are all of the same type) for example, setting the same style for a few buttons, a few icons or a few simple input fields.

Titan’s styling best practice calls to integrate the use of both Project style and Element style. You can visualize the two as layers that are laid on top of one another. The Project style being the base layer for most of the elements and the Element style being the top layer that affects only specific elements.

It is important to understand that the Element level style and Project level style override one another, in order to use them together correctly. Since Element style affects individual elements, it should be used after a base style is already set using the Project style. Working in this method will prevent users from wasting precious time configuring the same styles over and over again.

When Should I Use It?

Once you’ve set a unified base style for the majority of your elements using Project style, we recommend that you select the specific elements that require different styles, and make the needed alterations on them, using Element level style.

Read more on how to use Project style.

How to Video

Coming Soon!

How to Guide

Note:

In the below “How to Guide”, the Number element is simply used as an example. You can of course configure Element styling for any element in Titan Web.

  1. Click on the plus (+) icon in Titan Web to open the element panel on the left. Then click and drag any element to the canvas. In this example, click on the “Input” category and then drag the Number element onto the canvas:
Number Styling Options on Element level
  1. Click on the styling icon in the quick toolbar that appears below the element.
Number Styling example screen
Number Styling example screen
  1. The Element styling panel will then open, and you will be able to style different parts of the element individually. For example, Root will enable you to set general styling properties that affect the Number element as a whole, and Label will give you the ability to style the font size, color, and type of the descriptive text above the input box.
Note:

Keep in mind that Project style and Element style override one another, so no matter what style configurations you already have for your element, the last style applied to it will always override the previous one.

List of Examples for Common Uses

The following are examples of common uses for Element styling:

  • Setting a specific button background color.
  • Setting a specific numeric input primary color.
  • Setting a specific icon color and size.
  • Setting a specific container border.

Hidden Title

Need more help?