This is a migrated thread and some comments may be shown as answers.

difficulty applying custom styles to formatblock dropdown

2 Answers 120 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Christine
Top achievements
Rank 1
Christine asked on 19 Mar 2010, 09:32 PM

I have been having difficulty getting my custom styles to apply to the Paragraph Styles dropdown in the RadEditor control within a Sitefinity website.
 

I have declared my H1, H2, H3, H4 styles in an external stylesheet in ~/Sitefinity/Admin/ControlTemplates/radeditor.css.

I have also added those same H1, H2, H3, H4 styles to the ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css file. 

In the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml, I have added the following:

  <cssFiles> 
   <item name="~/Sitefinity/Admin/ControlTemplates/radeditor.css" /> 
  </cssFiles> 
    
  <paragraphs>    
   <paragraph name="Normal" value="&lt;p>" />    
   <paragraph name="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>" />    
   <paragraph name="&lt;H2>Heading 2&lt;/H2>" value="&lt;H2>" />    
   <paragraph name="&lt;H3>Heading 3&lt;/H3>" value="&lt;H3>" />    
   <paragraph name="&lt;H4>Heading 4&lt;/H4>" value="&lt;H4>" />    
  </paragraphs>    
 

I even added the .reDropDownBody h1, .reDropDownBody h2, .reDropDownBody h3, and .reDropDownBody h4 styles to both the ~/Sitefinity/Admin/ControlTemplates/radeditor.css and the ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css files, as recommended in this thread

The styles are applied appropriately to the window of the editor, but not to the dropdown. (See attached images.) 

What am I missing?

Thanks for your help.

 

2 Answers, 1 is accepted

Sort by
0
Accepted
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 21 Mar 2010, 06:48 PM
They should be there eh...it should be smart enough...FEATURE REQUEST TELERIK

The only way I've been able to get it to work is to hardcode the styles in...which is how I was told to do it in a ticket a while ago

You can see an example of how to "hack" it in here
http://www.telerik.com/community/forums/aspnet-ajax/editor/problem-formatting-formatblock-dropdown-in-radeditor-in-sitefinity-cms.aspx

0
Christine
Top achievements
Rank 1
answered on 22 Mar 2010, 08:48 PM

Hacking the styles in-line works, but I thought that there would be a more elegant solution than that. 

  <paragraphs> 
   <paragraph name="Normal" value="&lt;p>" /> 
   <paragraph name="&lt;H1 style='font-size:22px; color:#2180ac; font-weight:bold;'>Heading 1&lt;/H1>" value="&lt;H1>" /> 
   <paragraph name="&lt;H2 style='font-size:18px; color:#06437a; font-weight:bold;'>Heading 2&lt;/H2>" value="&lt;H2>" /> 
   <paragraph name="&lt;H3 style='font-size:16px; color:#64a6c5; font-weight:bold;'>Heading 3&lt;/H3>" value="&lt;H3>" /> 
   <paragraph name="&lt;H4 style='font-size:14px; color:#666666; font-weight:bold;'>Heading 4&lt;/H4>" value="&lt;H4>" /> 
  </paragraphs> 

Thanks.

Tags
Editor
Asked by
Christine
Top achievements
Rank 1
Answers by
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Christine
Top achievements
Rank 1
Share this question
or