Custom CSS doesn't totally apply in rad editor

[Jeroen]

Hi I'm using custom styles for the rad editor, the problem is that the css isn't totally applied.
For example when I type default text the correct css is applied, but when I mark this text as a link, the text color doesn't change. When i check in the page, the css is correctly, but in edit mode (and preview mode of the rad editor) the css isn't totally correct.

In the configfile i applied the CssFIles property as followed:
<property name="CssFiles">
  <item>\wpresources\RadEditorSharepoint\5.3.2.0_1f131a624888eed\Resources\CssEditor.css</item>
</property>

The Css.Editor looks as follows:

@import url("/Style%20Library/dsm_gs/DSMGS_Core.css");
@import url("/Style%20Library/dsm_gs/DSMGS_Custom.css");
@import url("/Style%20Library/dsm_gs/DSMGS_Default.css");
@import url("/Style%20Library/dsm_gs/HtmlEditorCustomStyles.css");
@import url("/Style%20Library/dsm_gs/HtmlEditorTableFormats.css");

The .css file i import are the correct ones to use, also the order of importing is correct.
I don't know why the editor doesn't apply the whole css just a part of the css.

Can somebody help me please?

Thanx in advance,

Jeroen

[Stanimir]

Hi Jeroen,

You can find information on Defining custom CSS styles in the RadEditor for MOSS in the following help article http://www.telerik.com/help/aspnet-ajax/defining-custom-css-styles.html.

I think that you will find the article helpful.


Kind regards,
Stanimir
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Siang Peng]

Hi Stanimir,

I had tried the steps in the article http://www.telerik.com/help/aspnet-ajax/defining-custom-css-styles.html but there is still no change in the editor CSS styles. I had tried to edit the HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css, I also tried to create CssEditor.css under  /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources but there is no effect on the editor style.
I am using the RadEditor for MOSS (RadHtmlField control), Anything which I missed up? Thanks!

Regards,
Siang Peng

[Stanimir]

Hi Siang Peng,

In order to help you further we will need you to provide us with your configuration files (ConfigFile.xml, ListConfigFile.xml, ToolsFile.xml, ListToolsFile.xml). This way we will be able to reproduce the problem on our test sever.

Thank you.


Regards,
Stanimir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Siang Peng]

Hi Stanimir,

Here is the ConfigFile.xml and ToolFile.xml:
There is no change to the List*.xml.
Thanks!

ConfigFile.xml:

<?xml version="1.0" encoding="utf-8" ?>
<!-- ==============================================================================================
 Config File valid structure:
 <configuration>
    <property>...</property>
    ...
  <property>
   <item>...</item>
   <item>...</item>
   ...
  </property>
  ...
 </configuration>
=============================================================================================== -->
<configuration>
  <property name="AllowThumbGeneration">True</property>
  <property name="ConvertToXhtml">True</property>
  <property name="EnableDocking">False</property>
  <property name="ShowHtmlMode">True</property>
  <property name="ShowPreviewMode">False</property>
  <property name="ToolbarMode">ShowOnFocus</property>
  <property name="ToolsWidth">680px</property>
  <property name="Skin">Telerik</property>
 
   <property name="AllowScripts">True</property>
  
  <property name="ImagesPaths">
     <item>/SiteCollectionImages</item>
     <item>PublishingImages</item>
 </property>
 <property name="MaxUploadFileSize">2048000</property>

  <property name="FlashPaths">
     <item>/SiteCollectionImages</item>
     <item>PublishingImages</item>
  </property>
  <property name="FlashFilters">
    <item>*.swf</item>
  </property>
 
   <property name="MediaPaths">
     <item>/SiteCollectionImages</item>
     <item>PublishingImages</item>
   </property>
   <property name="MediaFilters">
     <item>*.mpeg</item>
     <item>*.avi</item>
 </property>
 
  <property name="TemplatePaths">
    <item>/Templates</item>
  </property>
  <property name="TemplateFilters">
    <item>*.html</item>
    <item>*.htm</item>
  </property>

</configuration>

ToolFile.xml:
<root>
  <modules>
    <module name="RadEditorDomInspector" />
  </modules>
  <tools name="MossTools1">
    <tool name="AjaxSpellCheck" />
    <tool name="FindAndReplace" />
    <tool separator="true" />
    <tool name="Cut" shortcut="CTRL+X" />
    <tool name="Copy" shortcut="CTRL+C" />
    <tool name="Paste" shortcut="CTRL+V" />
    <tool separator="true" />
    <tool name="Undo" shortcut="CTRL+Z" />
    <tool name="Redo" shortcut="CTRL+Y" />
    <tool separator="true" />
    <tool name="MOSSLinkManager" shortcut="CTRL+K" />
    <tool name="Unlink" shortcut="CTRL+SHIFT+K" />
    <tool name="ImageManager" shortcut="CTRL+G" />
    <tool name="MOSSTemplateManager" />
    <tool separator="true" />
    <tool name="MOSSInsertTable" />
    <tool name="SetTableProperties" />
    <tool name="ToggleTableBorder" />
    <tool separator="true" />
    <tool name="MOSSInsertTableElement">
      <tool name="InsertRowAbove" />
      <tool name="InsertRowBelow" />
      <tool name="InsertColumnLeft" />
      <tool name="InsertColumnRight" />
      <tool name="DeleteRow" />
      <tool name="DeleteColumn" />
      <tool name="SplitCell" />
    </tool>
    <tool name="MergeColumns" />
    <tool separator="true" />
    <tool name="ToggleSource" />
    <tool name="FormatStripper" />
    <tool separator="true" />
    <tool name="MOSSRightToLeft" />
    <tool name="MOSSLeftToRight" />
    <tool separator="true" />
    <tool name="ForeColor" />
    <tool name="BackColor" />
  </tools>
  <tools name="MossTools2">
    <tool name="ApplyClass"/>
    <tool name="FormatBlock" />    
    <tool separator="true" />
    <tool name="FontSize" />  
    <tool separator="true" />
    <tool name="Bold" shortcut="CTRL+B" />
    <tool name="Italic" shortcut="CTRL+I" />
    <tool name="Underline" shortcut="CTRL+U" />
    <tool separator="true" />
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool separator="true" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true" />
    <tool name="Indent" />
    <tool name="Outdent" />
  </tools>
  <tools name="MossTools3">
  <tool name="TemplateManager" />
   <tool name="FlashManager" />
   <tool name="MediaManager" />
  </tools>
  <paragraphs>
     <paragraph name="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>" />
     <paragraph name="&lt;H2>Heading 2&lt;/H2>" value="&lt;H2>" />
   </paragraphs>
   <classes>
      <class name="Clear Class" value="" />
   </classes>
  <contextMenus>
    <contextMenu forElement="*">
      <tool name="Cut"/>` 
      <tool name="Copy"/>
      <tool name="Paste"/>
    </contextMenu>
  </contextMenus>
</root>

Regards,
Siang Peng

[Stanimir]

Hi Siang Peng,

I tested the issue and the problem was in the following code in your ToolsFile.xml.

<classes>
    <class name="Clear Class" value="" />
</classes>

Please remove this code and make sure that you have the style classes in the CssEditor.css file, which should be located in the same folder as your configuration files.


All the best,
Stanimir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.