I can't get colored Glyphicons to print in the color I've set. It's printed black.
<i class="glyphicon glyphicon-time text-success"></i>
I had the same problem when printing normal text but I've added !important in the CSS file like so:
.text-success {color:#688c2a !important}
I've also tried to add it to it's parent but with the same result. It looks good on screen. I am using Bootstrap 3.
CSS media is set to all and I've made sure of no cache with use of PHP ?t=time(); after the CSS-file.
Any ideas on how to get it to work on Glyphicons as well?
Stay away from !important unless absolutely necessary. Bootstrap 3 has a media query for print styles, it's inheriting this style for glyphs:
#media print *, :after, :before {
color: #000!important;
text-shadow: none!important;
background: 0 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
As you can see they are already enforcing !important. Create your own print media query that's more specific using a class name instead of just the asterisk which means everything.
#media print .text-success {
color:#688c2a !important;
}
If it still doesn't override the style then use !important. Key is to use the print media query for something like this.
I got the same problem. Actually, in the Bootstrap stylesheet you have
#media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
...
}
The fragment above comes from original Bootstrap CSS file, do not copy-paste this, it will not solve the problem. This makes every symbol (including glyphicons) black when printing. The only solution I found is to remove this section from the bootstrap CSS stylesheet. After doing this, I am able to print the designed page with proper colors to a PDF file using a PDF printer from my browser.
By the way, this allows to recover all background colors and shadows that are overridden too (they are, however, recoverable using your own definitions with #media print and !important according to other posts).
An inconvenient of such a solution is that once you update your Bootstrap version, you will need to perform the same (manual) operation to keep printing fixed.
UPDATE: As it is proposed by Andreas in his answer, it is not necessary to remove the whole section "#media print". It is actually enough to remove the following line from this section, if you only want to make the glyphicons right-colored:
color: #000 !important;
Ok, so I've tried the suggested solutions but I couldn't get it to work.
I finally had to go to Bootstraps own #media print settings and remove
color:#000 !important
So strange that I only could get the color to print on text before removing that line. I don't know if there is a better solution out there but this is how I solved it.
Thanks for everyones input!
If color is right on screen and wrong in prints, you probably need to find css rules for prints.
Try looking for media-query "#media print" in your stylesheets. Probably you will find the wrong color rule somewhere below it.
the code seem to be right and working find on my end. try to clear your cache and cookies of the browser.
and if still the problem arises try to change it with jquery
$('.text-success').css('color', 'red');
Printing style-sheets can have such issues. Which browser are you using to print?
#media print and (color) {
* {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Try adding this code to your style-sheet. Also, please check your format and printing options in your browser before you print. hope this helps.
Edit:
If you don't mind having css in your html, you can try adding these styles in your html <style> tags.
DO NOT EVER modify Bootstraps less files, it will end up being a maintenance hell.
Most likely your problem is that the icon will be rendered to i:before and not being the content of i element.
So have your own css to be:
.text-success:before {color:#688c2a !important}
Better overwrite the css instead of changing vendor files;
#media print {
*, *:before, *:after {
color: inherit !important;
}
Related
In Bootstrap tutorials, when people create their own Sass variables in a custom style.scss, I see lots of them using trailing !important.
If you want to see an example of what I mean, start at 13:45 here:
https://www.youtube.com/watch?v=MDSkqQft92o&time_continue=24&app=desktop
.navbar {
width: 100%;
background none !important;
#media(max-width: 34em) {
background: black !important;
}
}
But then other code in the .scss file doesn't use !important. No explanation of why that is.
Anyone have some suggestions?
!important means that the style preceding it will be "forced" onto the element, despite what other styles may set on it. For example:
.element {
font-weight: bold;
}
.custom-class {
font-weight: normal !important;
}
If you have an <span class="custom-class element"></span>, it will be displaying a font-weight normal, not bold.
! important guarantees (or at least it tries) that the rule you're trying to apply is more important than others. So it overwrites other rules that might interfere with the new one. ! important is not necessary if the rules are ordered correctly because the last rules prevail over previous ones. ! important must be avoided as much as possible. Use it only if it's really necessary.
I try to override Bootstrap styles and all works perfect. But I noticed that when the user presses a primary button
<button class="btn btn-primary">Test</button>
It shows an blue outline and I can't remove it. I tried to override a class:
.btn:focus {
outline: none;
}
But it doesn't work. It still shows this f***ing blue outline. And I can't find where it declared because I am a noobie in CSS.
P.S. If it can help I use the Chrome browser v.56.
Not the best way, but try !important.
I guess your bootstrap-styles are loaded after your other styles so you get overwritten.
EDIT: also consider using more precise selector´s would be a better way to go (see comment)
also check this
There are some ways to achieve that. These ways intended to uprise specificity of selector. The easiest way is to use !important for css rule:
.btn:focus { outline: none !important; }
Try this:
Worked for me. It's box shadow
.btn-outline-primary:focus, .btn-outline-primary.focus {
box-shadow: unset !important;
}
I have been testing Disqus and noticed I can hardly see the comments I have entered. They seem to be in a white/pale grey font.
Is there any way to change the font color to black
here is the link
http://w3code.in/2015/10/send-private-message-using-facebook-api/
I added this snippet to the main css file to fix it for good:
#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #ffffff;
}
Adjust the color values to your preference.
But for Chrome, the issue might be the order of execution. Javascript is executed after the CSS, which may be overwriting your customization. You'll have to change styles using javascript and then put it after disqus script.
it's really easy to do:
#disqus_thread {
background: red;
}
You can use elements' inspector to find classes and ids. Have fun!
I am trying to use .less to modify a Joomla Gantry template. The text I'm trying to change with the "aa" class has linked audio, so the whole text shows up in blue color, which I am trying to change to dark brown. Here what I'm working with in my .less file:
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507;
}
It's very simple, but I couldn't make the cursor change before without "progress !important", which doesn't make sense to me.
Now I am trying to change the color, but I can't find a way. Is there something important that I'm missing in trying to change these styles?
I think #seven-phases-max provide you the right answer in the first place. !important in LESS has the same meaning as in CSS. You will use !important to overrule the CSS specificity rules. In most cases it is not a good idea to use !important, try to find the a selector with a higher specificity instead. Read also: http://css-tricks.com/when-using-important-is-the-right-choice/. One reason to use !important mentioned here will be utility classes. Maybe this is why you choose to use it here too.
progress sets your cursor type, see http://www.w3schools.com/cssref/pr_class_cursor.asp. Cause you already use a url() for this, progress should not have any effect (auto is the default style).
Note if you need !important to set your cursor, you probably also will need it to set your color: color: #2E1507 !important;
When using a mixin in LESS you can set the !important; for all your properties once like:
.importantaudio(){
cursor: url(/images/listen.cur), progress;
color: #2E1507;
}
.aa{ .importantaudio() !important;}
CSS (result):
.aa {
cursor: url(/images/listen.cur), progress !important;
color: #2E1507 !important;
}
In Chrome twitter bootstrap select elements cause a bug where it looks like the shadows are stretched vertically.
That image is from the Twitter Bootstrap site itself so it looks like a bug with the framework (although I've seen comments in the github repo that they're not too concerned about print issues). I've tried setting all effects classes to none but that doesn't seem to remove the glitch.
I still need Bootstrap for the layout but I guess I could make a custom print version without form styles but I'm hoping there's a quick fix instead.
thanks!
i had the same problem and just rewrote this css rule:
#media print {
* { background: transparent !important; }
}
to:
#media print {
select { background: #fff !important; }
}