Support

Admin Tools

#11047 Problem combining css files

Posted in ‘Admin Tools for Joomla! 4 & 5’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Environment Information

Joomla! version
n/a
PHP version
n/a
Admin Tools version
n/a

Latest post by nicholas on Sunday, 12 February 2012 13:47 CST

Friday, 10 February 2012 18:29 CST

user57318
Mandatory information about my setup:

Have I read the related troubleshooter articles above before posting (which pages?)? yes
Have I searched the tickets before posting? yes
Have I read the documentation before posting (which pages?)? yes
Joomla! version: 2.5.1
PHP version: 5.3.10
MySQL version: 5.0.92
Host: 5quidhost
Admin Tools version: 2.2.a3

Description of my issue:
I want to combine css files. My js files combine without any problem, but when I combine the css files, my website is squashed in appearance. Even if I exclude all css files in the exclusion list using a wild card *.css, the website still appears squashed. I use a variable width template, 'mycommunity', from joomlapolis. Any ideas what could be causing this.

Thanks Very Much

Saturday, 11 February 2012 03:19 CST

nicholas
Please go to your site's back-end, Component, Admin Tools, SEO and Link Tools, set "Combine CSS files" to "No", click on the "Save & Close" button in the toolbar. That's all :)

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Saturday, 11 February 2012 11:06 CST

user57318
Thanks for your quick reply. The thing is, I want to combine the CSS files. I suppose, I am not sure why there would be display problems when I exclude all .css files and secondly, I would like to be able to work out what is causing the issues so I can fix it and have my site load as efficiently as I can. Any ideas what it might be? As I say, combining them works fine for me for .js files.

Thanks

Peter

Saturday, 11 February 2012 11:12 CST

nicholas
You realise you don't make any sense, right? You want to combine CSS files but exclude .css files. Translation: I want to combine CSS files, but I don't want to combine CSS files. So, really, do you want or not want to combine CSS files? You can't do both. Based on your description I understand that you want to combine JavaScript files but NOT CSS files. And my instructions told you exactly how to do that. Did you try to follow them?

Please note that JavaScript and CSS combining are separate functions. You can disable the CSS combination and still have the JavaScript combination enabled. That's why there are two different options on the SEO and Link Tools page. And that's why I told you to disable the CSS combination and NOT the JavaScript combination. See? :)

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Saturday, 11 February 2012 11:25 CST

user57318
Hi,

I want to combine the css files and the js files. What perplexed me is that when I 'test' to see which css files are causing the display problem, I get display issues just by having css switched on even if I, for 'test purposes' exclude all css files using the *.css wildcard. My hope was to be able to narrow down and be able to exclude certain css files and have a satisfactory display, but if I get display issues merely by having css combining switched on, I can't see how that is possible. I can of course, switch off css combining all together, but as I say, I want to combine the css files to have the site load as efficiently as possible

So, Use case so far

1) Switch on css combiner
2) Display problems
3) Test by excluding various css files, can't rectify display problem, so try the *.css wildcard in the exclusions list and surprisingly, the display problem persists even then.
4) Ask for suggestions as to why

Cheers

Peter

Saturday, 11 February 2012 11:36 CST

nicholas
OK, you're making much better sense now! I now understand what you are trying to achieve and I can help you. Here's the deal. First, open the page of your site where the problem occurs. Now, view the page source. You will see a URL similar to http://www.example.com/index.php?fetchcombinedfile=css-342f493a70853e52f7b827fbf56d9b0b where www.example.com is your site's domain name. The important thing to notice is the fetchcombinedfile=css part of the URL. This is the combined CSS file. Copy this URL and open it in a new browser tab.

Take a look at what your browser loaded. Looks like gibberish. No problem! Look for lines looking like this one: 
/* COMBINED FILE: /path/to/my/stylesheet.css */
That is, the line begins with /* COMBINED FILE: and ends with *.. Everything in between is the name of the CSS file path which is being included below. Note down all of these file paths. Use them in the CSS exclusion box in Admin Tools, one file on each line. This will exclude all those files and your page will load. Now start removing one file at a time, until you find out which one is causing the problem. This is the file you need to exclude.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Saturday, 11 February 2012 19:09 CST

user57318
Hi,

Thanks. I admit the behaviour I have is a little bizarre. I looked into your suggestions, but the thing is, if I use the wildcard *.css, shouldn't all css files be excluded including any found in the COMBINED FILE listing and, if they are, I'd like to know how I get display problems, basically a narrow page display with the *.css wildcard in the exclusion list; the template is set to be variable width and so should do and normally does take up the whole screen?

I mean, clearly, it is pointless having *.css in the exclusion list, but it serves to show that in my case, the display problems are fundamental to having css combining switched on, or is there something else I am missing?

Thanks for your help

Sunday, 12 February 2012 02:44 CST

nicholas
Excluding *.css should not work the way you think it should. If it did, it would be a bug. You have to specify the full path of the files to be excluded. *.css would match files like:
http://www.example.com/myfile.css
http://www.example.com/foobar.css
but not:
http://www.example.com/somewhere/myfile.css
http://www.example.com/somewhere/foobar.css
The difference is the path. The first two files are in the site's root, the path is empty and *.css matches them. The latter two have a path of /somewhere/ and the *.css doesn't match them. The correct pattern would be /somewhere/*.css.

Think about this. A site has two templates, let's call them foo and bar. Foo's template.css can be combined, but Bar's template.css can not be combined. If by writing template.css in the exclusion list worked as you say, BOTH templates would have their CSS uncombined. Using my solution, you have to type /templates/bar/css/template.css to skip only bar's template.css from being excluded. Similarly, each one could have files named template.css, template_ie6.css, template_ie7.css and so on. In this case, in order to exclude all of Bar's template files you'd simply do /templates/bar/css/template*.css and be done with it.

I hope that example clarifies the reasoning behind the way things work the way things work now.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Sunday, 12 February 2012 08:55 CST

user57318
OK, thanks it makes it clearer how the wildcards work.

I had some difficulty finding the COMBINED_FILE in my browser output, it didn't seem to be in the page source, so, I went to the root directory of my site, made a recursive directoy list and extracted all the paths to all the various css files of the site. I placed all of them in the exclusions list in the following way.

/templates/system/css/system.css
/templates/system/css/toolbar.css

the display problem persisted. I thought there might be something wrong with the way I the pathnames in the exclusion lists were formed, but I don't think so.

So, I am afraid to say, that even with all of the css files in my site in the exclusion list, all the pages of my site still display at half width instead of full width.
I appreciate that this doesn't make any sense, but it is, nonetheless the behaviour I am experiencing and so can you see anything else I have done wrong here? If not, I'll just switch off the css combining, doesn't really matter, it would just have been a nice to have.
I should add that I have also had the same problem of the page displaying at half width with other css combiners I had tried previously, so it isn't something peculiar to admin tools, but I do wonder why.

Thanks for your time,

Peter

Sunday, 12 February 2012 09:34 CST

nicholas
Hi Peter,

These "COMBINED FILES" marks do not appear in the page source. Please read my instructions again. You skipped the first half of the steps. If they were optional, I wouldn't mention them at all ;)

Anyway, back to troubleshooting. It is not clear if the problem happens because of the CSS combination, the Javascript combination or if it is something unrelated. Debugging time:
1. Set "Combine CSS files" to No and "Combine JavaScript files" to Yes. Reload your page. Does that make any change?
2. Set "Combine CSS files" to Yes and "Combine JavaScript files" to No and reload your page. Does that make any change?
3. Set both "Combine CSS files" and "Combine JavaScript files" to No and reload your page. Does that make any change?

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Sunday, 12 February 2012 11:29 CST

user57318

In case

1) Site displays correctly
2) Site displays with half width pages
3) Site displays correctly.

If I purchases a private support ticked and gave you some credentials, could you take a look?

Thanks, I apologise for missing your previous steps.

Cheers

Peter

Sunday, 12 February 2012 11:33 CST

nicholas
OK, in this case you just discovered that the problem is because of combining JavaScript files, not because of combining CSS files. You can follow the same instructions to start excluding JavaScript files. If you really want me to do that for you, please say so and I'll give you instructions on sending me the credentials for logging into your site so that I can take a look.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Sunday, 12 February 2012 12:12 CST

user57318
Any help with this one appreciated, how do I send you the credentials?

Thanks

Peter



Sunday, 12 February 2012 12:25 CST

nicholas
I have made this ticket private. Only you and me can see its contents. Please give me the following information with your next reply:
- Administrator URL
- Super Administrator username and password
and allow me a few hours to get back to you.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Sunday, 12 February 2012 12:42 CST

user57318
Just to say, you might have to login at the front end before the display issue shows up, the credentials supplied are suitable for this.

Thanks

Sunday, 12 February 2012 13:47 CST

nicholas
Thanks for the credentials! I can see what is going on. You are using a CDN plugin for your site. This is not compatible with the JS and CSS combination offered by Admin Tools. Admin Tools has to modify the page's source in order to provide static media combination. However, the CDN is not updated and causes the display issues you observed. Please disable Admin Tools' JS and CSS combination.

Nicholas K. Dionysopoulos

Lead Developer and Director

🇬🇷Greek: native 🇬🇧English: excellent 🇫🇷French: basic • 🕐 My time zone is Europe / Athens
Please keep in mind my timezone and cultural differences when reading my replies. Thank you!

Support Information

Working hours: We are open Monday to Friday, 9am to 7pm Cyprus timezone (EET / EEST). Support is provided by the same developers writing the software, all of which live in Europe. You can still file tickets outside of our working hours, but we cannot respond to them until we're back at the office.

Support policy: We would like to kindly inform you that when using our support you have already agreed to the Support Policy which is part of our Terms of Service. Thank you for your understanding and for helping us help you!