Dotted lines around objects in Firefox

• nopez4you

  said

  Do you guys have a fix for the FireFox problem that is causing dotted lines to appear around buttons when they are selected?

• nopez4you

  said

  How can I attach images to my posts here in this forum?

• andy

  said

  It depends on what type of “button” it is. My guess is this is not a real button but a link being styled like a button. It will also depend on if it’s a button added with Visual Composer or one you added yourself by assigning the theme’s “btn” class. If you can link to the page where the button is I can look at the code to answer these questions, or if you know how to use your browser console you can check on this yourself.

  Once you know the class of the button element you can add this to the Custom CSS field of your theme options:

  .btn, a.btn { outline: none !important; }
  button::-moz-focus-inner { border: 0; }

  Whatever class you find on the button element, include it in the first statement above in addition to the classes I’ve already listed.

• nopez4you

  said

  The problem only occurs for me on FireFox. I am not seeing an issue with Safari.

  Here is an example of the problem that I am referring to:
  

  Here are examples of the problem on your demo site:

  If I click on any of the post subjects on this page: http://para.llel.us/themes/vellum-wp/portfolio-category/graphic-design/

  Maybe this is not considered a problem by some people but to me it seems like a mistake.

• jeffw

  said

  Hi, nopez4you.

  That dotted outline is not caused by the Vellum theme, that is something the Firefox browser does to the currently active link. Search the internet for “firefox active link border” to learn more about this.

  When any of my clients ask me to do something about this I go to Appearance > Theme Options > Custom CSS and add the following style to my Custom CSS box:

  a { outline: none !important }

  That style disables the active link border for all links, text links as well as button (image) links.

• andy

  said

  We decided not to fully disable this in Vellum because it’s an accessibility feature. We’ve only selectively disabled it where it makes sense from a design specific approach. This seems like an area that it would make sense to include that with a generic call to hide the outline inside all slide shows. I’ll probably add this to the next update. Thanks for pointing it out.

• andy

  said

  Also, a quick update to Jeff’s code. It will require the CSS to be targeting the “focus” action of the link:

  a:focus { outline: none !important; }

• jeffw

  said

  I think the !important declaration forces the style for all selectors? I think if you add the selector then the !important declaration will not be needed.

• nopez4you

  said

  Thanks for the information. Yes, it would be great if there was an option to toggle this feature on and off in your GUI.