Managing CSS in the Sitecore Media Library

Jul 20, 2011 by Mark Ursino    7 Comments    Posted under: Sitecore

Sitecore’s flexibility allows it to go beyond just management of content but rather also manage other aspects of a website. The media library is generally used to store images, PDFs, documents, SWFs, etc. Presentation layer building blocks can also be stored in Sitecore’s Media Library, specifically CSS files. This article is a walk though on how you can add CSS files to the Media Library so they can be dynamically used on the site.

Why Manage CSS in Sitecore?

Your first question about this idea might be, why? Good question. Sitecore is a CMS after all, and after a lot of projects the request does come along at some point from a client to manage CSS dynamically. Traditionally, CSS is part of static content on a website, such as the base HTML structure for layouts, CSS for the presentation, and structural images (boxes, shadows, gradients, borders, etc). Though these static pieces are generally static on the file system, some end users like to be able to manage these in the CMS. This CMS management provides some benefits:

• Versioning: since the CSS items are in Sitecore, they can be versioned, and thus easily tracked for historical purposes.
• Ease of access: end users may not have access to the web server (you generally don’t provide that access to marketers) so Sitecore is a perfect interface for them to get to CSS files.

UPDATE: To clarify this specific scenario, this is not to include ALL CSS files in Sitecore. This is a nice approach if the client needs to manage a few aspects of a page that may change, e.g. color scheme. So you could have CSS files in Sitecore that change just a few things (e.g. red theme, blue theme, etc). This is the exact scenario I recently had work against. The layout of the article page is defined, but based on which article type (managed in Sitecore) certain colors needed to change. By making this CSS manageable in Sitecore, the client is able to create their own “themes” with their own CSS.

Configure The Site to Handle CSS Uploads

In order to allow CSS files to be uploaded into the media library, you need to tweak a config setting. In App_Config/MimeTypes.config, find the CSS line and add <forceDownload>false</forceDownload>. E.g.

<mediaType extensions="css">
  <mimeType>text/css</mimeType>
  <forceDownload>false</forceDownload>
</mediaType>

Note: This change must be done before uploading CSS files to the Media Library. If it is not, any CSS file uploaded before the change will not render to the browser and direct requests to the file will prompt a download window.

Code to Read in CSS Files

Front-end:

<asp:Literal ID="ltlDynamicCss" runat="server" />

C# Code-Behind:

FileField cssFileField = item.Fields["CSS File"];

Item mediaItem = cssFileField.MediaItem;

if(mediaItem != null) {
	string cssPath =  StringUtil.EnsurePrefix('/', Sitecore.Resources.Media.MediaManager.GetMediaUrl(mediaItem));
	ltlDynamicCss.Text = string.Format("<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />", cssPath);
}

Beyond CSS

The code and technique is very simple here. Upload CSS to the media library, create a File field on an item template and populate it with the uploaded CSS, and read the direct path to the CSS file to render as a CSS link. This basic technique can also be applied for JavaScript.