CSS in any SharePoint sites? (Tulip & Mysites)

One of the things which frustrates me about SharePoint is that you have these potentially very powerful sites which are just used as notice boards to contain Word Documents or PowerPoint’s. However if an Academic is wanting to produce something a little bit more like a standard website (web 1.0) they have to create HTML pages which lay in a document library, a student clicks on the documents and is escorted away from the SharePoint interface, (same can be said for Videos and Flash).

Since taking up my role and working with SharePoint, it’s been my constant mission to integrate all these cool learning resources within the pages of the Tulip sites (as in to maintain the left hand menu). This task has been helped with certain web parts which can handle WMV files or Flash files. However these are usually just stand alone web parts and lack any context for the information, and you can very easily end up with a messy page full of random web parts:



However one very handy web part is the MOSS editor, which is probably my favourite web part… if I had to rank it it would get an 8.4 (on a scale of 1-10, 10 being high)...

The MOSS editor is simply a html editor which allows you to use hyperlinks and objects etc without stripping them out, so you can embed a video into your Tulip or MySite and have some explanation text to give it context. This seemed all fine and dandy till it occurred to me… these sites are lacking any styles (which is obviously the most important thing with anything in E-Learning it has to look nice). A quick play with the editor it appeared there was no way to attach your own style sheets and any CSS added inline with the html would be stripped (obviously as it wouldn’t be W3C compliant but if the hack worked I wouldn’t be complaining). I initially gave up and figured I’d just have to kick it old school and use Tables, which as we all know are both a pain and are highly un-accessible.

I then discovered this nifty programme called SharePoint designer, (don’t be put off by the huge made by Microsoft stickers on it). Within SharePoint designer you can open any programme, module or Mysite as shown in the following images (click images to enlarge):









Once your site is open you should be greeted with something similar to what's attached below (I’ve switched to design mode), for this example all we really need to be concerned about is the “Attach Style Sheet” button as highlighted. You might want to look through this page and look at the code as I’m sure many other nifty hacks can be done.



Attach your desired Style Sheet which you’ve pre uploaded. Once you’ve done this you can then go back to your Moss editor web part and include class and id tags which call the CSS… bingo.

My general method of doing this is to create a folder or a document library called HTML making sure not to include it in the left hand menu and within it have all images and CSS used for the design... well hope this is of some use, feel free to comment/email if you need anything a bit clearer.