Custom CSS doesn't totally apply in rad editor

6 posts, 0 answers
  1. Jeroen
    Jeroen avatar
    19 posts
    Member since:
    Feb 2009

    Posted 02 Apr 2009 Link to this post

    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




  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 06 Apr 2009 Link to this post

    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.

  3. Siang Peng
    Siang Peng avatar
    2 posts
    Member since:
    Jun 2009

    Posted 01 Jun 2009 Link to this post

    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
  4. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 01 Jun 2009 Link to this post

    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.
  5. Siang Peng
    Siang Peng avatar
    2 posts
    Member since:
    Jun 2009

    Posted 01 Jun 2009 Link to this post

    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

  6. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 01 Jun 2009 Link to this post

    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.
Back to Top