PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Custom CSS Styles in the SP RichText Editor DropDown

Posted by PANVEGA on May 26, 2009

When creating content on a publishing site through a Page Content HTML editor there are some basic styles that come OOTB: The styles are actually conditional and different styles appear based on the type of content selected. Create your own set of standard header and section styles that are easily available to your content authors directly within the content editor.  These styles appear in the seldom-used “Styles” menu within the content editor toolbar.  By default, you’ll notice this menu is populated with three header styles that are just about everything but useful.

You can view the OOTB styles by going to “http://yourportalsite/_layouts/1033/styles/HtmlEditorCustomStyles.css

Here is a simple example:

.ms-rteCustom-ArticleTitle
{
font-weight: bold;
font-family: Tahoma;
font-size: 9pt;
color: rgb(0,0,0);
text-align:left;
}

031408_1402_CreatingCus5

You can add as many styles as you’d like, and you can change all sorts of CSS properties, such as font weight, size, color, padding, margins, etc.  It is important to note that all custom “Styles” menu styles must begin with .ms-rteCustom-.  If your style does not begin with this text, it will not appear in the menu.

How to add styles to your Page Content HTML editor?

  1. Create your own custom CSS.
  2. Open the Custom Style Sheet which you are Created for the Site(by default core.css will apply for SharePoint Sites).
  3. But the file into the Style Library folder in your SP Designer.
  4. Add a reference to your MasterPage.
  5. Add the Custom Style which Starts with “.ms-rteCustom-”. E.g. .ms-rteCustom-MyBulletList
  6. Then you need to know how to classify your content.
  7. Note: If you are creating completely new styles they will override the OOTB styles and the examples above will not show. So if you like some of the OOTB style simply copy them over to your new CSS file.
  8. Upload your stylesheet to either the server or a document library, and under site settings set it as an alternate style sheet. Or you could add it to the bottom the core.css file so that it is available globally across all sites.

Note:   Note:The Custom Styles which we created will appear only when the text is selected in Rich Text Editor as shown above.

Use the following attribute in your custom CSS without the quotes of course. Replace the “yourstylename” with your own custom style name without spaces.

  1. Images: “IMG.ms-rteCustom-yourstylename”
  2. Links: “A:link.ms-rteCustom-yourstylename”
  3. Numbered Lists: “OL.ms-rteCustom-yourstylename”
  4. Un-Numbered Lists: “UL.ms-rteCustom-yourstylename”
  5. Basic text: ”.ms-rteCustom-yourstylename”

Note:  The stylesheet used for replacing the default set of styles in the HtmlEditor must be called HtmlEditorCustomStyles.css . If you don’t register your own HtmlEditorCustomStyles.css file in your master page, the HtmlEditor control automatically registers the HtmlEditorCustomStyles.css located in the /_layouts/1033/styles directory. Then, in your own css file you can add the desired classes with the prefix set as PrefixStyleSheet. This behaviour is the same with the HtmlEditorTableFormats.css file.

More informations:

http://office.microsoft.com/en-us/sharepointdesigner/HA101741401033.aspx

http://msdn.microsoft.com/en-us/library/ms551040.aspx

Advertisements

One Response to “Custom CSS Styles in the SP RichText Editor DropDown”

  1. […] Custom CSS Styles in the SP RichText Editor DropDown […]

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

 
%d bloggers like this: