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"/>
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

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

  • 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,..... – john Gu Nov 28 '14 at 18:20
  • 1
    I edit my previus answer – Marco Nov 28 '14 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 ? – john Gu Nov 28 '14 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 ? – john Gu Nov 28 '14 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 – Marco Dec 1 '14 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.