0

I'm using SharePoint on Premise and I have an issue with my CSS.

For the longest time, I couldn't figure out a way to apply CSS to all of my pages. To get around this, I would create Content Editor webparts and link my custom CSS file to the webpart. I recently discovered the "Alternate CSS URL" in Master Pages and I gave it the URL link to my custom CSS document.

It appears only the CSS within the style tag are being implemented. My links to other style sheets online aren't being implemented.

Does anybody know why SharePoint would implement what's in the style tags but ignore the CSS from the external style sheets?

Custom CSS Code:

<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css"/> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<style>

/* Kill Page Title on pages */
#DeltaPlaceHolderPageTitleInTitleArea {
    display: none;
    }

/* hide left menu bar */
#sideNavBox {
    display: none;
}

/* Move content over to fill in space */
#contentBox {
    margin-left: 20px;
}

/* Hide the logo in the upper-right hand corner */
#DeltaSiteLogo
{
display:none;
}

#siteIcon {
    margin-left: -100px;
}
</style>
New contributor
user87826 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • What is the location of your referenced CSS-files? Did you try to host them in the site assets of the same SharePoint? As tiny improvement you can wrap your <link></link> tags in a <head></head> tag. In the externally linked CSS-files you got the right selectors, right? (I am asking, because you took mainly w3school-examples selecting IDs and classes which arent used by default in SP). – SteffPoint Dec 2 at 18:25
  • They're all online. Should I download them and manually put them into the site itself? When I put this same file into a webpart, everything implemented perfectly. – user87826 Dec 2 at 18:28
  • Can you provide me please an example of the online hosted Stylesheet? ;) – SteffPoint Dec 2 at 18:29
  • Yeah sure, it's in the link here: w3schools.com/w3css/4/w3.css – user87826 Dec 2 at 18:32
  • I downloaded all the style sheets and saved them as CSS files, then I re-linked them using my inner-sites URL links and nothing has changed. What do you mean by "right selectors"? I think that might be what it is. Every other CSS attribute is being changed except for what's in the linked stylesheets. – user87826 Dec 2 at 18:38
0

I guess the problem is, that the externally linked CSS-files only selects certain elements, which very likely do not exist by default in your SharePoint site.

For example with:

.w3-image{max-width:100%;height:auto}

you select all elements with the class:

.w3-image

In order to have an effect on this, you would need in your HTML-DOM on your SharePoint site an element with this class, for example:

<img class="w3-image" src="https://cache.pressmailing.net/thumbnail/story_hires/717fc4de-eb28-4066-8019-b65a007b230c/512_Ford_Mustang_Bullitt.jpg.jpg">

Same goes for the ID-selectors:

#w3-testID {width: 50px}

requires an element like this on your site:

<img id="w3-testID" src="https://cache.pressmailing.net/thumbnail/story_hires/717fc4de-eb28-4066-8019-b65a007b230c/512_Ford_Mustang_Bullitt.jpg.jpg">

That means:

When you create a Test.css file with following content:

/* Kill Page Title on pages */
#DeltaPlaceHolderPageTitleInTitleArea {
    display: none;
    }

/* hide left menu bar */
#sideNavBox {
    display: none;
}

/* Move content over to fill in space */
#contentBox {
    margin-left: 20px;
}

/* Hide the logo in the upper-right hand corner */
#DeltaSiteLogo
{
display:none;
}

#siteIcon {
    margin-left: -100px;
}

and you reference it in your Content Editor Web Part with (Mind to change the link):

<head>
<link rel="stylesheet" href="https://yourSharePointSite.com/YOURSPCollection/YourLibraryNameWhereFileIsHosted/Test.css">
</head>

then it should replace:

<style>

/* Kill Page Title on pages */
#DeltaPlaceHolderPageTitleInTitleArea {
    display: none;
    }

/* hide left menu bar */
#sideNavBox {
    display: none;
}

/* Move content over to fill in space */
#contentBox {
    margin-left: 20px;
}

/* Hide the logo in the upper-right hand corner */
#DeltaSiteLogo
{
display:none;
}

#siteIcon {
    margin-left: -100px;
}
</style>

in your upper Code.

Please let me know, if that was your issue.

  • This makes sense as when I create a webpart and link directly to the page, everything works as intended. This means that I should probably create a backup master file, input the external style links there, and then use that URL as my alternate CSS URL link. Does that sound like it would work? – user87826 Dec 2 at 18:46
  • 1
    Be careful here. When the master file is a CSS-file (.css), then you can't use <link></link> there, because this requires HTML-context. But you could backup the master file and add in the original one your custom CSS-code there (not linked). – SteffPoint Dec 2 at 18:50
  • I'll give out an answer soon @SteffPoint. I'm currently trying to figure out why I can't make edits to my master file or the copy of the master file. – user87826 Dec 2 at 19:59
  • Check this maybe: sharepoint.stackexchange.com/questions/142551/… – SteffPoint Dec 2 at 20:12
  • 1
    Ok, small update: I got everything updated and using the style sheets. However, there are only a few of the CSS changes that I don't see that I'm working on. However, your answer is technically the answer as it needs to be on the master file and the files need to be in the site collection. – user87826 Dec 2 at 20:28
0

I think the reason that "only the CSS within the style tag are being implemented" and the links to the other style sheets are not working when you try to use the Alternate CSS setting to link to your custom style sheet is that only the CSS within the style tag is actually valid CSS.

The <head>, <link> and <style> tags are actually HTML, and so even though they are there in the file, which you presumably gave the file extension .css, they are probably getting ignored by SharePoint, and only the valid CSS that's between the <style> tags is getting applied.

Now, it works when you add a Content Editor Web Part to a page and link to a file, because all the CEWP does is dump the contents of the file onto the page at the point where you have the CEWP placed. Therefore, it's dumping the contents of the file into the HTML of the page, and so of course HTML (including your <link> tags) works.

Honestly, I'm a bit surprised that the links do work because you have them inside a <head> element, and by pulling that in through a CEWP, you are actually then putting a <head> element inside a <body> element, which is wrong. I would recommend that if you continue to pull in HTML content through a CEWP, be aware that whatever that content is, is going to be inside the <body>, so don't do incorrect syntax like putting a <head> in there. The <link>s should work just fine if they're not wrapped in a <head>.

Lastly, another thing to be aware of is that the CEWP doesn't care about the file extension. Your example code is HTML, even if you name the file MyCustomStyles.css, but the CEWP doesn't care about that, it's just going to dump the contents onto the page, and because it happens to actually be HTML, it works. You could also name the file MyCustomStyles.js, and it would still work as long as the content is really HTML. So when linking to files using a CEWP, it is more accurate to name the file with .html extension. It will still work if you don't, but it's more representative of what is actually going on if you do, and that might help you or someone else when trying to diagnose problems down the road.

Now, getting back to your original issue, the only way you are going to get those <link>s to work is:

  • Use a CEWP to link to a file, as you have already done
  • Use a Script Editor Webpart, (which is in turn really just letting you put some HTML on the page, essentially the same as the CEWP)
  • Or, as SteffPoint points out in their answer, edit your master page and add the <link> elements in the <head> there.

Your Answer

user87826 is a new contributor. Be nice, and check out our Code of Conduct.

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.