SOLVED LESS misunderstanding?
-
-
- Luke W
- Rocketeer
- Posts: 51
- Thanks: 8
-
Hi All
I have a compoenent that outputs buttons. It styles the button with the .btn class.
I want to style all my .btn elements to look like the Rockettheme .btn-primary button.
In LESS, I thought I'd be able to do the following:
.btn {.btn-primary !important;}
But it doesn't change the styling og the button.
Yet the following DOES change the styling of the button:
.btn-mine {color:green;} .btn {.btn-green !important;}
What am I missing? - Last Edit: 10 years 9 months ago by Luke W.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
1. that is invalid CSS that you are writing
2. It's not LESS your writing so you should be using a custom CSS file.
You will need to identify why the styling is being overwritten and what CSS you need to write to restore it's look using firebug.
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Please do a screengrab of your problem and annotate to make it clear.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke W
- Rocketeer
- Posts: 51
- Thanks: 8
-
Thanks for the reply MrT.
Before we go on - can you tell me why it's invalid LESS and why I should be using the custom CSS file?
AFAIK
.red12 {
font-size:12px;color:red
}
.class {
padding:20px;
.red12
}
Is a perfectly valid LESS mixin.
It compiles as expected here: leafo.net/lessphp/
I am simply trying to override all the attributes of .btn with .btn-primary WITHOUT needing to copy the entire rule for .btn into my custom LESS file.
I suspect - that because the rule for .btn is NOT contained in my custom LESS file, it's not getting compiled when I do this .btn {.btn-primary !important) (note this is a valid LESS mixin).
ADDED:
I do know how to get it to work - by defining .btn with all it's attributes in MY LESS file. But I don't want to do that - I just want to compiler to pick up the .btn rule from wherever it's already defined. In exactly the same way I can use variables I haven't defined in MY LESS. For example
.class3 {background-color:@blocks-default;} - Last Edit: 10 years 9 months ago by Luke W. Reason: spelling, adding
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Ok, sorry about that (new glasses on the way this week
).
You do have semicolons missing - but no matter.
In which filename did you put this LESS code please?
Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
MrT wrote:
In which filename did you put this LESS code please?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Luke W
- Rocketeer
- Posts: 51
- Thanks: 8
-
Site is here:
akaluke.selfip.com/adcv
To get to affected page:
Use the members link in the main menu to log in to front-end
This image is hidden for guests.
Please log in or register to see it.
Use the Galleries Administration link to go to the galleries administration page
This image is hidden for guests.
Please log in or register to see it.
I want to make the buttons on this page look like button styled with .btn .btn-primary.
Make this:
This image is hidden for guests.
Please log in or register to see it.
look like this:
This image is hidden for guests.
Please log in or register to see it.
Less is here: akaluke.selfip.com/adcv/templates/rt_met...template-custom.less
* Please ignore the untidiness. I'll clean it up later *
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
your custom LESS file does not contain any references to .btn class? on what line is this code?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Try doing that in main-style-custom.less instead.
I'm no LESS expert (I still prefer good old CSS) - so I could help with a CSS override instead if you could just point me at one of your pages that already is using buttons of the style that you want?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.063 seconds