Archived topic
Styling Accessibility focus
7 replies · Started by Cleo on January 27, 2021
I'm using the latest GP theme 3.02, GP Child theme 0.1, and GP premium 1.12.3
I would like to change the styling on :focus that is used for accessibility when people tab through the site.
I have tried to redefine the values in SimpleCSS - even adding !important. Using Google Console, the source file index shows
all the SimpleCSS output on line 65, whereas the :focus that I'm trying to over-ride is located on line 71. So with a higher line number and !important, the exiting style wins.
How can I change this style without doing something hacky?
[duplicate post]
Hi there,
For starters, its best not to edit theme files.
You seem to have this added within the theme's all.min.css file:
.screen-reader-text:focus, .screen-reader-shortcut:focus {
clip: auto!important;
height: auto;
width: auto;
display: block;
font-size: 1em;
font-weight: 700;
padding: 15px 23px 14px;
color: #333;
background: #fff;
z-index: 100000;
text-decoration: none;
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}This isn't added on the theme by default. It's best to revert the files to their default and change the accessibility option's styling within Appearance > Customize > Additional CSS.
.screen-reader-text:focus{
/* your styling here */
}Where are you seeing any edits to the all.min.css file? I haven't touched any of the core theme files, and wouldn't do that because it's hacky and a really bad idea when the theme gets upgraded. I only edit the css using the GP plugin, SimpleCSS. My assumption is that the CSS plugin will put my css edits at the top of the queue so to speak so that they will over-ride any theme CSS. But this is not happening when I re-style :focus with SimpleCSS. Are you saying I should be using Customize > Additional CSS and not SimpleCSS?
I just pasted the code I added to SimpleCSS into the Additional CSS area. It worked! So, what's up with SimpleCSS? Should I be using Customized > AdditionalCSS instead? Thanks for your help!
I just pasted the code I added to SimpleCSS into the Additional CSS area. It worked! So, what’s up with SimpleCSS? Should I be using Customized > AdditionalCSS instead? Thanks for your help!
Simple CSS is pretty old. Its pretty much redundant to the Additional CSS on customizer. You can uninstall it in favor of the customizer's CSS area if you want.
Sorry to chip in here, Elvin, but Additional CSS can slows a website down significantly.
Copying my code from Additional CSS to Simple CSS improved my load times by over 500ms.
I can't remember why exactly, but I think Simple CSS gets rolled into the main CSS whereas Additional CSS remains as a separate style sheet with an additional server call. Whatever, I avoid using Additional CSS on my projects because of that.
Hi @Keir,
If I remember it right, the context of this reply was for small bits of CSS. Few CSS lines will have the same effect.
This is strange though. Technically, they do the same thing on a page which is embedding the stylesheet on <head> as shown here - https://share.getcloudapp.com/X6ubgA6n
Main difference is Simple CSS adds metabox to a specific page so the CSS only loads there on there. Meanwhile, Additional CSS loads global so it applies to all pages regardless if its used or not. Perhaps you've compared 2 pages w/ using a simple CSS metabox and one w/o. :D
Note: Additional CSS does NOT create a separate stylesheet. It embeds the styles directly to the page on a <style id="wp-custom-css"> tag before the <body> tag opens. :)
