How does compiled CSS work?
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
I built my website in local, to make the fonts look better with Chinese characters, I replaced all “font-family:" with "font-family:Microsoft Yahei, " in all *.css files, which worked fine in my local website. But after I upload the whole site to my webspace, those modifications are dropped.
Here is some details:
I use gantry template, one of the css files I modified is master-53f95a45aa1d40970d8d57ed4b5a8aec.css under css-compiled folder. I can't remember this exactly but I think right after I upload the website to webspace, it worked fine. The modification was still there and Chinese characters' font was "Microsoft Yahei". But at some point, the modification was lost and the font returned to "helvetica". Now the CSS file being a compiled one, I wonder if this has anything to do with the compiling.
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
We are using "LESS" for most or all of the CSS that is in a template. LESS is sort of a short-hand for css and lets us to quite a bit more with less code. The system checks to see if these files have been changed and then compiles them into those "master" css files you mentioned you edited. This is why you saw that it was overwritten.
You'll want to use a custom less file or custom css file for your style edits and additions. Everything in the compiled folder can get deleted at anytime and can be recompiled at any time.
Check this post for more info!
http://www.rockettheme.com/forum/index.php?f=662&t=174956&rb_v=viewtopic#p860738
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
I read that before, trying to understand how Less works, but it is just too complicated for me. I think I'll try to implement and understand this feature on-the-go in the future.
Now my question is, while the system generates master css files, isn't it based on other un-compiled CSS files? or it is just based on .less file? I'm asking this because I made the replacement to all .css file, if the compiled master css files are generated base on other CSS files, it should pick up those modifications that I made.
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
The newer templates here are all "LESS" and the only CSS files for overrides are on a per browser basis. LESS are the only files that get compiled.
I think you'll find the LESS stuff easier than CSS once you get used to it. You really should use a custom css file for any changes and not just modify what's there. Overrides will kill your modifications if you just edit the files as they are.
-
-
-
- shenk
- Hero Rocketeer
- Posts: 424
- Thanks: 11
-
I use custom CSS file also, but it can't achieve what I want to do. see this link:http://www.rockettheme.com/forum/index.php?f=15&t=199227&rb_v=viewtopic
If you have better suggestion I'll follow.
Besides, by replacing font-family with font-family:Microsoft Yahei, font awesome will stop working. So I definitely need a better solution to apply Chinese fonts to my website.
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
There are a couple different fonts in each template so you can't just replace all font-family calls. You need to pick and choose which ones are text only items and leave the font-awesome one as it is.
It seems like you might have replaced some font-awesome css somewhere and that might be why its not working for you.
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
If you haven't checked out this article, it will give you a very good understanding of what is going on with the code and how to look in to fixing issues:
http://www.rockettheme.com/blog/coding/1767-basics-debugging-a-customizing-with-lesscss
-
-
-
- Jacob Stanfield
- Hero Rocketeer
- Posts: 315
- Thanks: 0
- Service Bureau
-
Good morning Ben. I've found out the hard way that a custom-css file is A MUST!!! The GREAT thing is how much easier life is to have all of my modifications in one organized file. This is probably the most helpful upgrade to these templates yet!
My question to you is: After I change something in my template manager, it automatically recreates a new master.css file. At the end of creating a website, when the customer has approved and gone live, is it using just one of those (the latest) css file? And if so, can I delete the others for organizational purposes?
Thanks for your help! Have a great weekend! - Thanks.
Senior Multimedia Designer
This email address is being protected from spambots. You need JavaScript enabled to view it.
-
-
-
- Ben Lee
- Elite Rocketeer
- Posts: 4193
- Thanks: 42
-
There is an option in the template manager area under the advanced tab I think that lets you clear compiled cache.
There may be more than one file that's used, but this is the best place to clear out and start with a fresh build of them. If you do clear them out manually, they will be recreated on next page load.
-
-
-
- Jacob Stanfield
- Hero Rocketeer
- Posts: 315
- Thanks: 0
- Service Bureau
- So Ben are you saying if I deleted all the "master-***************.css" files manually, it wouldn't hurt my site one bit? That Joomla will recreate what's necessary on the next page load? If this is correct, is this the benefits of "less"? Thanks for your info!
- Thanks.
Senior Multimedia Designer
This email address is being protected from spambots. You need JavaScript enabled to view it.
-
Time to create page: 0.059 seconds