I’m stuck and can’t figure this out: I have some social icons which have links (new browser tab). After clicking the link, there is a grey box around the icon with a light blue border. (see the Twitter button on the attached screenshot.
I can’t get rid of this. Could this be a visited state?
Which brings me to something I will add to the wish list for a future update: if Blocs gives me access to change the normal, hover and active states of things, why can’t I change the visited state also? Showing a link has been visited is important to usability.
So was a bit tricky, but I finally got rid of the “ugly blue outline” is set by chrome. actually it’s not an outline, it’s a box-shadow. (That also explains why the code in the standard blocs style.css didn’t have any effect.)
Anyway, for some reason I couldn’t get the box-shadow zeroed out using css stuff like button:focus { box-shadow:none;}
here’s what I did: I already had a custom class called “claire-social-button” which I used to style the social buttons. Using the class editor I set all box shadows to 0% opacity. But since Blocs class editor doesn’t let you add or write any special pseudo css (focus), I created an external CSS file with this line of code:
This got rid of the blue outline/shadow that chrome adds.
I attached the external CSS file in the global site settings under “project attachments”, so that way I don’t have to add it to every individual page.
Now I know, our usability friends will point out that the blue shadow is there for a reason. I.E. people who can’t use a mouse need to know which button they’re navigating to via the keyboard. Maybe I’ll find a way to just hide the blue shadow when using a mouse.