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.