Custom Focus

Business Background

Users may want to see which fields or buttons they are interacting with in a clearer way than the default way, especially when tabbing between elements.

Titan Solution

Titan Web has a Custom Focus option to configure styling for the focus on the project level.

How to Video

• Coming soon!

How to Guide

1. Click the + icon and open the element list.
2. Drag-and-drop an element to the canvas, for instance, a button.
   • Other examples include input elements.
3. Open the Project Settings and click the Site Elements option.
4. Use the toggle switch to enable the Custom Focus.

5. Click the Project drop-down arrow.
6. Click the Style option and the Configure suboption.

7. Search for “focus” on the Customize Styles screen. The Custom Focus option is available under Project Level Elements.

8. Add a border:
   • Color and Weight
   • Radius
   • Advanced: Borders or Separate borders

9. Add a shadow:
   • X, Y
   • Blur
   • Spread
   • Inner or Outer

10. Save and Preview the project.
11. Click on the button, or use the Tab key to tab between elements. The border is added on the element that has the focus.