How to Reference a Custom .CSS File on the Master Page in Foundation with SPD

Question

I am using SharePoint 2013 Foundation and SharePoint Designer. I have a site collection with a subsite that contains wiki pages. I'm trying to change some of the styles on the wiki pages (like header margins, font sizes, etc.) using a CSS file, but I can't for the life of me figure out how to get the CSS file referenced to in the master file.

The root site is using the seattle theme, while my subsite is using the oslo theme. I'm not sure if this effects where I need to put the CSS reference.

I've already done tons of research on this, and I've found that the SPURL tags don't work for foundation, so I need a workaround.

This is what I'm currently using in the seattle.master file:

        <SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
    <SharePoint:CssRegistration Name="/Style Library/Custom.css" After="corev15.css" runat="server" />
</head>

And I have this in the Oslo.master file, though I've tried the same thing in just one and the other:

    <SharePoint:CssRegistration Name="Themable/oslo.css" runat="server" EnableCssTheming="true" />
<SharePoint:CssRegistration Name="/Style Library/Custom.css" After="corev15.css" runat="server" />

Here's the CSS I'm using in my Custom.css file:

h1.ms-rteElement-H1 {
color: #000000;

}

The header insists on staying blue.

Answer 1

As a best practice, please make a copy of your seattle and oslo master pages. Change your site to inherit from your copy of seattle/oslo master page.

In my case, I opened the custommaster.html and inserted the below CSS line

<!--SPM:<SharePoint:CssRegistration name="&#60;% $SPUrl:~sitecollection/Style Library/custom.css %&#62;" runat="server" after="SharepointCssFile"/>-->

As the path suggests, I uploaded the custom CSS file under ~sitecollection's Style Library. Also note that the CssRegistration name attributes considers encoded values for < and >.

Answer 2

Okay, I finally got this to work. I'm going to post a detailed step-by-step way I did this. The problems I've been having seem to mostly be related to not understanding a lot of the terminology/locations of things. Hopefully this will help anyone else still new to everything.

I opened the main site in SharePoint Designer 2013, then opened the Master Page Gallery. I then created a folder called "Style Library" within the gallery.

I then opened notepad a wrote some CSS in there. To test, I made all p tags yellow. I then saved the file as CustomStyle.css, and uploaded it into the new Style Library folder I had just made (you can just drag and drop it).

I then opened the seattle.master page (after creating a backup by copy/pasting) and inserted the following:

<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />    
<SharePoint:CssRegistration Name="/_catalogs/masterpage/Style Library/CustomStyle.css" runat="server" after="corev15.css"/>

The first line in the above code snippet already exists in the master file, the second line should be added below it.

Just save and refresh your SharePoint page. It worked for me in 2013 Foundation.

Answer 3

I am not using publishing site. So my solution is different.

solution:

The InfoPath form is being rendered on page such as: http://serverName/_layouts/FormServer.aspx. This page locates at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\FormServer.aspx. We just need to inject the below CSS code in the header section of the page, to force the textarea automatically wrap regardless.

style type="text/css" textarea{white-space: pre-line !important;} /style

Same code to be added into C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\PrinLoader.FormServer.aspx, so that the print view will behave the same way.

Answer 4

Here's the CSS I'm using in my Custom.css file:

h1.ms-rteElement-H1 {
    color: #000000;
}

The header insists on staying blue

Answer:

Even I have faced a lot of issues, while trying to append my custom stylesheet into the master page and the only solution to append your styles on a default style is to add "!important" parameter beside your styles, here's the example you could try"

h1.ms-rteElement-H1 {
   color: #000000 !important;
}

I hope this knowledge resolves your issue.