Skip to main content

spot

The spot configuration option allows you to customize the appearance of the typeable labels used in OpenKeyNav. This includes options for font color, background color, font size, and more, enabling you to match the labels' appearance to your website's design.

Configuration Option​

spot​

  • Type: Object
  • Description: An object to configure the appearance of typeable labels.

Properties​

  • fontColor (string, optional): The color of the label text.
  • backgroundColor (string, optional): The background color of the label.
  • insetColor (string, optional): The color of the inset shadow.
  • fontSize (string, optional): The font size of the label text.
  • arrowSize_px (number, optional): The size of the arrow pointing to the element.

Example​

Here's an example of how to customize the appearance of typeable labels in OpenKeyNav:

const openKeyNav = new OpenKeyNav();

const config = {
    spot: {
        fontColor: 'yellow',         // Customize the text color
        backgroundColor: '#000',     // Customize the background color
        insetColor: '#ff0000',       // Customize the inset shadow color
        fontSize: '14px',            // Customize the font size
        arrowSize_px: 6              // Customize the arrow size
    }
};

openKeyNav.init(config);

In this example, the spot configuration object customizes the appearance of the labels with specific colors, font size, and arrow size.

Summary​

  • Customizable Properties:
    • fontColor: Color of the label text.
    • backgroundColor: Background color of the label.
    • insetColor: Color of the inset shadow.
    • fontSize: Font size of the label text.
    • arrowSize_px: Size of the arrow pointing to the element.

By using the spot configuration option, you can tailor the appearance of OpenKeyNav's typeable labels to better fit your website's design and improve visual integration.