We had a separate node for Magento admin and we had to upgrade its hardware. So we prepared a new machine with all the required hosting software and then setup magento code from old box on this machine.

When we visited the Magento admin URL we found that the CSS was not loading. Inspecting the HTML source we found that Magento was trying serve CSS files using the system file paths instead of URLs. The HMTL source looked like

<link rel="stylesheet" type="text/css" href="/home/user/public_html/js/calendar/calendar-win2k-1.css" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/custom.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/xmlconnect/boxes.css" media="all" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/home/user/public_html/skin/adminhtml/default/default/menu.css" media="screen, projection" />

Using Mysql client we verified the Secure/Unsecure base URLs in the` core_config_data` table.  We ran the following queries:

SELECT * FROM `core_config_data` WHERE path like 'web/unsecure/%' or path like 'web/secure/%';

SELECT * FROM `core_config_data` WHERE path LIKE 'admin/url%' ;

The URLs were OK.

Then we thought it might be a caching problem, so we clear all caches but no success. Now we tried inspecting and playing with server settings but no luck here too.

At last we found that it was a CSS merging and folder permission issue. Since the HMTL source was showing independent CSS files, it was hard to guess.

We ran the following query in ` core_config_data` table

SELECT * FROM `core_config_data` WHERE path LIKE ‘%merge%’;

We found that the CSS merging was on, the value for the path ‘dev/css/merge_css_files’ was 1. We turned off CSS merging by setting path ‘dev/css/merge_css_files’ value to 0, cleared cacked and then reloaded the admin page. The css was loading now, now a question came to our mind – if the CSS merging was ON then why Magento was trying to load individual files rather load a merged CSS?

Magento creates the merged js and css files under ‘media’ folder, it was possible that it’s a folder permission problem. We set the permission of media folder to 777 [earlier it was 755], turned ‘ON’ CSS merging and cleared the cache. We refreshed the admin page again, all was fine now. The HTML source was showing the merged css path.

So, all this issue “Magento trying serve CSS files using the system file paths instead of URLs” was due to missing/incorrect “media” folder permissions.