how to use custom css file in sharepoint 2013

Question

I am extremely new to Sharepoint and have started exploring sharepoint 2013.

I have downloaded copy of seattle.master and created my own master page called MyFirstMaster.master.

Then created new empty sharepoint solution in visual studio 2012 added my master page. Then deployed solution. So far so good.

Now i want to have my own css file so searched in master file and found that it is using this

<SharePoint:CssRegistration Name="Themable/oslo.css" runat="server" EnableCssTheming="true" />

So i added one more line below which can use my custom css

<SharePoint:CssRegistration Name="Themable/MyCustom.css" runat="server" EnableCssTheming="true" />

I also included MyCustom.css file in below path same as it was for oslo.css

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\1033\STYLES

Then i deployed solution but still its not using my css file. I dont have sharepoint designer. How can i use my own css file.

Answer 1

The preferred way now to reference styles in SharePoint 2013 is to upload them to the master page gallery, you can create a folder in your master page gallery and upload your CSS file there either manually or using a module in Visual Studio. Once you do so, you can refernce it using :

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/_catalogs/masterpage/YourSiteFolder/YourCSSFile.css %&gt;"
      runat="server"
      after="corev15.css"/>

Note that using SPUrl token doesn't work with SharePoint foundation.

Answer 2

There are a lot of manners to do this, but this is how I'll do it:

1) Create a module in VS

2) add a CSS file in the module

3) Reference the CSS file in my master page, for exemple :

<SharePoint:CssRegistration runat="server" name="<% $SPUrl:~site/SiteAssets/css/Style.css%>"/>)

Answer 3

This is an example from my own custom masterpage:

<SharePoint:CssRegistration runat="server" Name="<% $SPUrl:~sitecollection/_layouts/15/<<custom solution name>>/Styles/custom.css %>"

where the file is deployed by a feature to hive at 15/my solution folder/Styles/custom.css. You can manually place the file there as well to check.