Styles for Rich Text Fields in SharePoint 2010

I found an interesting little feature in SharePoint 2010 the other day when a client wanted some custom styles in rich text editor fields. There are some great posts elsewhere on how to do this so I will not repeat them but essentially the process is:

  • Edit the page layout(s) you want altered in SharePoint Designer
  • Add the parameter PrefixStyleSheet=”my-rte” to the RichHtmlField
  • Add the styles you want to your CSS with that prefix

All is good🙂

However, in this instance, the usual Styles were fine but the Table Styles would not work. I was convinced this must be due to me making some mistake with the prefix and tried a whole variety of alternatives without success. The only real difference between the usual Styles and the Table Styles was that the Table Styles were in a separate CSS file and linked with @import. This meant that I thought perhaps I had the @import wrong in some way. The really odd thing was that the default Table Style was having its effect on the page – I just could not select an alternative Table Style from the button on the ribbon.

Eventually in desperation I moved the Table Styles into the main CSS file and removed the @import – and now they worked fine. Even further testing established that any of these styles that were located in a separate CSS file and linked with @import would not work – even though the page was recognising them, the ribbon was not. Linking the separate CSS file from the Page Layout worked fine too – it was only if I used @import that there was any problem.

So, just in case you need to do this remember DO NOT USE @import – the ribbon does not seem to like it.

This entry was posted in SharePoint and tagged , , , , , , , , . Bookmark the permalink.

2 Responses to Styles for Rich Text Fields in SharePoint 2010

  1. Zut Alors says:

    One tip: instead of trying to use @import in the css, you can alter the page layout to load additional css under the AdditionalPageHead section, much like you would do with a master page. Since you can use the “After” property to specify the css load order, you can really tightly control stylesheet in SharePoint.

Leave a Reply

Fill in your details below or click an icon to log in:

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