SharePoint Foundation 2013 - Linking CSS files in a site collection

问题

I ran into an issue with linking my css files in master page.

<SharePoint:CssRegistration ID="StyleSheet1" Name="~sitecollection/_catalogs/masterpage/Resources/css/quack_1200.css" After="corev15.css" runat="server" />
    <SharePoint:CssRegistration ID="StyleSheet2" Name="~sitecollection/_catalogs/masterpage/Resources/css/main.css" After="corev15.css" runat="server" />

These files are not being loaded. When I access the console in browser it doesn't show any errors and when I investigate the HTML it does not show the CSS files.

However if I access the files on the URL they do exist. This is the deployment XML definition.

<File Path="Resources\css\main.css" Url="masterpage/Resources/css/main.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
<File Path="Resources\css\quack_1200.css" Url="masterpage/Resources/css/quack_1200.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />

If I type the whole URL I am able to access the files.

http://[computer name]/sites/PCF/_catalogs/masterpage/Resources/css/quack_1200.css http://[computer name]/sites/PCF/_catalogs/masterpage/Resources/css/main.css

Could you please help me on resolving this issue.

Thank you

回答1:

The problem is that CssRegistration doesnt handle the ~sitecollection token.

I havent tested this, but try to add:

<link rel="stylesheet" type="text/css" href="resources/css/main.css" />

If you cant figure out how to build up your url, you could always add the css files with javascript / jQuery.

var linkTag = '<link href="' + _spPageContextInfo.siteAbsoluteUrl + '/_catalogs/masterpage/Resources/css/quack_1200.css" rel="stylesheet" type="text/css"/>';
$(document).ready($('head').append(linkTag);

回答2:

Where you are adding your css files in master page or in html page?In SP2013 you cannot do any modifications directly on master page. What ever you want to do, you should do in a html page only. In html page add your css file like below.

<link rel="stylesheet" type="text/css" href="../../../../images/MyFolder/css/styles.css" />

If you save this html page and see in the master page it will render like below

<SharePoint:CssRegistration name="&lt;% $SPUrl:~sitecollection/images/MyFolder/css/styles.css %&gt;" runat="server" after="SharepointCssFile"/>

Note : if your changes not applying in your master page try to convert the associated html file once again. Check this MSDN Link

回答3:

Solved with:

<link rel="stylesheet" type="text/css" href="Resources/css/quack_1200.css" />
    <link rel="stylesheet" type="text/css" href="Resources/css/main.css" />
</head>

来源：https://stackoverflow.com/questions/22704188/sharepoint-foundation-2013-linking-css-files-in-a-site-collection

标签

css

sharepoint

sharepoint-2013