How to add use custom CSS file in a Custom SharePoint Web Part

Question

Hi all

I developed a custom SharePoint Web Part whose display is based on XSLT.

I am planning to use CSS file to enrich the look and feel of the Web Part.

Is there any way to use CSS file in XSLT file that I am applying to my Web Part?

I developed this Web Part as a feature and it should be aployed to the entire farm.

Thanks
Carol

Answer 1

Hi Carol,

Please have a look at the following article:

http://www.xefteri.com/articles/show.cfm?id=24

I think it might help you.

Best wishes,

---

Slava G
http://wyldesolutions.com
http://wyldesharepoint.blogspot.com

Answer 2

Slava,

My Web Parts might reside in any site(not only publishing site). I am unable to find the styles library.

What should I do to add this custom file to my Web Parts?


Thanks
Carol

Answer 3

Carol,

You can upload your CSS file into any document library you want on your site. I mean you can create a style library even if it doesn't exist in the SharePoint site.

So in your case you would just add the following element:
<?xml-stylesheet type="text/css" href="URL_to_your_.css_file" ?>

I think that might work.

Best wishes, 

---

Slava G
http://wyldesolutions.com
http://wyldesharepoint.blogspot.com

Answer 4

Thank You Slava, I would try that.


Thanks again
Carol

Answer 5

You can try this:

Create a Document Library in your feature,

SPWeb Web = SPContext.Current.Web;
web.Lists.Add("ListOne", "ListOne", SPListTemplateType.DocumentLibrary);

Upload css file to SP Doc Library programmatically, you can use this link

In the feature hide your library from other users.
SPList List = Web.Lists["<Your List Name>"];
List.Hidden = true;
List.Update();

Use the <?xml-stylesheet type="text/css" href="URL_to_your_.css_file" ?> as suggested by Slava G.

Pradeep

Answer 6

Yes, Pradeep suggested the right way to store your CSS files as a part of feature and deploy it on the customer site.

So your feature will contain Web part and CSS file which will be deployed on feature activating.

Hope that will work.

Best wishes,

---

Slava G
http://wyldesolutions.com
http://wyldesharepoint.blogspot.com

Answer 7

You can very well leverage css files while you are doing XSLT transformation.  First you need to deploy .css file into the style library of the site-collection of sharepoint. The recommended way to do this you can create a feature, make sure that the css file is ghostable in library and deploy it. The next step is you need to hook this css file into the master page of the sharepoint site. You can use <link ref> or <css:Registration> into the master page, so that css classes are ready to use in your web part. Once the css file is registered in the master page, you can readily start using this css inside you XSLT file

---

Sundar Narasiman

Answer 8

You can Embedding css file in custom Webpart in Sharepoint(http://www.c-sharpcorner.com/UploadFile/manni_prince/SharepointEmbeddedCSS05292009070342AM/SharepointEmbeddedCSS.aspx)

Basically, you just need to place the css in \LAYOUTS\1033\STYLES, then you can access the css file in your web part.

---

Cogito, ergo sum.

Answer 9

Hi All,

Thanks for all your replies and help.

I tried CssRegistration.Register("/_layouts/styles/webpartname/filename.css");

which worked fine. You could also change the css and see the cahnges applied to your WebPart without even compiling after the first time.

Hope this helps.

 

Thanks

Carol