1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / help styling the FormatBlock tool in RadEditor

help styling the FormatBlock tool in RadEditor

6 posts, 0 answered
  1. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    29 Jun 2010
    Link to this post
    I am trying to get the FormatBlock tool in RadEditor to point to a css file that I am using, so that within the RadEditor the dropdown will accurately reflect the css for my code block tags on the pages.

    The only way I have been able to do this is to put an inline style in the EditorToolsFile.xml <paragraphs> tag.

    I would rather point it to the same css file I am using for the pages or the css file that I am using for the Custom CSS classes tool in RadEditor.

    How do I accomplish this?

    Thanks
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    29 Jun 2010
    Link to this post
    Hi Michael Waters,

    The Paragraph style dropdown of RadEditor displays a predefined set of styles by default. This set is defined by the Paragraphs collection. You can add items to the Paragraphs collection

    • declaratively
    • programmaticall
    • ToolsFile.

    It is possible to style the dropdown items by:

    • defining a global heading style on the page with the editor, e.g.

      <style type="text/css">
      h1
      {
      font-family: Garamond, Helvetica, "Times New Roman", "Nueva Roman", Serif;
      font-weight: normal;
      padding: 0 4px;
      }
      <style>
    • setting an inline style to the item title and tag attributes, e.g.

      <telerik:EditorParagraph Title="<H2 style='font-family: Trebuchet MS;'>Heading 2</H2>" Tag="<H2 style='font-family: Trebuchet MS;'>" />
    • setting a css class name to the item's title and tag attribute:

      <telerik:EditorParagraph Title="<H3 class='serif'>Heading 3<H3>" Tag="<H3 class='serif'>" />

    Note that if you want to modify one of the embedded templates of Sitefinity where you want to include your theme css or another stylesheet you will not be able to use the way where you are defining a global heading style on the page with the editor

    • You have to declare the style inline directly into the control template
    • Use CssFileLink control to make a reference to your stylesheet
    <telerik:CssFileLink runat="server"  FileName="~/App_Themes/Emerald-Green/test.css" Media="screen" />

    You might find these posts useful as well




    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    29 Jun 2010
    Link to this post
    Ivan,

    Thanks for the response, however, I have already read this and am trying to figure out exactly how I need to set this up. 

    I think the cssfile property is possibly what I want to do, but where am I supposed to put that?
    Do I put in the ContentDesigner.ascx above the RadEditor control??

    ----------------------------
    you wrote:
    Note that if you want to modify one of the embedded templates of Sitefinity where you want to include your theme css or another stylesheet you will not be able to use the way where you are defining a global heading style on the page with the editor

    • You have to declare the style inline directly into the control template
    • Use CssFileLink control to make a reference to your stylesheet
    <telerik:CssFileLink runat="server"  FileName="~/App_Themes/Emerald-Green/test.css" Media="screen" />

    ----------------------------------

    Im also trying to make the RadEditor display correctly what my css for the page will look like and set some entries for the Custom Class dropdown as well.  Below is what I have done.  Please advise on where I need to remove things and where I need to keep / modify things.  At this point, I am pretty confused.

    I currently have the following in the GenericContentDesigner.ascx (note lines 15-18):

    01.<telerik:RadEditor 
    02.    runat="server" 
    03.    ID="textEditor"
    04.    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    05.    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"    
    06.    Skin="WebBlue"    
    07.    NewLineBr="False"
    08.    Height="360px" 
    09.    Width="98%"
    10.    ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
    11.    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    12.    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    13.    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    14.    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    15.    <CssFiles>
    16.        <telerik:EditorCssFile Value="~/App_Themes/waters/editor_styles.css" />
    17.        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />        
    18.    </CssFiles>
    19.</telerik:RadEditor>

    Below is the editor_styles.css file I point to in line 16 above:

    01.body 
    02.{
    03.    font-family: Arial, Helvetica, sans-serif;
    04.    font-family: sans-serif;
    05.    font-size: small;
    06.    color:Black;
    07.    background-color:Aqua;
    08.}
    09.  
    10.
    11.{
    12.    margin: 0;
    13.    padding: 0; 
    14.}
    15.  
    16.p {
    17.    margin: 5px 0px 5px 0px;
    18.    padding: 0;
    19.    font-size: 1em;
    20.}
    21.  
    22.h1
    23.{
    24.    font-weight: bold;
    25.    font-size: 1.5em;
    26.    padding: 15px 0 15px 0;
    27.    color: #666666;
    28.}
    29.h2
    30.{
    31.    font-weight:bold;
    32.    font-size: 1.3em;
    33.    padding:15px 0 15px 0;
    34.    color:Lime;
    35.      
    36.}
    37.h3
    38.{
    39.    font-weight:bold;
    40.    font-size: 1.1em;
    41.    padding:0px;
    42.}
    43.  
    44..Header1
    45.{
    46.    font-weight:bold;
    47.    font-size: 1.5em;
    48.    color:Red;
    49.}
    50..Header2
    51.{
    52.    font-weight:bold;
    53.    font-size: 1.3em;
    54.    color:green;
    55.}
    56..Header3
    57.{
    58.    font-weight:bold;
    59.    font-size: 1.1em;
    60.    color:Lime;
    61.}
    62.  
    63..important
    64.{
    65.    color:red;
    66.    font-weight:bold;
    67.}
    68..orange
    69.{
    70.    color:#ff6600;
    71.}
    72..nobottompadding
    73.{
    74.    padding-bottom:0px;
    75.}


    ... and in the ControlsConfig.xml file I have:

    1.<viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Sitefinity/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />

    ... this is a part of my editorTools.xml file:

    01.<paragraphs>
    02.   <!-- <paragraph name="Normal" value="<p>" />
    03.    <paragraph name="<H1>Heading 1</H1>" value="<H1>" />
    04.    <paragraph name="<H2>Heading 2</H2>" value="<H2>" />
    05.    <paragraph name="<H3>Heading 3</H3>" value="<H3>" />-->  
    06.  </paragraphs>
    07.  
    08.  <!-- below cssFiles changes what the GenericContent Editor text looks like when working in it
    09.  <cssFiles>
    10.    <item name="~/App_Themes/waters/editor_styles.css" />
    11.  </cssFiles>-->
    12.  <!--   ____END COMMENT_______    -->
    13.    
    14.  <classes>
    15.    <!--  Below two classes were already in here... commented out... mw4
    16.    <class name="Add CssClasses collection here:" value=".attention" />
    17.    <class name="EditorToolsFile.xml" value=".read" />-->
    18.  </classes>

    If you need any more information, let me know.

    Thanks,
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    29 Jun 2010
    Link to this post
    Hello Michael Waters,

    For both the options that I suggested, modifications have to be made inside GenericContentDesigner.ascx. Note that the external template is mapped to the control only after application restart. Modifications inside ControlsConfig file do not take effect before you restart the application.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Michael Waters
    Michael Waters avatar
    32 posts
    Registered:
    22 Mar 2010
    29 Jun 2010
    Link to this post
    Ivan,

    Let me show you what I have done and what is reflected in the RadEditor and in my pages.

    I cannot get this to work properly.

    For both tests, I have the ControlsConfig.xml file like this:
    1.<viewSettings hostType="Telerik.Cms.Engine.WebControls.Design.GenericContentDesigner" layoutTemplatePath="~/Sitefinity/ControlTemplates/Generic_Content/GenericContentDesigner.ascx" />


    Test A)
    For this test here is my GenericContentDesigner.ascx file (Note: there is no telerik:CSSFileLink, rather a <cssfiles> tag section in lines 19-22):
    01.<%@ Control Language="C#" %>
    02.<telerik:JsFileLink id="jsLink" runat="server" ScriptType="jQuery" />
    03.  
    04.<div class="ctrlPropsGeneric">
    05.<telerik:RadEditor 
    06.    runat="server" 
    07.    ID="textEditor"
    08.    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    09.    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"    
    10.    Skin="WebBlue"    
    11.    NewLineBr="False"
    12.    Height="360px" 
    13.    Width="98%"
    14.    ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
    15.    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    16.    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    17.    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    18.    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    19.    <CssFiles>        
    20.        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
    21.        <telerik:EditorCssFile Value="~/App_Themes/waters/editor_styles.css" />        
    22.    </CssFiles>
    23.</telerik:RadEditor>

    My EditorCSSFile.css is completely blank.

    Here is my editor_styles.css file for my body and H2 entries:
    01.body 
    02.{
    03.    font-family: Arial, Helvetica, sans-serif;
    04.    font-family: sans-serif;
    05.    font-size: small;
    06.    color:Black;
    07.    background-color:Aqua;
    08.}
    09.h2
    10.{
    11.    font-weight:bold;
    12.    font-size: 1.3em;
    13.    padding:15px 0 15px 0;
    14.    color:Lime;
    15.      
    16.}

    for TEST A results, please see the attached file titled:
    RadEditorAndPageBackground_woutCSSFileLink.png

    - for TEST A, the results were not what I am desiring because this changes the page background in all my pages... I would only wanting this reflected in the RadEditor.  ... Granted I would not use a different background color other than white in the RadEditor.  I was just using this for an example.

    -----------------------------------------------------------
    TEST B)
    For this test here is my GenericContentDesigner.ascx file (Note: there IS a telerik:CSSFileLink, but I have deleted the <cssfiles> tag section):
    01.<%@ Control Language="C#" %>
    02.<telerik:JsFileLink id="jsLink" runat="server" ScriptType="jQuery" />
    03.  
    04.<div class="ctrlPropsGeneric">
    05.<telerik:RadEditor 
    06.    runat="server" 
    07.    ID="textEditor"
    08.    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
    09.    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"    
    10.    Skin="WebBlue"    
    11.    NewLineBr="False"
    12.    Height="360px" 
    13.    Width="98%"
    14.    ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
    15.    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    16.    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    17.    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    18.    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    19.</telerik:RadEditor>
    20.  
    21.<telerik:CssFileLink ID="CssFileLink1" runat="server"  FileName="~/App_Themes/waters/editor_styles.css" Media="screen" />

    My EditorCSSFile.css is completely blank.

    Here is my editor_styles.css file for my body and H2 entries:
    01.body 
    02.{
    03.    font-family: Arial, Helvetica, sans-serif;
    04.    font-family: sans-serif;
    05.    font-size: small;
    06.    color:Black;
    07.    background-color:Yellow;
    08.}
    09.h2
    10.{
    11.    font-weight:bold;
    12.    font-size: 1.3em;
    13.    padding:15px 0 15px 0;
    14.    color:red;
    15.      
    16.}


    for TEST B results, please see the attached file titled:
    RadEditorAndPageBackground_wCSSFileLink.png

    - for TEST B, the results were not what I am desiring because this changes the page background in all my pages... I would only wanting this reflected in the RadEditor.  ... Granted I would not use a different background color other than white in the RadEditor.  I was just using this for an example. This TEST does, however make the <paragraphs> section styles to reflect properly.
    -------------------------------------------------------

    I guess what I need to figure out is:
    A) How can I make the RadEditor FormatCodeBlock (<paragraphs>) dropdown display the same way that my css will be reflected in my live pages...
    B) How can I make the RadEditor body, when I am editing pages, reflect the css that will be reflected in my live pages without messing up my live pages? ... and do this in a manner where I only have to change one css file rather than change this in multiple places...
    C) I also want custom to add the Custom Class dropdown as well that will be reflected in the RadEditor.

    I have noticed this line in the GenericContentDesigner.ascx file:
    1.ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"

    and the following files in that directory:
    Editor.css
    EditorContentArea.css
    EditorCssFile.css
    EditorDialogs.css

    So what the heck are these files for?
    I notice that if I put a body background color in the EditorContentArea.css file, it does NOT reflect this back to my live pages, but WILL reflect this in the Editor.  Could using these files be the solution?

    Sorry for so long, but im just confused and really want to get this straight.
    I would appreciate a full response and, then, I promise I will leave you guys alone.... atleast for a little while! ;-)

    Thanks,


  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Jul 2010
    Link to this post
    Hi Michael Waters,

    Thank you for getting back to us.

    The rad editor works by pulling the CSS files from the page it resides on in order to display the content in its content area the same way as the page does. The Generic Content Designer control is used to edit Generic Content on your pages. You would normally expect that the editor picks up the CSS from the page's theme, however this is not the case. The reason for this is because The editor is opened in a RadWindow which window is a page different than the one where content resides, this page has its own styles. I hope this is not too confusing.

    By default we have the Editor Content Area CSS file empty - this would show the content using default styling rules. If you wish your editor to show the same styles as from your pages you can
    1) Copy/paste your styles from the page's theme into this file.
    2) Use a css import statement in this file to import your page's css file

    You should be working with the EditorContentArea.css file

    All the best,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
6 posts, 0 answered