Element Styling
What is Element Styling?
The Element style is designed to set a specific style on selected elements. Unlike the Project style, this style does not affect all elements of the same type but only the elements you select on the canvas.
For example, if you select a specific button and make its background pink, only this button will be pink. This style change will not affect all the other existing buttons in the project or newly added buttons after that.
The Element styling panel can be opened for every element selected on the 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 to multiple elements (provided 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 is to integrate the use of both Project style and Element style. You can visualize the two as layers laid on top of one another, with 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.
In order to use them together correctly, it is important to understand that the element-level style and project-level style override one another. Since the Element style affects individual elements, it should be used after a base style is already set using the Project style. Working with 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
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.
- Click the + icon to open the element list.
- Click-and-drag any element to the canvas. In this example, a number element was dragged to the canvas.
- Click the styling icon in the quick toolbar that appears below the element.
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.
Keep in mind that Project styling and Element styling 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.
