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.
Related
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.
This is a pretty basic question but I can't figure out why I can't change the css from the tabs template in Meteor. https://github.com/meteortemplates/tabs
I've installed the template and I am trying to change the css from the "active" tab. When I do inspect element, I'm seeing that the css file it's using is a "template_tabs.css" instead of the one I have in my root directory. I have no idea where this file is. I did a search in all my directories and can't find it.
Shouldn't my main css file in the root directory override this? If not, how do I edit this template_tabs.css file?
It likely had to do with file load order: http://docs.meteor.com/#/full/structuringyourapp You want your custom CSS files to load after the package CSS files have loaded.
Alternatively, you could mark your CSS with !important e.g.
div.sample {
background: none;
width: 200px !important }
In this example width will be set to 200px no matter when the file loads. I am not quite sure how it deals with conflicts if the style was marked !important in multiple files with different values.
I think it would be best not to mess with the original package CSS as that will be overwritten when it updates.
i am working on helpdesk system and i am creating this system in mvc.
i am designing this system in bootstrap framework.i have created my master page with bootstrap template.
i am using bootstrap.min.css file for bootstrap design.
so my question is can i use my own css for my render body design and can i create my own css file and add those css class and so my website will be responsive ???
or should i have to write those css in bootstrap.min.css file.
but when i am adding my own css class in bootstrap.min.css then there is no effect of css.
can u guys me some suggestions please????????
you should write your own css and add link. don't change bootstrap.min.css.
and your site will be responsive
Bootstrap.min.css is only for the default styling of spans and rows using Bootstrap. You can and should write your own css file to override any of the basic styling, instead of modifying Bootstrap.min.css.
You can always use your own css independently of the css of the framework "bootstrap", of course.
Write the properties in the bootstrap.min.css is not well. It's more clean to write your property in a new css file or directly in the html tag of which you want add your property with the 'style' attribute.
Example :
<a style="text-decoration:none;color:red;">
Now, if you use your own property css, it can happen that some properties is applied to your component by default because you use bootstrap. To use your property value and not coming from 'bootstrap', you have to use "!important".
Example :
color : black !important;
Do not edit the bootstrap.min.css file. Use that as your base and then include your own CSS roles after it so that any changes you make will overwrite the bootstrap.min.css file leaving you with the code that you customized.
I've added a TrustPilot Widget to my Website.
I want to overwrite the current stylesheet being imported from TP. I thought I'd just add a class around the div and then style it in the css with the use of !important however all attempts have failed.
I was wondering if anyone has a solution for this?
You have to manipulate it through javascript as they write the sprite image in the element itself, witch overrides any other style rule.
a simple jQuery
$("#tp_widget div").attr("style", "");
here's a live demo on how to custom the top header: http://jsbin.com/usadit/3/
and you can edit it through the /edit url as: http://jsbin.com/usadit/3/edit
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.