How to replace or remove HTML editor styles in Sharepoint 2010 Feed

Question

I want to replace the HTML Editor styles in the HTML Style drop-down list on the editor ribbon with the styles of my own creation. According to this MSDN article http://msdn.microsoft.com/en-gb/library/ms551040.aspx , as soon as I start putting classes starting with the ms-rteCustom-XXXX template (XXXX is a custom name) in the CSS loaded On the page, existing styles should be replaced. I expect this to leave only my styles in the drop-down list, however I can see all the original Sharepoint styles, and then my styles.

Am I missing something in the documentation, or is he lying to me? As far as I can tell, the original styles come from corev4.css, which is also loaded by the main page, however, since my CSS is loaded later, it seems that any styles already in the drop-down list should be cleared.

Here is one of the new / custom CSS styles that I use;

 H3.ms-rteElement-H3CompanyName { -ms-name:"Heading 3"; } .ms-rteElement-H3CompanyName { font-family: Arial, Helvetica, sans-serif; font-size: small; font-style: normal; line-height: normal; font-weight: bold; font-variant: normal; text-transform: none; color: #000000; } 

Answer 1

It seems that the only way to remove elements from the Markup Style drop-down list is to change the files in the Sharepoint main hive. A reset IIS is probably a good idea after these changes, then ctrl-F5 to completely update what the browser sees.

This is usually not recommended, as these files may change as part of the Sharepoint update, but this seems to be the only way that works reliably.

To remove unnecessary elements from the Markup Style drop-down list, remove all CSS rules that affect the classes named in this template .ms-rteElement-XXXX . Our own styles for use in this menu are added to one of our own stylesheets.

There are four files that need to be changed, two copies of Controls.css and two copies of Corev4.css.

They are located as follows:

 Controls.css C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\PublishingLayouts\en-us\Controls.css COREV4.CSS C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\COREV4.CSS CONTROLS.CSS C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\CONTROLS.CSS COREV4.CSS C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\COREV4.CSS 

Answer 2

The best way to remove styles, considering this a publication page, is to change the control in the page layout.

 <PublishingWebControls:RichHtmlField FieldName="PublishingPageContent" HasInitialFocus="True" MinimumEditHeight="400px" runat="server" PrefixStyleSheet="customPrefix"/> 

By announcing a new PrefixStyleSheet, it will remove all default styles so that you can only provide your own.

Answer 3

Instead of JavaScript, you can also use css to hide markup styles. For example, here's how to hide the 1s header.

 #Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle0-Menu, #Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle4-Menu {display:none;} 

Answer 4

I'm not sure where you read that "as soon as custom styles are added, old ones are deleted." As I read the documentation, this is consistent with my experience with this - that user styles are simply added to the bottom of the drop-down list.

What you could do is override the inline ones with your custom style. Just use the same name as the OOTB styles and enter your own styles in the CSS file. Example: To override the Callout 1 style, add a rule for .ms-rteElement-Callout1 in your CSS and add your own style there.

Another option is to write a JavaScript function and attach it to the modified ribbon event using

 SP.UI.Workspace.add_resized(your_javascript_function_name); 

Inside your function, you can use the jQuery operator to remove all (or the first X) items from the drop-down list in the ribbon control.

Answer 5

I would add your CSS to the CSS alternative under Look and Feel in your site’s settings. If you do not see this option, enable publishing options.

Then add the necessary CSS. It is the last to load and, to be sure, you can add! Important for styles.

Look here for more details ... Halfway down the page.

Sharepoint 2010 themes and alternative CSS for kernel overrides

CHANGE FOR COMMENT BELOW:

 $('a#Ribbon.EditingTools.CPEditTab.Markup.ElementWithStyle-Large').click(function(){ $('a#ElementWithStyle3-Menu').parent().hide(); }); 

Answer 6

I finally got this working using pure Javascript. What I did was register the PageComponent component and then add a handler for the corresponding command (in the case of markup styles, the command is called "ElementWithStyleOptionsOpen").

Here is the MSDN documentation on how to develop PageComponents: http://msdn.microsoft.com/en-us/library/ff407303.aspx#Y300

In my regular PageComponent class, I registered "ElementWithStyleOptionsOpen" as GlobalCommand:

 getGlobalCommands: function () { return ['ElementWithStyleOptionsOpen']; } 

... and added it to canHandleCommand:

 canHandleCommand: function (commandId) { if (commandId === 'ElementWithStyleOptionsOpen') { return true; } else { return false; } 

Finally, my HandleCommand looks like this:

 handleCommand: function (commandId, properties, sequence) { if(commandId=='ElementWithStyleOptionsOpen') { //Remove styles that have the word Colored jQuery('li.ms-cui-menusection-items:contains("Colored")').remove(); } }