Adding a CSS file to a SharePoint 2010 Application page in VS 2010

A quick run down on the steps to add a Cascading StyleSheet to a SharePoint Application page in Visual Studio 2010

From the Visual Studio 2010 Solution Explorer, select the project, right click and select the Add option and then the “SharePoint Mapped Folder…”

AddMappedFolder

The “Add SharePoint Mapped Folder” dialog is presented which displays all the folders under {SharePointRoot}:

styles

Select the location that you would like to place your Stylesheet, which in most cases will be: {ProgramFiles}\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES

Once the STYLES folder is added, it may be easier to add a custom folder that will contain your CSS file(s)

styles2

Now that the folder structure is complete, you can add a stylesheet to that folder:

styles3

Inside your application page, reference the stylesheet within the PlaceHolderAdditionalPageHead ContentPlaceHolder similar to: <link type="text/css" rel="stylesheet" href="/_layouts/1033/styles/Sohema/sohema.css" />

styles_7

The details of adding the files to the package is nicely handled by Visual Studio and included in the Package xml files:

styles_8

Deploy your solution and notice the addition of your CSS file under the location that was specified:

styles_file

Add content to your CSS file and you’re done!

  1. #1 by Tyrin-J Osimen on January 7, 2011 - 2:02 pm

    Great article; short and to the issue of the day. I just want to point out that the code segment you provided ” ” should actually be this ” “. Note the inclussion of two periods (.) before the first forward slash and the absence of “_layouts”; otherwise the css file would not be recognized by the underlying platform.

  2. #2 by Ted Hagler on April 23, 2012 - 1:27 pm

    Hey thanks for the article. I’ve been searching for this solution for about a week. Very simple to follow without a bunch of ridiculous coder jargon so many others use. *KUDOS*

  1. Print friendly list items « SharePoint Dragons
  2. Journal 05/26/2012 (a.m.) | Journal

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: