Editing less and css files

[dcnola]

I'm new to Joomla and less files, although I'm very familiar with html and css. I've got a template on my site from template monster and I'm trying to edit some of the colors. In the theme's css folder template.css is a 10k or so line css file where I can find the various variables I'm looking for and edit. This does work, but from what I've read it seems I would be better doing this by editing the less files.

I looked through these files and the template.less file is just using variables from the variables.less file. For example @grayDark: #333333;. I've tried to edit the values in this variables.less file, then save it, hit the compile less button (I'm doing this all from within the template manager page on the back end), and then clear the cache. When I go reload the front end pages nothing has changed.

I assumed this would change any place using the @grayDark variable, to the blue I changed it to, but nothing. I tried to change another couple of the colors, compiled the file again, and then even compiled the template.less file since I figured maybe this is generating the template.css file. This didn't do anything either. What am I doing wrong?

When I changed the template.css file it did show my changes, but I thought on compile of the .less files it would just overwrite this .css file. I tried it, and my changes to the .css file stayed. Maybe I'm just not getting how this is supposed to work?

[guywalder]

Hi,

First I would suggest you contact Template Monster regarding this. Second, do you know what framework is your template based upon?

When LESS is used the CSS files are created on the fly from several less files compiled together. So, in many cases, a line you've changed in the CSS can be overwritten by the LESS line. If your styling was not overwritten then you've got lucky and this line did not have any LESS line overwriting it. Hence, when LESS is in use it is bad practice to edit CSS files.

You'll need to make the changes to the LESS files. Unfortunately, in many cases it's tricky to locate all the LESS files one CSS file is comprised off so I wouldn't try going that way. Having said that, you can create a custom.less file and add it to the master.less file so it will be compiled with all the rest LESS files. In this file, you can make all the changes you'll like and overwrite other LESS styling.

Before you make any step, find out what framework is used in your template and Google your options.

Good luck and remember, Joomla has the best community

[dcnola]

Hi,
You are pretty much saying what everything I've read has said. Editing the variables.less file should change things, because all the other .less files just import this file and use the variables. After changing a variable and compiling the less file and then compiling the main template.less file as well nothing changes on the site when I reload it. I'll try to contact template monster and see if they know why. I believe this template is just using the bootstrap framework.

[JohnKeays]

I am having the same trouble with the less compiler. I have updated template.less with an background-image: and the code does not appear in template.css after the compilation. If the compilation fails then nothing changes. That's okay. But if it compiles and leaves out code in template.css then Iam having the same trouble as others have reported. Is it just flakey code in the compiler. How do I debug this Help...

[gws]

It is better not to necropost and open your own new issue.