3

I have a kinda strange requirement to outsource every little CSS coding solution in any extra file, located in any library. Now I would like to embed multiple CSS files on any Site, using Script Editor / Content Editor Web Part, and found following solution, but working only with two CSS files:

<Head>
<link rel="stylesheet" href="LINK TO FILE 1.css">
<link rel="stylesheet"
href="LINK TO FILE 2.css">
</Head>

Unfortunately, as soon as I add a third Stylesheet to this Code, it will be ignored. Does someone have any simple solution for adding multiple stylesheets located in any library with Script Editor Web Part?

  • What do you mean when you say "Unfortunately, as soon as I add a third Stylesheet to this Code, it will be ignored". All three references are ignored or only the third one? If it is only the third reference that is ignored, couple of things you can try below. Have you tried changing the order of your CSS references to double-check that the third reference gets missed out each time? Have you tried adding another Script editor webpart and adding the third CSS reference to that? – user22079 Jun 10 '16 at 7:42
  • 1
    not sure what you're trying to accomplish. the head tag should not be used inside the body. you can try without it, or you can include just one css file and use @import to load multiple files into a single css file developer.mozilla.org/en/docs/Web/CSS/@import – Tiago Duarte Jun 10 '16 at 7:58
  • Did you try to close the link tag ? </link .... > – Tito Jun 10 '16 at 8:15
  • Thanks for your response. Yes, it is always the third one which is only ignored. I also once tried it by adding the reference into another Script Editor Web Part, but also doesn't work. The only thing, which would work is to embed the complete code (not reference) straight into a Script Editor Web Part on the page, but my requirement is to keep it central, that changes will be inherited on all Pages, where this code reference will be embedded. – SteffPoint Jun 10 '16 at 8:27
2

You can edit the page in SharePoint Designer and add as many CSS-links in head as you like. Add your links here, and if you use 'media' attribute, you need to add the link the old fashion way:

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <!-- other lines -->
    <link href="<% $SPUrl:~SiteCollection/Style Library/customer/start.css%>" runat="server" type="text/css" rel="stylesheet" />
    <link type="text/css" rel="stylesheet" media="only screen and (max-width: 1020px)" href="https://customer.sharepoint.com/sites/project1/Style Library/customer/mobile.css" />       
</asp:Content>
  • Thanks for your response. I unfortunately don't have any access to SharePoint Designer. Will mark your response as useful, because SharePoint Designer users can use this way. – SteffPoint Jun 10 '16 at 8:29
  • 2
    @SteffPoint You can download the page and edit it in Notepad instead. Just make sure you give it another name when you try things out. It works the same way :-) Thank you! – Benny Skogberg Jun 10 '16 at 8:31
  • 1
    Sounds interesting, I've never tried it this way :) So let me give it a try – SteffPoint Jun 10 '16 at 8:33

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.