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;
}
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.
Really small thing, but I've got these calendar icons on my Joomla front-end edit page, on publishing buttons. I'm using the Unicode character U+1F5D2 for this, but I can't seem to change its color with CSS. I'm trying to make it white, the browser inspector says it's white, but it's clearly not.
See example here
I don't know if Unicode is supposed to do this, and I've never had a problem with it until I used this particular character.
The character is called by a :before on a span element with class="icon-calendar". I've tried changing the color attribute on several different levels of the element, including the :before and the span itself, but none of them take effect.
#adminForm a.btn,
#adminForm button.btn {
background-color: #0e71b8;
color: #ffffff;
}
#adminForm button.btn:before {
color: #ffffff;
}
Anyone know if this is supposed to happen and/or how to get around it?
I had a similar problem. Looks like some unicode characters have the color, and outlines baked into them and can't be changed by css.
So the options are:
Find alternative unicode character that can be changed in CSS
Use font icons
Use an image
Seems to work using the HTML Entity.
* {background: #000; font-size: 1.4em;}
.cal {color: #fff;}
<span class="cal">📅</span>
Updated for :pseudo
You should have mentioned the pseudo in your question.
Looking at your CSS you arn't targeting the :before pseudo
#adminForm a.btn:before,
#adminForm button.btn:before {
color: #fff;
}
Bart,
Problem without font-family or depend your Base CSS Normalize, but you can try ur code "Fonts Googleapis" is work font-face to change a color. Sorry bad english.
See:
http://codepen.io/KingRider/pen/QGeMoQ
Why not try plugin 'Font Awesome' is best
http://fontawesome.io/examples/
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;
}
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 have apply a classname "bSelect" to a Link element, it could apply background image but not converting the link into white?
.bSelect {background:url('../../img_assets/bs1.png') 0 0 no-repeat;background-position:center;color:#fff;}
The most specific rule will always apply, so if you have the following somewhere:
a.bSelect { color: red; }
Then it will always take presidence over a less-specific rule, like:
.bSelect { color: white; }
Adding "!important" to the end of the rule forces it to be applied (though again, if you have multiple "!important"s, the most specific wins again).
It's usually a good idea to try and avoid "!important" and instead figure out why the rule isn't being applied. There ae built-in tools in most browsers to help you trace which CSS styles are being applied. However, "!important" works and is often easier than trying to rewrite CSS rules to make them work.