Focus Glow is a feature imposed by most browsers to show that a link has been clicked. This feature is helpful for accessibility to show that they have clicked an object.

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

Default blue focus glow box shadow around a clicked object

We will go through the steps of how to adjust that colour or disable it completely.

It is recommended to keep Focus Glow enabled for accessibility of your website

Changing the Focus Glow Color

  1. Download the following file and unzip it to your computer focus.css
  2. Unzip the file.
  3. Drag the focusglow.action.js file onto your PageCloud page while in edit mode and drop it on the page.
  4. A message at the bottom middle of the screen will appear stating “Run Action : FocusGlow”
  5. Open the left Sidebar.
  6. Click “Settings”.
  7. Click “Advanced” on the top right.
  8. Click to open up the head editor.
  9. You will see something that looks like this:

Head editor showing the focus glow CSS code

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

9. You can typically input the name of the colors, such as blue, red, purple, etc. You may also use Hex and RGB codes.

Focus glow color changed to a custom color in the CSS code

Preview of the updated focus glow color on an object

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

11. Click “Save & Close” after the change.

12. Click “Save” on your page.

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:
    removefocus.action.js
  2. Drag the removefocusglow.css file that you’ve unzipped onto your page.
  3. This will need to be done on each page you’d like to remove that effect on.
editordesign