I'm attempting to use the Stylish extension on the Chrome extensions page.
But for some reason it's not working. I've attempted to Google this, but I only get answers about overriding CSS with an extension not overriding the Chrome extension page.
Any ideas why it's not working? Or how I can force it?
I initially tried this to style a specific extension without !important. Then I tried it with !important to force it.
#fjnbnpbmkenffdnngjfgmeleoegfcffe {
display: none !important;
}
And then I tried on a general class, just in case I got the extension id wrong. But still it wouldn't work.
.extension-list-item-wrapper {
display: none !important;
}
Thanks.
All Chrome extensions, including Stylish, cannot modify content on chrome:// URLs.
If you want to apply a style to chrome://extensions/ (actually, chrome://extensions-frame), edit the user stylesheet located at path/to/chrome profile dir/Default/User StyleSheets/Custom.css.
This style sheet is applied to all pages (including the devtools), so make sure that you choose a sufficiently specific / unique CSS selector.
Related
I've embedded a widget on my page that links to this javascript file:
https://widget.zola.com/js/widget.js
The widget is generating a header section which i'd like to remove.
https://widget.zola.com/v1/widget/registry/taylorandjaredseptember7/html?:1
I've inspected the element and was able to target the section and add a display: none to it. That worked, but when I copied the code into my CSS style sheets, it was not working. I even tried adding !important to it with no luck.
Is there something obvious that I'm missing?
This is the code I added to my stylesheets.
.registry-header {
display: none !important;
}
I also tried targeting the classes it was nested in, like so:
.row registry-header-section .col-xs-12 .registry-header {
display: none !important;
}
Other background info that might be helpful:
- My site is a Wordpress site using the Divi theme.
Establish where the current rules are being generated from in the Document Tree and then use this question and answer to find how to effectively overwrite these rules.
Possible Routes:
You may need to use an id tag on the element and apply the style to the #id, because this will overwrite .class level styling.
You need to be as specific as possible with your targetting; your second example is better than your first.
Remember if the widget uses just a JS file then it's probably editing the CSS via Javascript inline, so it will be doing so inline, therefore you may need to add the style adjustment overwrite inline into the page itself. Set your <style> block to appear as late in the <head> as possible and add !important to the elements required
Create your own Javascript script to load after their widget script and to force CSS to adapt as you want it, with javascript or jQuery code blocks.
Crazy idea.... but it might just work.
You would first need to export from your Browser Inspector the current applied styling generated by the widget and save this to your own (domain-local) CSS file.
You can then use Content Security Policy to specifically block 'unsafe-inline' and 'unsafe-eval' in your style-src: part to block javascript and other inline styling from being applied to the page.
Replacing this with your export CSS style sheet should avoid Javascript/inline styling and allow you to tweak the styling as you need by simply editing your CSS code. You ca fine tune this depending on your dependancies and codebase.
So I got my custom app.css in my project and I'm using bootstrap template. Now when I create new button style for example in app.css it's accessible everywhere (on every page since I got master template and other pages are extending it) but when I override bootstrap theme in app.css it's not working. When I use same code to override bootstrap on top of the page using <style> tags it's working. app.css is included properly and after bootstrap.css so any idea what I'm doing wrong ?
Try a cache refresh, for me in Chrome, I use Ctrl+Shift+R.
If this doesn't produce any results, use the inbuilt inspectors on Chrome or Firefox to view the attached properties to the element you are editing. If the app.css is overriding the bootstrap.css, you will see something like the below image, showing the app.css is above the skin-purple.min.css meaning the app.css was the latest to be loaded.
I would say that there is a hierarchy, try to include the bootstrap.css after the app.css, you could also give those css attribute an !important like so:
#bla {
display:none !important
}
But that is not a good practice I think, it may be ok if you do not override alot of the bootstrap.css
You could also try this:
http://bootstrap-live-customizer.com/
to customize your bootstrap.
It most probably is a style precedence issue. I found this article very useful to at least understand what goes on with style precedence and what specificity is.
In your very case it may be helpful to simply use a class selector such as
.mybutton button{
color: blue;
font-size: inherit;
...
}
and give your buttons the attribute class="mybutton". In the class definition you may freely override whatever you want and also let other properties be inherited from Bootstrap.
There is also the !important rule. However, it is usually referred to as a bad practice, since it breaks the normal cascading rules and makes debugging an incredibly painful task.
I am using conditional comments to link to a css file (let's call it "IEonly.css") if the IE version is less than 8. I am trying to override some properties in the regular css file. Strangely enough, IEonly.css will set new css properties correctly, but it won't override the properties in the regular CSS file!
(I am trying to make this work for IE7).
Help!
EDIT: I added an !important after the css style to see if it would help. It didn't.
Given multiple stylesheets (even if some are hidden from other browsers with conditional comments) then the normal rules of the cascade will apply.
Make sure your selectors are suitably specific, and that you apply the stylesheets in the right order.
If you are using the same selectors in both stylesheets then you should be fine as long as you place the conditional IE stylesheet after the regular stylesheet. If you do that and your IE sheet isn't taking then you might need to write more specific selectors.
#sidebar #nav li a { }
instead of...
#nav li a { }
or
li a { }
Don't forget that you can also use the !important rule to override CSS definitions. Here is the W3C documentation on that rule.
Perhaps you can reorganize the stylesheets to default to IE styles and use an if !IE conditional for "good browser" overrides.
Based on my own experience of similar problems I would guess that there are some bad or missing character lurking somewhere in your IEonly.css file. They can be a real pain to track down, so do the following:
Temporarily remove all CSS from IEonly.css, except for the part that you will use to override the normal CSS. Test to see if this works. If it does, continue to paste the code back into the file, in sections as you see fit. Hopefully you'll find the problem.
If your override did not work when only that part of the code existed in the file, make sure that you have the correct selectors and that the specificity is OK.
You can also try reading http://www.w3.org/TR/CSS2/cascade.html#important-rules for more information.
Can you publish some code for us to look at? That would help.
I added a class to the element and referenced it on the IEonly stylesheet with the class selector and the regular style sheet without. This caused the IEonly style declaration to override the regular one.
This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here.
So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari.
Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com:
#-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work.
#namespace is quite confusing and I've tried every variation I could think of. None worked.
Safari does not appear to support the #-moz-document rule, which would explain why that wouldn't have worked for you. In Firefox, the following stylesheet will work:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("stackexchange.com"), domain("stackoverflow.com") {
/* your styles here */
}
However, in Safari 5, there is an extension called User CSS (note: link is to the developer's website and not to a page in the Safari Extensions gallery; caveat emptor) that will allow you to apply a single user stylesheet to multiple sites. (It seems to be the rough Safari equivalent of Stylish.)
With respect to your last comment, I think you're right: there still seems to be no way to do this with only CSS.
have you tried setting a <link /> src dynamically based on the document.domain? If you're using javascript, that is. This will let you set the src of the link tag to mydomain.com.css or myotherdomain.com.css
body
{
font-family: 'Lucida Sans Unicode';
font-size: xx-small;
color: #008080;
}
on the top of my style sheet, and non of those specs are taking affect on my page, nothing, i tried doing it on td, table, tr, span, div just in case i needed to be more specific, but nothing is working, i want to make global changes without having to change things one by one and i can't seem to find a solution, any ideas?
thanks - your input is appreciated
ps: more info for those interested:
i have a standard mster page, and content pages, listview control that populated data from a database, but all the elements in my controls of concern is html elements (im sure some would be runat="server") the style is linked correctly as well, as other styles on the style sheet work...
here is the code where the text is not changing..
HTML TAGS ARENT DISPLAYING IN MY COMMENTS FOR SOME REASON...???
Clear your temporary files and try restarting the browser - chances are that its using a chached copy of the page.
There is nothing syntactically wrong with that code. The issue must have something to do with how it is being applied to the HTML (and thus with some code or HTTP response header that you haven't shared with us).
Hard to say without seeing the html and style sheet, but perhaps later declared styles are "overwriting" your body style?
If you can't see these changes they are being overridden by other styling applied somewhere else.
The easiest way to debug what css rules are being applied to elements on your page is by using a tool like the firebug extension available for firefox (available from http://getfirebug.com/)
Once you have this you can select an element and see what has been applied by what rule - and then you can override that rule!
There is also an IE dev toolbar, and developer extensions for chrome and firefox that do the same thing.
Hope that helps.