How Does it Work? (9 min)
Completion requirements
01 Getting Started
This video covers styling in Titan and how it works, including:
- Built-in style capabilities and general structure.
- Element parts.
- Style categories.
- States for interactive elements.
- Various methods to apply styles.
02 Built-in Capabilities
Titan provides built-in capabilities, to visually display how your content will display to end users. Styling can be applied easily.
1. Select an element to open the style panel. Any styling changes you make are reflected on the canvas.
1. Select an element to open the style panel. Any styling changes you make are reflected on the canvas.
03 Element Parts
The element is divided into different parts that can be styled individually. This increases your customization options.
The components of the element are listed in the lefthand menu. These options depend on the element you are styling. The first item listed usually refers to the element itself. This styling is applied to the element as a whole.
The righthand menu displays the corresponding styling properties. These options are dependent on the component selected.
The components of the element are listed in the lefthand menu. These options depend on the element you are styling. The first item listed usually refers to the element itself. This styling is applied to the element as a whole.
The righthand menu displays the corresponding styling properties. These options are dependent on the component selected.
04 Style Categories
There are some style categories that are present across multiple elements and others that are element-specific.
05 Interactive Element States
Interactive elements have different states. You can create different styling for each state.
For example, the hover color is red:
The clicked color is green:
For example, the hover color is red:
The clicked color is green:
06 Styling Methods
A theme is a general base style applied to the project. A theme is a starting point for your project styling.
When creating a Titan project, you select a theme. You can change this theme at any time.
To change the theme:
1. Expand the Project dropdown and click Theme.
System Themes have been created by Titan.
Custom Themes are themes you can create for your organization. You can create fonts, colors, and inputs.
Project styling applies to all elements.
1. Expand the Project dropdown and click style.
2. Select Configure from the options.
You can use the element styling menu to apply styling to specific elements.
If required, Titan does offer a CSS coding option for styling your projects.
When creating a Titan project, you select a theme. You can change this theme at any time.
To change the theme:
1. Expand the Project dropdown and click Theme.
System Themes have been created by Titan.
Custom Themes are themes you can create for your organization. You can create fonts, colors, and inputs.
Project styling applies to all elements.
1. Expand the Project dropdown and click style.
2. Select Configure from the options.
You can use the element styling menu to apply styling to specific elements.
If required, Titan does offer a CSS coding option for styling your projects.