Umbraco CSS Corruption

If the back-end user interface of your Umbraco installation is missing some of the graphical touches that it usually loads like in the screen shot below, follow this guide on how to fix it:

Explanation

The reason why these graphics are not loading is either because their url paths are set to the wrong domain or a permissions issue. You can check whether or not the paths are correct with any popular website debugging tools like Firebug or Google Chrome's element inspector. To check your permissions, please refer to the article at the bottom of this page.

In most cases, Umbraco is telling your browser to find these missing files on the localhost. This is fine if you are accessing Umbraco from the machine it is installed on, however if you are accessing it from elsewhere, e.g. another computer on the network or via a domain name or IP address there will be "404 file not found" errors.

When a user first logs into Umbraco's back-end, Umbraco creates a set of Cache files that it uses in future loads to find the URL's of files quickly. If you access the back-end for the first time using the localhost URL, it will write in the cache files that the base directory where Umbraco should link to the files is localhost and use that address in the future. You therefore need to delete these cache files and re-create them with a URL that will be globally available.

Solution for Umbraco 4.7

• Navigate to the root directory of Umbraco
• Rename the following files (To something recognizable, e.g. "App_Browser_Old" etc):

App_Browsers

App_Data

• Refresh the home page of your Umbraco site in your browser - you will get an error
• Refresh it again and the page should load normally
• Log in to the Umbraco backend of your site

Solution for Umbraco versions older than 4.7

1) Go to the following directory: *umbraco-base-directory*/umbraco/App_Data/ClientDependency

2) Delete all the files in the above directory (see screen shot below - Note: Number and size of files will vary)

3) Log in to your Umbraco back-end by using a globally accessible address - one that will be publically available for all computers like example.com/umbraco (as opposed to localhost/umbraco or 192.168.0.1/umbraco)

If the above steps worked for you, you should log into the umbraco backend with the same url at least three times to ensure the maximum amount of correct caching to avoid errors.

If it did not work, you may have to check your folder permissions. Refer to the below link for information:

http://our.umbraco.org/wiki/install-and-setup/set-umbraco-folder-permissions-from-command-line