I am making a django web application where I have base.html and base_bootstrap.html files. My base_bootstrap.html file contains the following two lines to use bootstrap CSS:
<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
Is there a way for me to modify the following css in order to change the #999 into a # without creating a separate css file?
pre {
border: 1px solid #999;
page-break-inside: avoid
}
You can always override external css by using either internal css on the page or the inline css specifically to the HTML element.
Example:
.card
{
margin:5px;
padding:25px;
border: 1px solid #999;
display:inline-block;
width:50px;
background:#ddd;
}
.card{
border:2px solid #f00;
}
<div class="card"></div>
You can also use !important to override any css with the HTML element.
Example: border:2px solid black !important;
DEMO
Refer to: https://css-tricks.com/specifics-on-css-specificity/
Use Internal CSS
You can override the color code by declaring it again in your HTML page again.
pre {
border: 1px solid #999;
page-break-inside: avoid
}
pre {
border-color:#878;
}
Your pre tag have now a border-color at #878.
But, if you can change the nativ color code, change him.
Hope this will help you.
You can download the the SASS version and modify the parts you want or include a custom file with modifications / extra styles you want, then rebuild bootstrap with the gem installed or create your own Grunt/Gulp script to build the SASS to CSS.
https://github.com/twbs/bootstrap-sass
BS is originally built in LESS which would work too.
Related
My web application doesnt currently use Bootstrap or any other framework. I am now looking at making it more polished and realizing that the effect I want to achieve is quite Bootstrap like (i.e rounded buttons).
So if I now add Bootstrap to my website I have two questions
Will it leave my website unchanged until I start referring to Bootstrap components.
Can I use Bootstrap components without have to use the Bootstrap grid system
Can I override Bootstrap using CSS or do I have to use LESS which I dont understand
Q 1. Will it leave my website unchanged until I start referring to Bootstrap components.
Ans: Its totally depends on what classes, you have used in your HTML.
For example if you have used class="btn" and then add bootstrap to your app, it will defiantly try to override the CSS, because Bootstrap has that class defined in its css file.
Q 2. Can I use Bootstrap components without have to use the Bootstrap grid system.
Ans: You can use Bootstrap components without using its Bootstrap grid, but if you are using bootstrap best is it properly,
Because Grid system is something which provide your web app responsiveness.
Q 3: Can I override Bootstrap using CSS or do I have to use LESS which I dont understand
Ans: Yes you can.For example
If you already have class
`.btn-primary{
color: #eee;
background-color: #337ab7;
border-color: #2e6da4;
border: 2px solid transparent;
border-radius: 2px;
}` in your app.
Then you added bootstrap and it also has this class in its library like:
`.btn-primary{
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
border: 1px solid transparent;
border-radius: 4px;
}`
and overriding your class.
So what you can do is, just use !important in your css for attribute which is conflicting. Like:
`.btn-primary{
color: #eee !important;
background-color: #337ab7;
border-color: #2e6da4;
border: 2px solid transparent !important;
border-radius: 2px !important;
}`
Now the HTML engine will always pick your CSS
Q3: you can override it with higher specificity. That means if the your use the class btn from bootstrap you can add your own own class like my-btn and then reference it in your css like
.btn .my-btn{
color:#123456;
}
Hope that helps
When upgrading to OpenLayers 6.5, the shift-zoom rectangular border does not show anymore. The zoom function works in itself, but the border is gone. Any ideas?
The "border" is defined in the ol.css stylesheet file found in the css/ directory under openlayers. So be sure that your html includes that with something like:
<link rel="stylesheet" href="/path/to/css/ol.css" type="text/css">
or define the sytle in-line like:
<style>
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
</style>
I have some styles in my custom CSS to override bootstrap CSS, but it seems they can not override bootstrap CSS. When I checked the styles using chrome developer mode I can only see bootstrap styles being applied!
Here is a screen shot of my chrome bootstrap:
Here is what I have in my css:
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border: 10px solid #b03636;
}
.panel-heading {
padding: 10px 15px !important;
border: 10px solid transparent !important;
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
Am I missing anything?
Thanks,
One thing you should check first: Go through all the styles and see whether the ones in your custom CSS are found at all. If so, they'll likely be crossed out to imply that they were overwritten by the bootstrap styles. If not though, that means that for one reason or another it's not finding your styles at all, and that's where the problem lies.
If they're definitely being overwritten, I might also recommend making sure that the custom CSS is being called after the bootstrap files.
Link your CSS file to HTML properly and import after bootstrap CSS like below so, you no need to write !important for all things to overnight.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first
First make sure your custom CSS is loaded after the Bootstrap CSS file and if it does not help, Use !important attribute with custom CSS to force the overriding.
I am using Bootstrap Modal Plugin
$("#summaryFileDisplay").html(data.summaryfileContent);
$("#myModal").modal("show");
In above code data.summaryfileContent contains html and css data which i am rendering into summaryFileDisplay id
Modal rendering is fine, but it make changes in the parent CSS as well.
How can i avoid the same
Add .modal-dialog before all the styles rendering in modal. So it will make styles exclusive for Bootstrap dialogs.
/*
e.g.
Current CSS code.*/
.lineBorder {
border: solid 1px #000;
}
/*Change above to*/
.modal-dialog .lineBorder {
border: solid 1px #000;
}
I'm using the most recent version of Wordpress in combination with a theme.
On that theme there is some css code I don't need/want and which makes my customized page look bad. This would be one example:
#content table {
border: 0;
margin: 0 0px 24px 0;
text-align: left;
width: 100%;
vertical-align: top;
}
#content tr {
vertical-align: top;
}
So far I always commented out such parts directly on the style.css of that theme. But like that I'll always loose my changes whenever I update that theme.
Now I've started to bring all my changes into the custom css directory of that theme. This works good for changes, however I have no idea how to remove the part I'm usually commenting out.
Any idea how to do that?
This question aims also to such changes where I'm commenting out parts of that style:
#content tr td {
border-top: 1px solid transparent;
/*
padding: 6px 24px;
vertical-align:top;
*/
}
Hopefully you understand what I mean :)
You need to create a child theme and then import the functions.php and style.css in it.
Then add your changes here.
You will never lose it whenever you will update your theme.
Please let me know if you want code too...
Since you are using a separate custom css file, commenting will obviously not work as your main css file will still contain some of the same style sets. So, to remove a style set entirely do the following on your custom CSS file.
#content table {
display:none!important;
}
You can do this for each style set or add them all together, separating them with a comma. i.e.
#content table, #content tr {
display:none!important;
}
In regards to the second part of your question, you can't remove just part of a style set but you can overwrite it by continuing to use the !important declaration and using opposite values such as changing padding from 24px to 0px if you don't want any padding. You will need to realign to your preference or set it to baseline which is the default. (Again, this goes in your custom css file)
#content tr td {
padding: 0px 0px!important;
vertical-align:baseline!important;
}
Notice that I didn't include border-top: 1px solid transparent; because your main CSS will still apply this part of the style so you only need to overwrite anything you don't want or wish to change on your custom CSS being that there is no way for you to comment style sets in the same manner as you would using a single CSS file.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.