Joomla Templates Club 406,261 posts

[jimmiehendriks Friend jimmiehendriksJoin date: March 2008Posts: 33Downloads:2Uploads:2 Thanked: 2 times in 2 posts]

#185828

I think I don’t understand the use of Less to CSS…

1. I have: enable developmend mode ON (and use firebug and dreamweaver to make changes)
2. I change a file > t3-assets>dev>metro>templates>ja_onepage.less.themes.metro.template.less (changing header_bg.gif to .jpg)
3. Press the compile less to css button
4. Nothing changing in the normal file >ja_onepage>css>themes>metro>template.css
5. And… when I turn off development mode > clear the cache > it is a mess > now there is a t3-assets>css>css-795bb.css (firebug) where I have to change the header_bg again?

And… why should I use it. I think it is much easier to use the “normal” css

Am I missing something? Hope anyone can explain.

Thank you, John

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#486486

Hi John,

When you Enable Development mode On, your template will load the LESS files firstly, then compile to CSS files. That’s why with this mode, you need to apply changes to relevant LESS files when you want to change sth.

– “use firebug and dreamweaver to make changes” – You are using Browser Developer tools to practise, the changes will be save in your files on server.

– t3-assets: is the cache folders, the data of it will be removed when you Clean T3 cache.

If you want to use normal CSS, you just need to Enable Development mode OFF. Then you just need to apply changes to CSS files when you customize your site. Furthermore, in this mode Firefox will show you the CSS file directory, instead t3-assett’s one.

In addition, you can follow this document to be familiar with our T3 framework customizations.

Regards,
—
Leo

1 user says Thank You to phong nam for this useful post

1. imported_jimmiehendriks

[jimmiehendriks Friend jimmiehendriksJoin date: March 2008Posts: 33Downloads:2Uploads:2 Thanked: 2 times in 2 posts]

#486517

Hello Leo,

Thank you for your explanation. But I think it has not become easier with less and css. What is the best method to change the css files?

And searching in the forum for the right answer is more difficult… If you are searching how and in which file to change something because you don’t know where to find it… you get crazy searching. Some people use less, some don’t. So they have to change things in different files…

Reagrds, John

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#486518

In most cases you can just apply your custom changes to custom.css. As that file is not altered by the template script and is also the last to be loaded it is safe to do your changes there.

1 user says Thank You to Phill for this useful post

1. phong nam

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#486756

Hi jimmiehendriks,

You can do like @phil‘s advice. Or If your are quitely new to T3 framework, also LESS files. I recommend you to start with css customizations on our template.

“Where I have to change the header_bg again ?”

– If Development Mode off.
Open templatesja_onepagecssthemesyour_current_themetemplate.css. Then find lines:


.ja-header {
background:#000; // Add your desired header's background here
z-index: 100 !important;
}


– If Development Mode on.
Open templatesja_onepagelessthemesyour_current_themetemplate.less. The find:

.ja-header {
Insert your header background color property, then Compile LSS to CSS in Template Manager –> Save. After this, you can see the applied result on front-end.

Regards,
—
Leo

[Author]

Posts