0

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?

user3073278
  • 11
  • 2

1 Answers1

1

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;
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thanks for the help. With this code the cursor still changes but the color doesn't. I'll get to work finding the selectors and post the solution once I have it. – user3073278 Dec 09 '13 at 03:05
  • could you create a fiddle or bootply, with your css / html to show the problem? You will need `.aa:link` in stead of `.aa` maybe. – Bass Jobsen Dec 09 '13 at 07:50