I blog in a few different places. I have my personal blog, my professional blog, and I maintain a blog at work to inform and educate co-workers. At work, the blog is hosted on the company’s SharePoint server, which is fine. I am still able to use Windows Live Writer and with it, the Insert Code plug-in. My other two blogs use WordPress.
The Insert Code plug-in is invaluable to me because it does nice color coding of the text. As part of that feature, it inserts a CSS style block into your post. SharePoint doesn’t play well with this. It tries to, but fails. The intent is good. SharePoint wraps your whole post in a div and gives it a class with a random name, then it rewrites the CSS styles so the classes will be scoped to only that containing div class. Pretty smart way of encapsulating the styles.
Unfortunately, it fails on two points. First, the containing div’s class is not like class=”123456789abcd”, it always precedes the class name with “ExternalClass”, so you get class=”ExternalClass123456789abcd”. The rewritten CSS does not have any mention of “ExternalClass”.
The second mistake is in the rewritten CSS. Your post will have a style block rewritten similar to:
<style>
123456789abcd h1 {color: red;}
123456789abcd h3 {color: green;}
123456789abcd .bold {font-weight: bold;}
</style>
Do you see the problem? The class is 123456789abcd on the div (actually ExternalClass123456789abcd), but the stylesheet doesn’t scope it to that class. Those are html tags it’s defining. The stylesheet is looking for html tags of <123456789abcd>.
So, what can you do about this? My solution was to put the stylesheet right in the template page so all the posts will be able to use those classes – that’s why I created this post. The problem is, I couldn’t find anything in the SharePoint control panel to add a custom stylesheet (unlike WordPress, right?). There was an option to edit the page using SharePoint Designer, so I installed Designer, only to find out the administrator didn’t allow editing using Designer.
Other places on the Internet suggested adding a Content Editor web part and put the style sheet in there. I tried it half-heartedly and gave up because it seemed way too “hack-y”. But while doing so, it reminded me of something I used to know about SharePoint, that you could browse the site’s files using WebDav (assuming you had permissions).
So, what I did was map a network drive (a command found in many places in Windows Explorer) and gave it the URL of my SharePoint site. Right away, I got an Explorer window with the template files. I edited Default.aspx and Post.aspx and added my stylesheet. The formatting was immediately applied. Then I edited all my previous posts and removed my inline style code blocks to save space and reduce complexity. Everything works now.