The LandPhil be honest, be honorable, be kind, be compassionate, and work hard.

August 30, 2011

SharePoint: Using custom CSS

Filed under: General,SharePoint — phil @ 3:03 pm

For the love of all that is holy, don’t try and do this in SharePoint designer.  I’m still not entirely sure what was going on, but it’s not pretty.

Let’s say you have a page that you want to put some custom CSS on.  You could open the page in designer and modify the corev4.css.  What this actually does is copy the file from the web application root to a _styles directory in your current site collection and then in the background re-link everything to it.  This is handy, except that the one thing that it doesn’t re-link to it is Themes.  Any themes you select still only make changes to the root corev4.css file, which (if you’re following along) is overridden by the copy you have in your site collection.  Short story: your new site collection isn’t themable.

The solution: Only update the styles you specifically want to change, and do it directly on the page your editing…in the web browser.  In the ribbon under Editing Tools:Format Text, there’s a drop down for HTML Markup.  Choose to Edit HTML Source, and just drop your custom css in between <style></style> tags and close the window.

The net upshot is that this doesn’t break the site definition template that your page is based on (which IS what happens when you try and do the above in SharePoint Designer).  Another bonus is that the style is truly page dependent.  If you reopen the HTML source, you’ll see that SharePoint has renamed your styles with an .ExternalClassHASH.

Slick, easy, and it doesn’t break anything.  Too bad it took me like 4 hours to figure out.  Hopefully I’ll save you the headache.

Addendum: If you’re editing a web part page, you may notice that you don’t have an HTML Markup button on your ribbon.  You can get around this issue by dropping a Content Editor web part on your page.  Once it’s there and you go to enter content, you will see that you now have an HTML Markup button.  You can drop the style into the content editor web part (in HTML view) and it will work the same way…just for that page.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress