Gå videre til hovedindholdet


Viser indlæg fra marts, 2017

SharePoint Branding Office 365 classic and modern - CSS on localhost - walk on the wild side

I tend to write a line in CSS, save the file and refresh the page in browser so I can see the result. Any tool that is more complicated and takes more time to see the result is not for me.

How can you work with CSS on localhost while seeing the result on Office 365?

1. Create a project in Visual Studio and add a stylesheet (I chose Core 1.0 Cloud project)

2. Click on Debug -> Start Without Debugging
3. Browse to the CSS file on localhost

4. Open a SharePoint site on Office 365 that you want to style

5. Click on "S" icon, paste the URL to the CSS file and click on "Add website" button
Don't have the "S"? Sans Style free. Get it at Chrome web store

6. Refresh the page

You'll get this error:

Mixed Content: The page at 'https://toughcookie.sharepoint.com/sites/dev/SitePages/DevHome.aspx' was loaded over HTTPS, but requested an insecure stylesheet 'http://localhost:57355/css/sansstyle.css'. This request has been blocked; the content…

Branding SharePoint and Office365

"You don't brand Outlook or Word. Why do you need to do branding on collaboration sites?"

Well, we want to :-) SharePoint is supposed to be great again. It is a development platform. So why not? :-)

Well, I've been working with SharePoint for a long time and it was always possible to define URL address to a CSS file and style the pages. Team Sites and other SharePoint Foundation sites were born with Microsoft blue colors, and we immediately got to learn everything about feature stapling. Yes, cool kids feature staple.

Then came the JavaScript injection and PnP.

Still, in my opinion, we should have a place in SharePoint or Office 365 UI where we can set URL to a custom stylesheet.

Then I was thinking about Microsoft talking about disruption, multiple platforms and how SharePoint developers are now web developers.

So I found a place. Call it disruption, baby. The place is called browser, whether it be Chrome, Internet Explorer, Firefox, Safari, Edge, Opera or else. As …