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.
Related
I'm building a chrome extension, I have options page but seems like Chrome overriding button default style so I cant style a button on :hover nor on :focus.
Does chrome extension on options pages disable some CSS? especially options page, since my popup page isn't affected.
My CSS :
.button.is-primary {
background-color: #7957d5;
border-color: transparent;
color: white;
}
But the button looks same on options page.
1) Try adding "chrome_style":false as shown in the documentation,
2) Try using !important. –
#wOxxOm comment solve my problem.
Has anyone tried changing the CSS in the new Facebook Page plugin? Old plugin used to provide some options such as being able to select a color scheme. However, the new plugin it's white all around and it does not seem to accept my custom CSS. Example:
._h7l {
background: transparent !important;
border: none !important;
}
Any ideas how we can get some custom CSS to work?
You cannot modify the CSS. The content of the plugin is displayed inside an iframe so there is no way you can change CSS or override any javascript method.
There are different options provided by this plugin you can customize. Please take a look into the docs:
https://developers.facebook.com/docs/plugins/page-plugin/
I hope it helps.
Yes you can, but not without using a little bit of jQuery and you site must use an https protocol (https). Both protocol must match...
Start by adding this awesome plugin: jquery.waituntilexists.js
And then play with your Facebook iframe by adding your css in it:
$(".fb-page iframe").waitUntilExists(function(){
$(".fb-page iframe").contents().find('head').append('
<style>._h7l {
background: transparent !important;
border: none !important;}
</style>
');
});
I develop a plugin that for wordpress and has a lot of content in it (forms lists etc.).
I know this is asked several times but not in wordpress contects.
The default theme for TwentyThirteen puts some ugly styles on all button:
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
background: #e05d22;
background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%);
border-bottom: 3px solid #b93207;
border-radius: 2px;
padding: 11px 24px 10px;
}
and several more diferent definitions for :focus, :active, :hover.
This is not a big issue if you have heavy staled page with custom buttons look...
but in my case I rely use jquery and twitter-bootstrap and there styles get completely messedup (red borders on hover, random paddings and so on).
And overriding the styles for close button on DatePicker for example just to make it look NORMAL... is not fun.
This seems as a general issue to me but I m new to wordpress themes and plugins...
so what is good solution for clearing /normalizing this particular styles ?
(Just reset CSS will remove most of the default looks)
try !important as it has the highest priority other than inline style.
I assume that you plan to use twentythirteen, but you need to change the style for a few elements. This can be easily done with a child theme. It is very easy to do a child theme, look it up on google or there are plenty of tutorials on youtube. Here is one example of creating a child theme http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial and here is a youtube tutorial http://www.youtube.com/watch?v=mvzlw8D6pvk
In your theme style.css you only have to redefine the styles that cause problem. And they will automatically override twentythirteen, leaving the rest unchanged.
I currently am using the Login Styles for Joomla module as the login module for a Joomla 2.5.9 site with the JS Elated template. This module displays a drop down box for logging in when a user clicks the login image.
In every browser but Internet Explorer 8, the login module will display with no problems. However, in IE 8, the Login module's button image will not appear, but the module will still be there.
By talking to the module's support team, I learned that the file causing this problem was the file ie.css. Removing the file helped, but resulted a button in the drop down to appear too dark.
Looking at ie.css, I found the following styles:
button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
behavior: url('./templates/js_elated/css/PIE.php');
background: #eee url(../images/button-light.png) repeat-x;
background: gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ccc));
border: 1px solid #ccc;
color: #000;
}
Commenting out the lines defining the background or the lines that defined the color resulted in either the login image not appearing, or the image for the button labeled "Log in" appearing too dark.
What would you recommend that I do? Thank you.
ie up to version 8 doesn't have proper support for many CSS3 properties and functions, such as gradient and border-radius.
the library PIE.css is a very effective solution as it goes around most limitations; on occasion it will require either position:relative or zoom:1 be added.
So your code should work. But since it obviously doesn't you may:
fiddle with position:relative and zoom:1 and see if it's solved, or something along these lines: http://css3pie.com/documentation/known-issues/
drop the gradient for IE, and use the background image that's provided. You might want to write the shorthand background in a different order for this to work: despite this being correct as per http://www.w3.org/TR/CSS2/colors.html#background I have to note that FF and chrome write it differently in their inspectors with color at the end
just use a fixed-color background, in the end if they're using IE they don't deserve pretty interfaces.
I can not explain this at all, but I've put a theme selector on my site. A javascript dropdown box that changes the CSS the site is using.
Theme 7 is a theme that had an image of lights in the background. I didn't think it worked with the rest of it so I changed it to a different image using cPanel on my hoster, hit save, and it saved and changed like any other file.
I refreshed multiple times to get the changes, and scrolled down to Theme 7 to see how the new image looked.
Same image as before.
I tried a new image. Same thing.
....I deleted the line background-image altogether, and then quit out of the browser and restarted it.
The lights are still there.
What is going on??? I'm using Chrome btw. In Safari the image was just straight black. I think I've stumbled on a cursed picture.
Here's the css
body {
font-family: Calibri, Arial;
text-align:center;
*/background-repeat:repeat-y;
background-size: 100%;*/
}
input {
padding: 3px;
font-size: 22px;
}
select {
padding: 4px;
}
/*-----CLASSES-------*/
More stuff here
Try pressing ctrl+r to clear Chrome's cache.
It probably cached the css you were using before in your browser (and possibly the image too?) That's the only answer that makes much sense. You can force-clear the browser's cache of the css by changing the call to the file my-styles.css?abcdefghijkl in your html (or wherever it is you are loading up the styles from).... but manually clearing your cache will work too.
You may want to incorporate a dynamic Cache Control... every time you change the theme with javascript, have it change or reload the cache so your users won't have to continuously clear their own cached files when they change the theme... Depending on what server you are using, you can do this with php and .htaccess or .NET and web.config, im not sure if there is a way to do it with javascript directly..?