Thursday, 6 January 2011

How to Add Custom CSS and JS files to Your Visual Web Part

Adding CSS

1. Add "Layouts" mapped folder to Visual WebPart Project.

2. Create a folder structure layouts/styles/themable

3. Add the css file to the styles folder .If you are using themable styles then also add it to themable folder too

4. Register the CSS file by adding following line into your visual webpart

<SharePoint:CssRegistration ID="cssId" name="/_layouts/projectName/cssName.css" runat="server" />

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.cssregistration.aspx

(Note: Another approach From sharepoint designer add css file to style library and refer it in css registration)

Adding JS

1. Add "Layouts" mapped folder to Visual WebPart Project.

2. Add you JS file to layout folder or your project specific folder

3. Add the script link to your webpart

<SharePoint:ScriptLink ID="scriptLinkId" name="ProjectName/jsFileName.js" runat="server" />

1 comment:

website design said...

Great Post, I love to read articles that are informative and actually have good content. Thank you for sharing your experiences and I look forward to reading more.
website design