FormatBlock does not inherit custom CSS

[Rizwan]

Hi
  I have added a custom css file in editor like this

 

<CssFiles>

 

 

<telerik:EditorCssFile Value="StyleSheet/user_override.css" />

 

 

</CssFiles>

 

css file contains this
h1
{color: Red;}

now in format block dropdown "Heading 1" is still displaying black color but on selection in design it displays red color.

How can I simulate the custom css class to reflect in FormatBlock Dropdown ?


any suggestions would be highly appreciated.

Thanks
Rizwan Bashir

[Rumen]

Hi Rizwan,

The RadEditor's content area is an IFRAME element which is another document different from the document of the page. Please note that the CssFiles or ContentAreaCssFile properties apply classes from external css file only to the content area of RadEditor but not to the FormatBlock dropdown, which is part of the main page.

The FormatBlock tool of RadEditor is part of the page and it does not have access to the styles applied only to the content area of RadEditor. That is why the H1 item in the dropdown does not look like the H1 formatted content in the content area.

If you remove the CssFiles property then the editor will automatically copy the classes from the parent page. So if you set a global H1 tag on the page then it will be applied to the FormatBlock h1 item as well as to the h1 formatted content in the content area:

<style type="text/css">
H1 { color: red; }
</style>

You can find other ways to style the FormatBlock items in this live example: Paragraph Styles.

Best wishes,
Rumen
the Telerik team