0

I want to reference a custom CSS file inside my seattle.html file. currently I find the following in the default seattle.html master page:

<link href="http://sharepointdev:12341/sites/mirror3/_layouts/15/1033/styles/corev15.css" type="text/css" rel="stylesheet" />
<link href="http://sharepointdev:12341/sites/mirror3/_layouts/15/1033/styles/searchv15.css" type="text/css" rel="stylesheet" />

so I simply added a reference to my custom css as follow, after the above links:

<link href="http://sharepointdev:12341/sites/mirror3/Style Library/Custom CSS/MyCustomeCss.css" type="text/css" rel="stylesheet" />

but this did not work, so I have these questions:

  1. By default seattle.html contains a direct reference to the server name and port, as follow <link href="http://sharepointdev:12341/sites/mirror3/_layouts/15/1033/styles. /corev15.css" so now let say I backup, then restore the site collection to a new server will the references break ?
  2. When I added the following <link href="http://sharepointdev:12341/sites/mirror3/Style Library/Custom CSS/MyCustomeCss.css" type="text/css" rel="stylesheet" /> to reference my custom css, this changes were not reflected inside the seattle.master page ?
  3. The custom CSS did not apply to my current styles, while if I directly write the following to the seattle.master it will work <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/Custom CSS/MyCustomeCss.css %>" After="corev4.css" runat="server"/>
Improve this question

2 Answers 2

Reset to default
1

You can try following taken from here. It is recommended for adding in html master page.

<!--SPM:<SharePoint:CssRegistration ID="CSSCustom" Name="&lt;% $SPUrl:~sitecollection/SiteAssets/css/FileName.css %&gt;" runat="server" After="Themable/corev15.css"/>-->

I did this in ugly way!

<link rel="stylesheet" href="/sites/IFICTeamSite/SiteAssets/MasterPageCss/masterPageCustom.css" ms-design-css-conversion="no" />

ms-design-css-conversion="no" is very important if you wish to apply ugly way! see my answer

Improve this answer
0

First question:

I have created this CSS

enter image description here

On my seattle.html I add this line:

enter image description here

And the result is this:

enter image description here

Second question:

Try to add your CSS just above the head closing tag, because as you know HTMLand CSS are sequentials so all your styles will be overwritten if another CSS execute after yours.

Third question:

To this apply the answer above, and try to check in the master page, just in case

Improve this answer
5
  • can you advice what do you mean by your first answer, now i have the custom css inside the style library for the site collection,, but if i write the following inside the seatle.html just before the </head> tag "<!--SPM:<SharePoint:CssRegistration Name="/Style Library/Custom CSS/MyCustomeCss.css" runat="server"/>" no effect for the custom .css file as if the seatle.html is unable to load the .css file,..... Commented Nov 28, 2014 at 18:20
  • 1
    I edit my previus answer Commented Nov 28, 2014 at 19:11
  • Now inside the default Seatle.html they use the following syntax "<!--SPM:<SharePoint:CssRegistration Name="/Style Library/customcss/MyCustomCss.css" runat="server"/>-->" rather than adding <link href="..> . so what are the differences between using <link> & using <!--SPM:<SharePoint:CssRegistration ? Commented Nov 28, 2014 at 22:47
  • also one thing to mention if i use <link href="/style library/CSS/test.css" then all site collections will be referencing the test.css at the root site collection and not the one realted to each site collection ? is this correct ? can i add something such as "~SiteCollection/Style Library/CSS" instead ? Commented Nov 28, 2014 at 23:01
  • Use SharePoint:CssRegistration is exactly the same as using link, if you check the source code of your page you will not see a SharePoint:CssRegistration css you will see a link tag Commented Dec 1, 2014 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.