Project Styling
What is Project Styling?
The Project style is designed to store all of the base styles used in your Titan project. It contains the style of each and every group type (e.g. all input fields or all buttons) or single element type (e.g. a numeric input field, an image, or a power table) and is applied to the entire project and affects it as a whole.
The Project Styling panel is divided into 5 groups:
- Simple elements, such as a line or input elements.
- Complex elements, such as a table or a gallery carousel.
- Project-level elements, such as a page, header, or confirmation modal.
- ECommerce, such as the catalog or product dialog.
- Scheduler, such as the meeting types or profiles.
Once you set a style for an element through the Project style panel, it will automatically be applied to all elements of the same type in this project. For example: if you set a style for your email input field (making the label font color blue), then all email elements in this project, or those added to it after, will get the same style (and have a blue label).
Project-level styling saves you time by avoiding repetitive configurations and enables you to create a unified look and feel for your project, where elements look the same across the project.
It is important to understand that the Project style is not the only style available in Titan. We also provide Element style, which allows you to change the styling in specific elements. The Project-level style and Element-level style can override one another. So when setting styles, they can be used together to create your final design.
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.
When should I use it?
It is recommended to start off your project design by setting its base styles at the Project level: We suggest going over all of the elements you will be using in the project and setting the common characteristics from here. After this, if you have elements that require personalized styling, we suggest selecting them and using the Element style to override the base style. Read more on how to use Element style.
How to Video
Coming Soon!
How to Guide
In the below “How to Guide”, the Button element is simply used as an example. You can of course configure Project styling for any element group type or single element type.
- 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, the Button category is selected, and the Primary button element is dragged onto the canvas:
2. Next, click Project > Style > Configure. This will open the Project Style panel:
Configure style
- Once the Button element is selected on the canvas, the panel focus will skip and display its relevant properties, in this case, the Button styles. Another way to navigate in the Project style panel is to use the search box at the top.
Please note that some elements belong to a group while others are individual elements. So when you select an element that does belong to a group you will be able to set the styles for the group as a whole, as well as for a specific element in it.
For example, when the Text input field is selected on canvas, the panel will automatically focus on its group (All inputs) allowing you to set common styles that will apply to all of the inputs in this group. If you then wish to apply a certain style to a specific type of input, for example the Text input, you will be able to do that by selecting this element from the dropdown on the right before you set the styles.
- The “common” option in the panel will be highlighted by default, meaning all types of buttons will be affected.
If you wish to style the Primary or Secondary button individually, simply choose the “Button” option and select the specific one from the dropdown on the right.
- Once you’ve chosen “common” (to style both types of buttons) or “button” (to style a selected type of button), you can then go to the style categories and set your desired Size, Border, Fill, etc.
List of Examples for Common Uses
There are a number of common uses for Project styling. These use cases demonstrate that setting certain project-wide styles can give your project greater uniformity in terms of look and feel:
- Setting a font family for the entire project.
- Setting the input field group style.
- Setting the text type colors and sizes.
- Setting the general look of a power table (header style, row style, icons style).
- Setting the style of commonly used modals such as information or confirmation modals.
Theme and Project Style
The theme is actually a Project-level style that was created by Titan and saved for users. When you create a new project, one of the steps is to select a theme. So you can basically choose the default style you start with. However, the theme is usually never used as is but changed through the Project style to suit the specific brand requirements.
