Overriding Styles in SharePoint 2010

This is actually a well-known trick in CSS, but I’ll post it here in case anyone out there forgets about it like I did. When designing a custom stylesheet for a SharePoint 2010 site, I kept banging my head against the desk trying to figure out why my changes weren’t showing up. Turns out, it was something very simple – I needed our old friend the override tag!

By placing the !important tag after your CSS attribute, you’re telling the browser to load this style last – thus overriding any previously loaded styles. This trick has been around for years, but I haven’t used it in so long I completely forgot about it. When setting a custom stylesheet in the Master Page screen for your SharePoint 2010 site, remember to use this when your changes aren’t showing up instead of the original styles.

NOTE: I forgot to mention in the original post, but using the override tag is considered “dirty” CSS. If you find a situation where you need to use it, try to do so sparingly. There’s no way (I know of) to make an entire stylesheet use the override feature, but in SharePoint when you select a custom stylesheet on the Master Page screen, it should load after other assigned stylesheets and override anyway. Not that it always happens that way, but it’s supposed to.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s