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.
Related
I want to override a CSS setting on a form. I'm using bootstrap and I have my own custom CSS file that I have to do the override.
However, I see that it does not bring in my custom css file and does not reference the Bootstrap version rule for .form-control. Instead it is using a "forms.less" file that I don't even know where it is. It's not in my content folder. Though the pic indicates it is in the Contents\Less folder.
Here is the Content folder.
Here is the bundling. My custom site.css follows bootstrap.
Here is my custom CSS file and the .form-control rule where I am overriding the witdh.
You have to Overriding using the !important.
.form-control{
width: 0px !important;
}
for more details please check below url:
https://www.w3docs.com/snippets/css/how-to-override-css-styles.html
If you want to override your custom css , then use it after bootstrap css.
I had to add this at the bottom of my view. #Styles.Render("~/Content/css"). I thought having this in the _Layout_cshtml would take care of it. So not sure why I have to do it twice.
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.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I am injecting some html + css into every page from my firefox plugin. But this styles is sometimes getting overridden by the style sheet. I want to stop this behavior.
I know this can be solved by some css tricks. Adding !important for instance. But is there a way available in firefox or xul to do this easily?
Using !important alone is not enough, the webpage could do the same and still override your styls. You can use the Stylesheet Service to register a user stylesheet. If you then use !important then web pages will no longer be able to override your styles.
Note that user stylesheets are always global and apply to all webpages as well as browser's own XUL documents. You can restrict them to particular webpages using #-moz-document.
#MEGA_PLUNGIN a {}
#MEGA_PLUNGIN span {}
#MEGA_PLUNGIN div {}
#MEGA_PLUNGIN table {}
...
Not the best solution but right...
To me, this is one case where you would certainly use !important.
That said, you can try to use specificity to ensure your styles are being set.
So, make sure that you are targeting the elements are precisely as possible, in order to override those styles that are not as specific.
For instance, if you have this structure
<body>
<div>
<h1 class="something">
<a href>
The site's styles may target
h1.something a{
You should aim to do this
body div h1.something a{
which is more specific and would override the above styles.
The other thing you might be able to do is append your styles just before the </head>, which would make them appear last in the cascade, and, if they are equal, will be applied.
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.