What an ugly, tremendously complex, absolutely not-intuitive, horribly slow and simply retarded puddle of vomit this fucking SharePoint is. I hate it will all the fibers of my soul.

Unfortunately, I have to deal with this crap at work. And the very first thing I wanted to do was to add a custom CSS file, so our pages wouldn’t look like total shit.

Styling SharePoint

There is an official documentation on the subject, but it didn’t help me much (if at all).

First of all, you need to have an owner or some kind of an admin role, because you’ll need to have access to certain maintenance/settings pages.

Find the page with design assets: SettingsDesign Manager3. Upload Design Files, it should be something like: https://YOUR-DOMAIN.sharepoint.com/sites/hub/_layouts/15/DesignMapDrive.aspx

There you’ll see a suggestion to map the following WebDAV directory:

https://YOUR-DOMAIN.sharepoint.com/sites/hub/_catalogs/masterpage/

But actually you can’t do shit in this directory (at least I couldn’t), so map a higher-up directory instead:

https://your-domain.sharepoint.com/sites/hub/

Never done WebDAV mapping for SharePoint before? Me neither, but here’s how you do it.

No, you don’t map network drive right away, because it will fail. First you need to add your SharePoint instance to Trusted sites. And how do you do that? Stupid question, of course via Internet Explorer, as apparently that’s the only fucking way:

Internet Explorer, Trusted sites

Then you go to your SharePoint page (https://YOUR-DOMAIN.sharepoint.com/sites/hub/_catalogs/masterpage/) and log in there with your Office 365 account (mark to stay logged in just in case). Needless to say, that also has to be done with Internet Explorer.

Only now you can go to My Computer (This PC) and map that network drive:

Windows, map network drive

You will be asked for your Office 365 login/password again.

After that the disk will be mapped, and you will be able to work with it like it’s a part of your local filesystem.

Create your a CSS file with you custom styles (ololo.css) and put it to the Z:\Style Library folder (or wherever). Then open https://YOUR-DOMAIN.sharepoint.com/sites/hub/_layouts/15/ChangeSiteMasterPage.aspx and choose that file in the Alternate CSS URL section:

SharePoint masterpage settings

Now your custom styles will work. You can ask, why didn’t I just edit the master page source file since I have access to it? Well, actually I started with that, but it just didn’t work (sighs).

But does adding a custom CSS actually help with styling the pages? It does, because surprisingly SharePoint allows you to edit the HTML source of any page, and there you can of course assign your custom classes to elements.

Another thing you should know is that styles from your CSS file will be applied to everything on SharePoint pages, even to its standard/default UI controls, so you better restrict global styles like font to page contents:

#contentBox {
    font: 14px Verdana;
}

And/or use a custom prefix for common elements like <table>:

.ololo-table {
    border-spacing: 0px;
    border-collapse: collapse;
}
.ololo-table th,
.ololo-table td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}