Change or disable the blue glow around your objects

Focus Glow is a feature imposed by most modern browsers that help indicate that a link has been clicked. This is a great feature for accessibility in order to visually show a visitor that they have clicked an actionable object.

By default, you will see this as a blue box shadow around the object:

Below, we will go through the steps of how to adjust that colour or disable it completely. Please keep in mind it is recommended to keep this enabled for the reasons mentioned above.

Changing the Focus Glow Color

1. Download the following file and unzip it to your computer.

2. Once it has been unzipped, drag the focusglow.action.js file onto your PageCloud Page while in edit mode and drop it on the page.

3. Navigate to the 'Page' tab in the editing palette. 

4. Click on the <head> button to open up the <head> editor.

5. You will see something that looks like this:

6. You will now be able to adjust the color by replacing the two mentions of 'blue' with the color you'd like to use. 

7. You can typically input the name of the colors, such as blue, red, purple..etc or you may also use Hex and RGB codes such as the examples below:

8. You can replicate this on each page of your site in order to ensure all focus glows have been adjusted.

Disabling Focus Glow

Disabling focus glow will prevent that box shadow from appearing whenever a link is clicked. 

1. Download the following file and unzip it to your computer:

2. Drag the removefocusglow.css file that you've unzipped onto your page.

This will need to be done on each page you'd like to remove that effect on.

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!