See what “Less” file in Firebug?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Rocket Theme us the “Less” compiler on newer template.
Great but not great...
Now to be able to change something simple like the padding of the logo (as example) you have to fight those “Less” file by trying to find a css rule in a custom css file (template-name-custom.css) that will override the less/compiled.css.
To me, this is highly inefficient as you loose precious time to do so and doubling all kind of css rules (if you finally find a way to override the existing css) — taking away any advantages that “less” can give you.
Now, lot of important and basic rules for any designer to modify a template are placed in the “less” compiler making any basic modification difficult... Grrrrrrreat...
My advise to RT will be to put important and stable gantry and template css and NEVER put rules that are needed for basic and normal customization like — Logo, Background, Typography, Module styling, body styling etc.
That kind of doubling is non professional, time consuming.
The only way to do it right is to take out the css rules in the less file that you need and transfer it in a custom.css file or in a custom less file... But for this, you need to learn Less syntax...
Great, now to do simple customization, that was so simple before I will have to fight with that...
And the worst of all, you cannot know, by using Firebug, where the compiled css rule come from and what less file is the originating.....
Personally, I find that imposing that kind of system and including in it basic needed css for the customization of the template make RT products more rigid, difficult to work with and lot less appealing.
One thing that can somewhat save the day is this Firebug plugin.https://addons.mozilla.org/en-us/firefox/addon/fireless
This plug in permit, in Firebug to pinpoint was less file is generating the selected css in Firebug. Finding easily the less file permit to take out the rule or to modify it rapidly .
PLEAAAAASE Can somebody investigate this, I try to install it but It didn’t work because You need to do things I do not understand, seem simple but...
Anyway I contact the Dev., Hopefully he will contact me to help and I will come back here to explain.
I have another way to bypass all that but it need to much work for most people — I really prefer the plugin thing — If RT want to use Less, please help us here or develop your own less/firebug plugin.
I develop only (mostly) heavily customize template. If RT make my work harder and harder to do, I will have to look for more simple, light and flexible framework.... Sadly.... - Last Edit: 12 years 1 month ago by Patrick Toulze.
- Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
For people with Dreamweaver
To edit/search .less file in Dreamweaver
less syntax highlighter for Dreamweaver
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2756522
Manually open .less in dreamweaver
(I think need the “ less syntax highlighter” for the search to work)
http://www.dreamdealer.nl/articles/how_to_get_scss_and_less_files_to_open_in_dreamweaver.html - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
That script using the js-script version of LESS.
We are using the php-version of the compiler for some good reasons so that script can't work.
Modifying the template files has always bee a bad practice because you would loose all changes with each upgrade for the template.
It's always better to add a custom css file. So nothing has changed for that part.
If you just want used CSS and not LESS thats just fine.
Copy the rule you want to change from the webinspector of your choice into your custom css file and change what needs to be changed.
At the end LESS is just another feature of Gantry ... use it or not.
LESS brings so many good features that this one bad point of the missing debugging option for LESS files from compiled css files shouldn't stop you.
Most users will get away without touching a single LESS file.
Tho I suggest to invest this single afternoon that it takes to understand LESS instead of sticking to old habits and techniques. lesscss.org
You will quickly see that using variables and mixins makes modifying templates a lot faster. So the main big reason for using LESS is speeding up the development.
Of course there is a learning curve ... but still it's simple.
And btw. its' not just our idea. Joomla 3 is using Bootstrap. Bootstrap is build on LESS.
So there is no turning back. Soon you will see that the output of many J3 extensions will rely on Bootstrap stuff.
Also I know at least two other major J-Framework/template providers that also announced the use of LESS ...
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Use by Joostrap too...
I understand the benefit of Less and it don’t seem really complicate.
I will find a way for Firebug... I already make my Dreamweaver being able to search and open .less file..
Meaning that I can use Firebug to isolate a css rule and ask dreamweaver to search the .less files to find it. Relatively fast — The plugin will be better...
For sure if somebody investigate from RT that Firefox plugin it will a great addition in your Tutorials to help many people.... I’m sure this plugin is easy to make it work, but it’s a little technical point that I’m not sure to understand ....
What I really don’t like in your approach is that I will have to fight those less/css to submission for simple thing like the logo and doubling the rules for all less/css needed for simple template customization.
Obviously, the best way will be to :
Take out the css rules from the less files and put it in a custom-css file or better a custom-less file — 3 advantages —> fast modification of the template if needed, no doubling of code, no need to fight those less/css
Upgrade of template are rare and if done cleanly and properly it will be easy to pinpoint with comparison software and just being clean and concise on the method - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Obviously, the best way will be to :
Take out the css rules from the less files and put it in a custom-css file or better a custom-less file — 3 advantages —> fast modification of the template if needed, no doubling of code, no need to fight those less/css
I disagree ...
Also note: not everything that is in the less will get rendered.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Thanks Henning to bare with me on this...
I just want to have a good idea of the system and not start with false ideas on how it work in your templates...
Obviously, the best way will be to :
Take out the css rules from the less files and put it in a custom-css file or better a custom-less file — 3 advantages —> fast modification of the template if needed, no doubling of code, no need to fight those less/css
You saidI disagreeCan you elaborate on this....
You saidAlso note: not everything that is in the less will get rendered.
All the rules in the less files that I can see in the global.less will not be rendered? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- euge001
- Jr. Rocketeer
- Posts: 27
- Thanks: 0
-
100% agree with Patrick Toulze!
Before I spent 5 min, today I set 1 hrs to find good solution, because I also remember Joomla updater can rewrite some files.
You can say I'm a newbie (with 12 years of experience) but for me as for professional web designer it is very expensive to pay for framework I cannot use.
Sorry, it is just for your information guys, no emotions. I just a bit sad, because you made the best framework I saw. Before LESS.
So, I canceled my membership for today((
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Good luck.
But you are wrong in every way.I also remember Joomla updater can rewrite some filesI don't even understand what that should mean ...
I suggest to google a bit about css preprocessors.
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Well, now that I can search with dreamweaver those Less files it became somewhat easier to pinpoint the css even if It is not as direct as checking css directly with Firebub.
Also, I deciced to put all my custom css in a template-custom.less file, like that I can take advantage of the less compression and also when I have the chance to learn a little bit more about the language iwill be able to take advantage of it.
Doesn't seem to be that complicated...
If you cant have dreamweaver I‘m sure you can find some less editor that will be able to seach in multiple less at the same time.
Before less...
Find css with Firebug — check what file generated it and change it or move it to a custom css file
With less
Find css with Firebug — check what less file generated it with Dreamweaver or other and change it or move it to a custom css file
Some crappy points remain, you really need to know a little about less to take out less rules to keep your code lean and not have to double or fight against that very code — I hate that.....
Good point — If you know css, just put .less at the end of your file - it will be a valid Less file. - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Sadly I see some Firefox addon coming up even made by a Firebug Dev.
addons.mozilla.org/en-US/firefox/addon/firedotless/?src=search
and another one from
addons.mozilla.org/en-US/firefox/addon/fireless/?src=search
They seem to be able to display the right path in Firebug but I wasn’t able to make them work.
firedotless seem to work with the less debug mode ?????
I try to put it on and turn off the less compression in Metropolis template manager (in the advanced tab) Nothing, people say it work, but I dont know how....
This will be a great + to know exactly, directly in Firebug what less files is use.... Whatever I do even put off the less compression in the template manager a stupid master.css is generated.
Really frustrating business... - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
Time to create page: 0.070 seconds