Public Forums 71,145 posts

[sweiss Friend sweissJoin date: February 2015Posts: 17Downloads:9Uploads:3 Thanks: 7]

#204048

Will someone point me into the right direction so I may understand more about working with the CSS files in the T3-assets folder. I’m trying to understand how to work with the cached css files. I use firebug and see values I want to change in these cache files. My main questions are:

1. When are these files created?
2. What (parent) files are used to create them?
3. If I change one of them will my changes be over written by the parent css file?
4. If I change one of them should I change the parent css file also?
5. Is there an easier way to change the values in these files other than updating the parent and cached files?

Thank you

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#560393

Hi

You shouldn’t work with T3-assets folder and files stored inside it , it is the folder where optimized files are stored

You should work with less files or CSS folder when you disabled optimization from template manager

Please take a look carefully at the documentation about css files HERE

[sweiss Friend sweissJoin date: February 2015Posts: 17Downloads:9Uploads:3 Thanks: 7]

#560396

Okay, so let me try to answer my own questions with your response. Please correct my answers if not correct.

These cache/minimized files are only used if the “Optimize CSS” value in the Optimization section of the General tab is in the “ON” state – Is this correct?

1A. The files are created when the LESS to CSS button is clicked. Is this correct?

2A. The LESS files are used to create them. Is this correct?

3A. Your changes won’t be over written but a new file will be created and used instead of the file you modified. Is this correct?

4A. You should not change one of them. Is this correct?

5A. Yes, Change the LESS file relative to the value you want changed. Is this correct?

So, I can do one of two things

Turn off the “Optimize CSS” and edit css directly OR as you suggest, leave the “Optimize CSS” ON and modify the value in the LESS file and click the LESS to CSS button to compile and create new minimized files.

If I work with the less files what happens to all of the unused files in the t3-assets folder?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#560397

Everything correct

<blockquote>If I work with the less files what happens to all of the unused files in the t3-assets folder?</blockquote>

They are updated with new optimized version css files

1 user says Thank You to pavit for this useful post

1. sweiss

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#560400

<blockquote>How do I locate the value I want to update in the LESS file using firebug?</blockquote>

You cannot with Firebug

You should check directly into the less folder templatesyour_templateless

Check the variables.less file for example

1 user says Thank You to pavit for this useful post

1. sweiss

[sweiss Friend sweissJoin date: February 2015Posts: 17Downloads:9Uploads:3 Thanks: 7]

#560405

I found what I was looking for in style.less THANKS

[sweiss Friend sweissJoin date: February 2015Posts: 17Downloads:9Uploads:3 Thanks: 7]

#560415

Cool. So, anytime I change anything in any of the less files I have to compile the files by clicking the “Less to Css” button and all of the files get recreated again? are there ever any unused file in the t3-assets/css folder after compiling?

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#560422

Go to Extensions Template Manager. Click on the name of the template you are working with. Click the General tab.

If Development Mode is on, then you are working in Development mode.

When you work in Dev Mode, the site runs on LESS. It compiles LESS to CSS automatically each time you render a page. It will feel slow. So if you edit a LESS file, or if you use ThemeMagic to change a style, and then you render a page, the T3 system will compile LESS to CSS, then spit out the page using the new CSS files it just compiled.

If you are not in Dev Mode, then you must manually compile LESS to CSS after each time that you change a LESS file.

The main storage area for LESS files is htdocssitenametemplatestemplatenameless.

However, if you use ThemeMagic to change a style, then a more specific LESS file is created in htdocssitenametemplatestemplatenamelessthemesthemename. it is called variables-custom.less. It will be included in any compile, whether the compile is manual, or automatic due to the fact that you are operating in dev mode.

Cache is a storage of common files that are generated in the process of rendering a page. The overriding goal of cache is to save common things and quickly spit them out for a page instead of totally re-compiling and re-generating every single little element every time a page is called for.

Cache bites both ways. It is an efficiency tool. It saves resources by re-using “prior work”. BUT, in the development arena, it can be somewhat harmful if it is not properly managed or accounted for. Sometimes you can make a change to your site and then go view it, but not see the change. This is because the system spit out something from cache, and therefore did not reflect your change. This can be confusing. This is why people say to “go clear your cache” if you don’t see the change you expected. Then refresh the page and see if you actually get your desired result.

The Clear Cache function is under the System tab.

Okay. What all this means is that you need to shift the focus of your attention away from cache, and either towards LESS, or towards the use of a custom.css file.

i described 2 ways that you can edit LESS files: directly, or via ThemeMagic.

T3 offers another way to change styles. It is called custom.css. It is the only css file that does not get overwritten during compile. All of the other css files get overwritten. That is why we don’t edit css files. It’s a waste of time.

BUT, if you create a new file in htdocssitenametemplatestemplatenamecss and call it custom.css, then whatever CSS you write into that file will be applied to your site, no matter what.

You’re on the right track. Forget cache. Work with LESS, or work with custom.css.

Lastly, when the site is live, it runs on the CSS files from the last compile. So it is fast.

1 user says Thank You to dsinor for this useful post

1. sweiss

[sweiss Friend sweissJoin date: February 2015Posts: 17Downloads:9Uploads:3 Thanks: 7]

#560433

Wow, you have made it very clear that I was miss using the term “cache files” when I was really referring to the compiled css (minimized?) files located in the t3-assets/css

This forum post have been very valuable as I asked to understand more about the workings of the T3 framework in regards to the the css files and the knowledge gained form pavit’s reply’s help me learn more but dsimor really added the insight I was looking for.

For now I will not touch the files but one last question, can the t3-assets/css folder contain css files that will never be used again?

Thank you both.

[dsinor Friend dsinorJoin date: July 2014Posts: 36Downloads:0Uploads:0 Thanks: 5 Thanked: 2 times in 1 posts]

#560457

I don’t know the answer to your question.

But it may not be relevant.

Goto Template manager Your Template General tab. Scroll down to see the optimize options.

If you optimize css before publishing the site, then the site will run from an optimized css foundation. If you don’t, the site will run exactly the same, just milliseconds slower (unless maybe you have a humongous site).

Whether css has been “optimized” is probably irrelevant to most sites.

Optimized may be cleaner, but it’s not structurally relevant.

Maybe you need to forget about css. Maybe.

You could write a huge custom.css file to get what you want. Pros: this won’t break T3. Cons: T3 will render a complete default site and then apply custom.css as last minute changes that make it look like what you want. This is functional but not eloquent.

Alternately, you could dive into LESS which will then lead you down the rabbit hole. If you do this, css becomes irrelevant.

Your posts mention CSS a lot. T3 is a LESS driven platform. With one exception, everything in the T3 CSS universe is a derivative, in the same way that the html output is a derivative. The exception is the custom.css file.

None of the other css files matter, whether they are in the css folder or the t3 assets folder. So drop them off your radar.

Good luck!

[Author]

Posts