Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010

Deploy custom Css,Js files in SharePoint 2010 using visual studio 2010

May 15, 2011 · by Learning SharePoint · in SharePoint Top Nav

In this post you learn how to deploy files like Css, js or images in Sharepoint 2010′s “Style library” using a solution package created in Visual studio 2010.
For deploying files to “STYLES” folder in 14 hive or “_layouts/1033/Styles” please see the post Add custom css file to styles folder in _layouts Sharepoint 2010

Steps to add Css file in “Style library” available in your SharePoint 2010 site -

1. Create an ‘Empty SharePoint project” in visual studio 2010 and name it “DeployFiles”. See the screen below.

Next, enter the url of your SharePoint site and select deploy as ‘Farm solution”.

2. Next, right click on the project and click Add -> New Item… then from the “Add new” item wizard select “Module” in SharePoint tab. Give it a name “CustomCssmodule”

3. Once you create the module you will get and “Elements.xml” and “Sample.txt” files create under it. For this example we will delete the Sample.txt file and will add our . I have used “Text File” from General tab to add my new Custom.css file. See the screen below. You can also add an existing CSS, XSL or Js file in the module.

4. After, adding the module and the css file your project should look like below.

5. Once your done adding your files you now need to modify your “Elements.xml” to specify the URL\ Path where the files will be deployed. To deploy the files into the “Styles Library” we will specify URL=”Style library” or if you want to deploy files into ‘MasterPage Gallery”  use URl=”_catalogs/masterpage. You typically do that when your deploying custom master or layout page.
Modified elements.xml

Don’t forget to add Type=”GhostableInLibrary” in your File tag.

6. Next, you make sure your feature includes your module so just open the feature1.feature and check that all the files are included in the module in the right side of your feature. Here you can also set the feature “Scope” to “Site,Web,Farm or web application”. I have set to to “Site”.

7. Now, all we have to do is “Build solution f6″ and then “Deploy”( Right click project properties).

8. Now navigate to “Style Library” in Site Actions -> View All Site Content -> Style Library and verify that your file Custom.css is deployed.

 

More to link: http://www.learningsharepoint.com/2011/05/15/deploy-custom-cssjs-files-in-sharepoint-2010-using-visual-studio-2010/