It's my first time using a bootstrap theme with my ASP.net web application, thus I've been having some difficulties with the CSS editing.
I got this bootstrap template online, and in order to accommodate my needs I want to change the color of the footer div to another color. Here's the code in html
<div class="footer_bottom">
<div class="copy">
<p>Copyright © 2014</p>
</div>
</div>
and here's the css
.footer_bottom {
padding: 2em 0;
/*background: #7cc4cc;*/
background: #5DBCD2;
}
Basically, I wanna change the color of the div from #7cc4cc to #5DBCD2. When I run my page in google chrome and select the inspect element option the code supposedly works, but in the css properties backgroud: #7cc4cc is slashed out above the line background: #5DBCD2 (which is not slashed out) but the color of the div shown is still #7cc4cc. In short I can't change the CSS color properties of the theme for some reason. Any help would be greatly appreciated.
You could learn a lot by reading about CSS Specificity. CSS is about rules on top of rules, so what I think is happening, is that some rules are getting applied over your:
.footer_bottom { background: #5DBCD2; }
Check for any rules that have higher specificity and make this .footer-bottom declaration higher than that.
The !important solution in the other answers is not something you want to do. Over time these things are going to bite you in your ass, as they blow your specificity through the roof.
Use !important to override bootstrap styles:
.footer_bottom {
padding: 2em 0 !important;
background: #5DBCD2 !important;
}
You are trying to override the bootstrap css so you need to add !important to your background color change like so :
.footer_bottom {
padding: 2em 0 !important;
/*background: #7cc4cc;*/
background: #5DBCD2 !important;
Related
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.
For whatever reason, I can't seem to put the right words in my search engine. It seems like a really easy thing. Let's say I have simple markup as follows:
<div>Hello!</div>
And I apply the following styles:
body {
background: blue;
}
div {
background: green;
width: 100%;
}
Now ideally, I'd like the green to stretch across the entire screen, but for whatever reason theres a buffer between the ends of the window and the div, that are blue. When I go to inspect the div, I note that there is 0 padding/margin and just the content box. When I inspect the HTML element. it's just the content with no padding/margin as well.
I guess my question is, how can I get rid of that blue buffer area between the html and the containing div? The only way I have successfully done it, is negative margins on the div, but that seems hacky. Any thoughts?
Even without any CSS applied, every browser does some default styling of elements. This includes margin on the body element. To overwrite these default styles (which you can inspect via your browser's developer tools, if any - for example via F12 in Chrome), you just set custom CSS rules accordingly. For your specific problem, you should add margin: 0 to the styling of the body tag.
Now, since every browser has different defaults, many developers decide to reset the styling entirely before applying their own. This can make for a more consistent and streamlined CSS developing process. There are several of these reset stylings available, a famous one being Eric Meyer's CSS reset.
Body element has default margin at every direction 8px long, so just rewrite this default.
body {
margin: 0;
background: blue;
}
#Edit:
...also It's great example to practice 'Developer Tools' using. There's nice guide: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
You should consult the CSS box model when you have questions like this one. You just need to remove the margin from the body.
body {
background: blue;
margin: 0px
}
div {
background: green;
width: 100%;
}
<div>Hello!</div>
I have this css from bootstrap.min:
.rew {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: 1050px;
}
.rew2 {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: auto;
}
And my div like this (I've red examples from question and answer in stackoverflow):
<div class="rew rew2">
content.....
</div>
The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.
******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file
The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".
*Huft...I'm so confused why it's not working. I need help from you guys.
Thank you,
Best regards,
Kris
Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.
CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.
In other words:
First of all include bootstrap.min.css, then your own .css file.
Let's assume you've got this markup
<div class="foo bar"> </div>
You could style it through the 2 classes foo and bar.
.foo {
color: red;
}
.bar {
color: blue;
}
Using this would end up in the blue color, according to the declared order.
Let's even try to be a bit more specific.
You can also overwrite rules by using some more complex selectors.
.foo.bar {
color: black;
}
The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.
Conclusion
If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.
A little hint at the end:
Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.
Don't customize bootstrap.min.css create your own css file, In that you can write your own css as you need.As per you requirement include media query for smartphone in that give width: 100%; for that element.
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.
I'm using PrinceXML to create PDF reports in my .Net application. I've created the report in HTML and it has few areas with background color. But when generating the PDF report using PrinceXML, those background colors are missing. I've tried replacing the background color with background image with width and height. Still they're not showing. It's like it has completely removed that CSS area.
Anyone came across any issues like this before? The PrinceXML documentation mentions that they support the background color and image.
Background Color
Prince seems to recognise border-color, but not color (text color) or background-color or background-image.
You can simulate a background color by using an after pseduo-element and a thick border. Prince renders this correctly.
CSS
.bgRED:after {
content: "";
display:block;
border-top: 25px solid red;
margin-top: -25px;
}
.bgRED-ib {display: inline-block;}
HTML
<p class='bgRED'>This is a p with a red background</p>
<span class='bgRED bgRED-ib span6'>This is a span with a red background</span>
This requires that you know the height of the element in pixels to make it work.
Background Images
I'm trying a similar thing with making a background image 'water-mark' across the whole page
Prince ignored CSS like this:
background-image: url(HUGE_sunset.jpg)
However I managed to get it to work using something like this:
HTML
<img class="behind" src='HUGE_sunset.jpg'>
<div class="infront">
<p>with the lights out, it's less dangerous, here we are now entertain us </p>
</div>
CSS
.behind {position: absolute; width:100%; height:100%; z-index:1;}
.infront {position: absolute; z-index:500;}
In the Prince docs it mentions that background-color defaults to transparent, and that color defaults to black. On a whim I tried adding the !important directive to my color/background-color styles and it worked.
I do not know what Prince has applied as its default style selectors in these cases, but it appears that it either applies its base styles after (or with some other more specific selectors) that necessitates this unpleasant !important war.
Without any way to inspect the applied styles it's a bit opaque, or I'd definitely recommend going a different route. Fortunately in my case the styles I need are specific to the Prince-generated pdf only. If you have styles you need to use both for Prince and web, I'd recommend posting it as a bug in the Prince forum and hope they fix it.
Here is a css of backgorund image for Prince Pdf
<style>
#page{
background: url(background.png) #ffffff;
-webkit-background-size: 100%;
prince-background-image-resolution: 72dpi;
background-position: 0px 0px;}
</style>
by the way if you want to use bootstrap , use version 3.7