Focus Highlight on links

  • Resolved Jaime

    (@jaimeafmar)


    7 months, 3 weeks ago

    Hello.

    I am using a Child theme for twentytwentyfive and using merely the block editor with as little plugins as possible (only carousel and contact form).

    The twentytwentyfive theme has a thick border around clicked links and I cannot deactivate it no matter what. This is the code I used, but maybe there is something missing:

    /*remove focus highlight on cliked links*/
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 0 !important;
    box-shadow: 0 !important;
    border: 0 !important;
}

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    7 months, 3 weeks ago

    Hi @jaimeafmar,

    The CSS that you have shared should have worked fine. It’s the a:focus which works ie, this part:

    a:focus {
outline: 0 !important;
}

    Where exactly is the CSS that you have shared added? Is it by editing any specific theme file, or have you added it using any custom code? I’m not able to find the CSS that you have shared when I check your website.

    Most probably, the CSS isn’t loaded in the frontend, and hence the issue.

    Regards,
    Nithin

    Thread Starter Jaime

    (@jaimeafmar)

    7 months, 3 weeks ago

    Thank you for coming back to me @wpmudevsupport11

    I added it on style.css of the basic child theme I created for twentytwentyfive. What am I missing?

    Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    7 months, 3 weeks ago

    Hi @jaimeafmar,

    I checked the style.css file by loading it, and can confirm that the specified CSS is not present in the child theme’s style.css file. Also checked the parent theme, and there isn’t any such CSS either.

    Most probably, the issue is caused by the cache if you have correctly added the CSS inside style.css. Please confirm if you have any cache enabled on the website side and also on the Hosting side. If enabled, please clear and see if that makes any difference.

    I could also notice the site uses Cloudflare, so I would also recommend clearing the cache via Cloudflare. You can temporarily enable the Development mode to rule out the cache from the Cloudflare side.
    https://developers.cloudflare.com/cache/reference/development-mode/

    Once done, please do clear the browser cache as mentioned here and see if the CSS shows up or not:
    https://www.refreshyourcache.com/en/home/

    If the issue is still the same even after above then you can also refer the following to check other ways of adding CSS to rule out if the issue is within the child theme or not:
    https://codewp.ai/blog/wordpress-gutenberg-custom-css/

    Regards,
    Nithin

    Thread Starter Jaime

    (@jaimeafmar)

    7 months, 3 weeks ago

    I don’t think that is it @wpmudevsupport11 . The CSS code has been inserted in the style.css file in the child theme.

    Can you please quickly check what was said here? – https://wordpress.org/support/topic/child-theme-for-twenty-twenty-five/

    I think that might be the answer to what is happening.

    Thank you

    Moderator threadi

    (@threadi)

    7 months, 3 weeks ago

    Your setup of the child theme is absolutely correct. Its style.css is also loaded in the frontend. But it still does not contain the CSS code you mentioned at the beginning. You should check again exactly what content the style.css of the child theme has in the hosting.

    Another important note since we are in the accessibility section of the forum: deactivating the outline means that your website is no longer accessibility ready. This will prevent visitors to your website who are dependent on it from being able to use the menu. This creates an unnecessary barrier for them. I would recommend that you leave the outline.

    Thread Starter Jaime

    (@jaimeafmar)

    7 months, 3 weeks ago

    Thank you for coming back to me @threadi

    The css file contains the code, and the cache has already been cleared, so something is off.

    I can also replace the outline for something thinner and dotted for example, but that 1.5px think rectangular border is horrible, especially on the overlay mobile menu, which is also non-configurable unless I install some plugin.

    How can I replace that outline for a thinner and dotted style, for example? (though it doesn’t seem to work anyway)

    Moderator threadi

    (@threadi)

    7 months, 3 weeks ago

    No, the style.css still does not contain the code: https://visitthenordics.com/wp-content/themes/twentytwentyfive-child/style.css?ver=6.8.1

    Instead of switching off the outline completely, you can also specify a different value. You can find examples here: https://developer.mozilla.org/de/docs/Web/CSS/outline

    If this does not work with the style.css, you can also enter CSS in the editor. You will find the field for this under Appearance > Editor > Style > top right, enable “Style” > click on the dots > Additional CSS.

    Thread Starter Jaime

    (@jaimeafmar)

    7 months, 3 weeks ago

    I can’t find this – Appearance > Editor > Style > top right, enable “Style” > click on the dots > Additional CSS

    Anyway, I have inserted the code so I will just wait a few hours for it to propagate. I find it interesting that all changes reflected swiftly but this can’t be seen here https://visitthenordics.com/wp-content/themes/twentytwentyfive-child/style.css?ver=6.8.1

    Thank you, I will check it again tomorrow

    Thread Starter Jaime

    (@jaimeafmar)

    7 months, 3 weeks ago

    It updated. Done.

    Thank you

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Focus Highlight on links’ is closed to new replies.

Tags