Whenever i click on the top primary menu options of my website then unwanted dotted rectangle shape appears. This is my wordpress website and here i am using astra theme. Please see the attached screenshot1 below for more clarity of this issue.Please tell me how i can remove or rectify this because it looks so unprofessional.
Your browser adds this to <a> elements, when they become “active” or “focused” (e.g. clicked). You can disable this behavior by adding this to style.css:
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
Consider adding new focus styles of your own because that outline we just disabled was intended for accessibility.
Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so?
Below there is a picture of what I get in my app.
Also, this is a link to a sandbox where I have the same issue:
https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx
This is caused by the &focus css selector as shown bij the inspector.
Add outline: none to the <button> to remove it;
<button style={{outline: 'none'}} onClick={onInputSubmit}>
This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:
button:focus {
outline: none;
}
Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.
How to change color of the blue toolbar buttons for editing?
I can't find the right css class to override this.
I also have problems how to "inspect" this hover buttons with chrome developer tools, is it posible to check calculated style of element when in hower state?
My solution:
.sc-menu a div{
background-color: red !important;
}
In chrome developer tools I first found:
UL with sc-menu class and then disable "display: none"
in ".sc-element .sc-menu.sc-tb-show-hover"
After this it was easy to find the right class
I seriously have worked on this FOR-EVER!!!
Why the heck isn't my menu color change via the CSS?
I don't know if it's the Wordpress theme interfering or what, but I need a fresh pair of eyes on this website: http://rivercityhopestreet.org/
Help!!!
GoingBananas
You should learn how to use web debugging tools. For chrome it's right click -> inspect element. Then you can find Your menu element and see what's setting the styles.
In added image You can see that Your style is accepted, but overridden by style in index file. Either it's style in php file itself or some Javascript.
You can either change the setting in the index file or (not the best way) set it to background: #40c2a6; !important` in your style.min.css
Also if You cannot figure something out, in Developer Tools click on the Html element, then click on "Computed" on the right side and then click on the specific style - it will show you where that real value is set at.
Hope this helps You in the future!
#menu-primary-items>li a {
color: #888;
}
search this and change the color..
Edit this in custom css.
#menu-primary-items>li a{
color : #000;
}
if it not works then put !important in color attribute.
We've just purchased a Primeface Theme&Layout Sentinel. However I've noticed a strange styling on tables in Chrome. The Table header and footer has an orange border. My colleagues don't see this and if I change my chrome profile I don't see it either.
The original can be seen here: http://www.primefaces.org/sentinel/documentation.xhtml#j_idt38
I've noticed that Chrome is injecting a stylesheet:
.ui-widget-header {
border: 1px solid rgb(231, 143, 8);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background: url(http://primefaces.org/sentinel/images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x rgb(246, 168, 40);
color: rgb(255, 255, 255);
font-weight: bold;
}
Where is this injected stylesheet coming from? How can I stop it? I know that chrome extensions can inject stylesheets but this stylesheet has a url to primefaces, or is that just a red herring and the extension just modified an existing valid stylesheet?
Update:
.ui-widget-header {
/* border: 1px solid #3f7506; */
/* background: #3a8104 url("images/ui-bg_highlight-soft_33_3a8104_1x100.png") 50% 50% repeat-x; */
color: #ffffff;
font-weight: bold;
}
This is the normal style sheet (it is being overwritten by some other styles, that's why some part is commented out). This style sheet is present in both profiles. As one can see from the URL, the styles normally use relative URIs but the injected one is using an absolute URI.
Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!
Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.
I had the same issue with injected stylesheet, hiding social buttons from my website.
It turned out my Adblock plus was blocking Facebook and YouTube social buttons.
Just had this with the 'Save to Pocket' extension overriding rules in a print stylesheet.
Also assuming your Google 'incognito' (privacy mode) browser isn't running your extensions viewing the page 'incognito' can be a quick way to check if a browser extension is the issue.
If someone stumbles on this as of 24-Feb-2022 because most web pages have black colored background due to color-scheme: dark right at the element by injected stylesheet, the culprit is 'Adobe Acrobat: PDF edit, convert, sign tools' - https://chrome.google.com/webstore/detail/adobe-acrobat-pdf-edit-co/efaidnbmnnnibpcajpcglclefindmkaj
Worked fine after disabling the extension.
For Brazilians (especially) who are going through this, check if you have the Méliuz extension (chrome://extensions/?id=jdcfmebflppkljibgpdlboifpcaalolg) and disabled it.
How to debug "injected stylesheet" in Chrome
Open develop console, goto Network tab
Filter it something '.css'
Look for extensions domains that load some CSS files
Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
Try to disable the extension and reload the page
In mi case I have disabled the chrome extension called "Nimbus Screenshot & Screen Video Recorder"
remove your newly installed browser extensions and cache, that may solve your problem.
The same thing happened to me, the links disappear from the navigation bar because of an extension in chrome called "EPUB READER". I disabled it and the links show up.
For me the Shield feature was causing such a styling problem. Once disabled, the styling was as expected.
This problem seems to be caused by mostly recorder extensions. Mine was caused by "Screen Recorder" chrome extension.