Default style for Rad Editor

6 posts, 0 answers
  1. Mike
    Mike avatar
    3 posts
    Member since:
    Mar 2011

    Posted 25 Mar 2011 Link to this post

    We are evaluating Rad Editor (version 5) for MOSS. We have a custom theme for our site and after using the Rad Editor, we noticed that the styles are not the same as our theme. What my end result is that when ever a user adds this webpart to their site,  and adds content, the fonts and styles would be the same fonts as our custom theme. I have read the documentation at http://www.telerik.com/support/kb/aspnet-ajax/sharepoint/populating-radeditor-s-apply-css-class-dropdown-with-custom-styles.aspx and followed these instructions, but it seems that when I add content to the page it does not follow the new CSS file that I created at  /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/custom.css. I added this to my toolsfile.xml

    <cssFiles> 
        <item name="/_wpresources/Custom.css " /> 
      </cssFiles>


    It looks like its still referencing HtmlEditorTableFormats.css and HtmlEditorCustomStyles.css.
    Again, my end result would be that when a user adds content to this webpart it would use our theme css file. I just downloaded this webpart and haven't had much time to play with  it.
  2. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 25 Mar 2011 Link to this post

    Hello Joe,

    Review the following online help article: Defining custom CSS styles.

    If after checking the help you still have problems with setting styles in the content area, send me the ConfigFile.xml, ToolsFile.xml, ListConfigFile.xml, ListToolsFile.xml, CssEditor.css (if you decide to make one) files, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder. You can also send me the Custom.css. I will review them and advice you further.


    Greetings,
    Stanimir
    the Telerik team

  3. Mike
    Mike avatar
    3 posts
    Member since:
    Mar 2011

    Posted 25 Mar 2011 Link to this post

    I looked at the documentation and after reading through it, I don't want to give the users the ability to change the CSS from the drop down. Perhaps the paragraph drop downs are best to use for what I am looking for:

    When the user types in content, I want the default font to be Tahoma and color #454545 and with a size of 8pt. From here if the user needs to change the look and feel of the content, the can select the paragraph drop down to select H1, H2, etc. However I still need some type of CSS formatting to follow for links and bullets. I guess the real question is, does the editor follow this external css file by default or does the user have to select it?

    I also noticed that when typing content everything is black, but after selecting OK or Apply, the fonts change. I have included some attachments.

    Config File:

      <?xml version="1.0" encoding="utf-8" ?>
    - <!--
     ==============================================================================================
    	Config File valid structure:
    	<configuration>
        <property>...</property>
        ...
    		<property>
    			<item>...</item>
    			<item>...</item>
    			...
    		</property>
    		...
    	</configuration>
    =============================================================================================== 
      -->
    - <configuration>
      <property name="ToolbarMode">ShowOnFocus</property>
      <property name="ToolsWidth">680px</property>
      <property name="EditModes">Design,Preview</property>
      </configuration>

    ToolsFile:
    - <root>
    - <modules>
      <module name="RadEditorDomInspector" />
      </modules>
    - <cssFiles>
      <item name="/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/CSSEditor.css" />
      </cssFiles>
    - <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 separator="true" />
      <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 separator="true" />
      <tool name="InsertOrderedList" />
      <tool name="InsertUnorderedList" />
      <tool separator="true" />
      <tool name="Indent" />
      <tool name="Outdent" />
      </tools>
    - <contextMenus>
    - <contextMenu forElement="*">
      <tool name="Cut" />
      <tool name="Copy" />
      <tool name="Paste" />
      </contextMenu>
      </contextMenus>
      </root>

    LISTCONFIG:
      <?xml version="1.0" encoding="utf-8" ?>
    - <!--
     ==============================================================================================
    	Config File valid structure:
    	<configuration>
        <property>...</property>
        ...
    		<property>
    			<item>...</item>
    			<item>...</item>
    			...
    		</property>
    		...
    	</configuration>
    =============================================================================================== 
      -->
    - <configuration>
      <property name="EditModes">Design,Html</property>
      <property name="Height">240px</property>
      <property name="Width">500px</property>
      </configuration>

    LISTTOOLS:
    - <root>
    - <tools name="EnhancedToolbar">
      <tool name="Cut" shortcut="CTRL+X" />
      <tool name="Copy" shortcut="CTRL+C" />
      <tool name="Paste" shortcut="CTRL+V" />
      <tool name="FormatStripper" />
      <tool separator="true" />
      <tool name="Undo" shortcut="CTRL+Z" />
      <tool name="Redo" shortcut="CTRL+Y" />
      <tool separator="true" />
      <tool name="MOSSInsertTable" />
    - <tool name="MOSSInsertTableElement">
      <tool name="InsertRowAbove" />
      <tool name="InsertRowBelow" />
      <tool name="InsertColumnLeft" />
      <tool name="InsertColumnRight" />
      </tool>
    - <tool name="MOSSDeleteTableElement">
      <tool name="DeleteRow" />
      <tool name="DeleteColumn" />
      </tool>
      <tool name="SplitCell" />
      <tool name="MergeColumns" />
      <tool separator="true" />
      <tool name="MOSSLinkManager" />
      <tool name="ImageManager" />
      </tools>
    - <tools name="BasicToolbar">
      <tool name="FontName" />
      <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" shortcut="CTRL+L" />
      <tool name="JustifyCenter" shortcut="CTRL+E" />
      <tool name="JustifyRight" shortcut="CTRL+R" />
      <tool separator="true" />
      <tool name="InsertOrderedList" />
      <tool name="InsertUnorderedList" />
      <tool name="Indent" />
      <tool name="Outdent" shortcut="CTRL+M" />
      <tool separator="true" />
      <tool name="ForeColor" />
      <tool name="BackColor" />
      <tool separator="true" />
      <tool name="MOSSLeftToRight" />
      <tool name="MOSSRightToLeft" />
      </tools>
    - <contextMenus>
    - <contextMenu forElement="*">
      <tool name="Cut" />
      <tool name="Copy" />
      <tool name="Paste" />
      </contextMenu>
      </contextMenus>
      </root>
  4. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 29 Mar 2011 Link to this post

    Hello Joe,

    There is no need to specify the cssFiles collection in the ToolsFile.xml if you are setting CssEditor.css. so remove the following element:
    <cssFiles>
      <item name="/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/CSSEditor.css" />
    </cssFiles>

    Also send me CssEditor.css content. I will review it and advise you further.

    As for the images. I can tell that different styling is loaded in the page and in the editor's content are. You need to make sure that the same styling is loaded in both of them.

    Kind regards,
    Stanimir
    the Telerik team
  5. Mike
    Mike avatar
    3 posts
    Member since:
    Mar 2011

    Posted 31 Mar 2011 Link to this post

    body{
    background-color:#FFFFFF;
    font-family:verdana,arial,helvetica,sans-serif;
    color:#454545;

    }

     

    .ms-WPBody P {
     
     font:normal 8.5pt "Tahoma" !important;
     color:#454545;
     text-align:left;

    }

     

    .ms-WPBody
    {
    font-size:8.5pt;
    /*font-family:verdana,arial,helvetica,sans-serif;*/

    font-family:tahoma,verdana;
    color:#454545;

    }
    .ms-WPBody A:link {
    color:#003399;
    text-decoration:none;
    font-weight:bold;

    }
    .ms-WPBody A:visited
    {
    color:#4c4c4c;
    text-decoration:none;
    font-weight:bold;
    }

    .ms-WPBody A:hover
    {
    color:#000000;
    text-decoration:none;
    font-weight:bold;

    }

  6. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 01 Apr 2011 Link to this post

    Hi Joe,

    I created a small video where you can see how the styling in the page where the editor is loaded differs with the styling in the content area: http://screencast.com/t/vGFRgWlhMhEw. If I wanted to be the same I had to add the CssEditor.css in the master page for example.


    Regards,
    Stanimir
    the Telerik team
Back to Top