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.
Project Settings
Project Settings
  1. Click the Project drop-down arrow.
  2. Click the Style option and the Configure suboption.
Style > Configure options
Style > Configure options
  1. Search for “focus” on the Customize Styles screen. The Custom Focus option is available under Project Level Elements.
Custom Focus option
Custom Focus option
  1. Add a border:
    • Color and Weight
    • Radius
    • Advanced: Borders or Separate borders
Border options
Border options
  1. Add a shadow:
    • X, Y
    • Blur
    • Spread
    • Inner or Outer
Shadow options
Shadow options
  1. Save and Preview the project.
  2. Click on the button, or use the Tab key to tab between elements. The border is added on the element that has the focus.
Border added - example
Border added – example

Hidden Title

Need more help?