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

Forums / Designing with Sitefinity / CSS style inside r.a.d.editor

CSS style inside r.a.d.editor

21 posts, 0 answered
  1. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    15 May 2008
    Link to this post
    Hello telerik,

    Is there a way to see the content you type in the r.a.d.editor to match the style that is in the theme? The editor is not WYSIWYG right now. I know there is some sort of property to set this, but I don't remember it.

    I can imagine that it works a bit different in Sitefinity?

    Daniel
  2. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    15 May 2008
    Link to this post
    Hi Daniel,

    You need to add the styles from your page theme to the ~/Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorCssFile.css file if you haven't changed the value of the CssFiles property.  

    You can also open the ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx and specify a string array as the list of CSS files, which you need the editor to use, for example:

    <telerik:RadEditor   
        runat="server"   
        ID="RadEditor1" 
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml" 
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorContentArea.css" 
        ...  
        <CssFiles>  
            <telerik:EditorCssFile Value="~/ExternalCssFiles/Styles1.css,~/ExternalCssFiles/Styles2.css" />  
        </CssFiles>  
        ...  
    </telerik:RadEditor> 

    Refer to this online help article for more details:
    External CSS Files

    Kind regards,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Brett
    Brett avatar
    5 posts
    Registered:
    27 Mar 2008
    30 Jun 2008
    Link to this post
    I'm trying to add my styles into the drop down list of the editor and the information posted isn't working for me. Have things changed with the newest version and patches?

    To be very clear, I want to add additional elements into the drop down list of styles available in edit mode so that our content editors see them  as they are editing content. These are custom styles, things like "byline" or "subtitle". All of these are in the theme of the site and work if someone manually sets the style when they switch to html view but our customers want to set them with the drop down.

    Files that I've tried editing and have seen no change:

    ~\Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorContentArea.css

    ~\Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorCssFile.css

    ~\Sitefinity\Admin\ControlTemplates\Generic_Content\EditorTemplate.ascx - I added text here and it showed up in the menu so I know it's being run

    It seems like what I've been editing changes the styles of the editor tool but does not alter the options of our content editors. I've even searched through the entire installation for the strings that appear in the drop down list to try and figure it out on my own but nothing has come up.

    Any advice is appreciated, thanks.
  4. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    30 Jun 2008
    Link to this post
    Hi Brett,

    You should add your styles to the ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css in
    order to set them for the editor content area.

    Then, in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml, you have to populate the classes collection, e.g.:

      <classes>
      <class name="subtitle" value=".subtitle" />
      </classes>

    For more information about CSS styles with RadEditor for ASP.NET Ajax, see this help article:
    http://www.telerik.com/help/aspnet-ajax/cssstyles.html

    I hope this helps. Let us know if you need any further assistance.

    Sincerely yours,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Brett
    Brett avatar
    5 posts
    Registered:
    27 Mar 2008
    01 Jul 2008
    Link to this post
    Thanks for your help. The solution that I ended up with works but it's not what I was originally expecting and there was a step missing that I found.

    I'd like to clarify what I've learned for any future readers who are trying to do what I've done. If I say anything incorrectly please feel free to correct me.

    Initially I thought that I could add custom classes to the default drop down list that appears in the Sitefinity editor along with items like Heading1 - Heading5 etc. This may be possible but the approach that I'm working with now includes adding a new drop down that is just for applying custom classes. I apologize for my previous posts not being clear but the advice is working like a charm, thanks :)

    I found in another article somewhere that there is an xml document that shows all of the possible settings that can be turned on or off in the generic content editor. This file is found here:
    ~\Sitefinity\Admin\ControlTemplates\EditorToolsFileAll.xml

    After looking at this dictionary of options and comparing it to my file that actually sets my editor's controls (~\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml) I learned a couple of things.

    First off is something in EditorToolsFile.xml
    <tools name="DropdownToolbar" dockable="false"
    This is where the existing drop down for standard formatting exists and where I added the drop down for custom drop downs. The standard formatting dropdown is identified as:

     <tool name="FormatBlock"/> 

    I found the tool in EditorToolsFileAll.xml that allows us to add the drop down for custom CSS in the EditorToolsAll.xml file and added it into the DropDownToolbar section of EditorToolsFile.xml. The result looks like this:
      <tools name="DropdownToolbar" dockable="false"
        <tool name="FormatBlock"/> 
        <tool name="ApplyClass"/> <!-- *** THIS ADDS THE CUSTOM CSS DROP DOWN *** --> 
        <tool name="FormatStripper"/> 
      </tools> 


    Now with the ApplyClass tool added to EditorToolsFile.xml I can follow the directions posted above and my custom styles work in the editor.

    A few things to note.

    Following the previously posted directions does a couple of things.

    The name of the css class that you use has multiple purposes that may not be immediately apparent.
    1. When you add a new class to EditorToolsFile.xml and a style to EditorContentArea.css this defnes how text will look both in the Class selection dropdown and how text will look in wysiwyg mode while editing.
    2. The name of the class you choose is also how the <span> assigned will ultimately render given the chosen theme.

    I mention this because I have one class where it is to be used to render white text over a table that has a grey background. If I directly copy and paste the style from my theme's css to EditorContentArea.css and look at the edtitor I see this:

    When the drop down list for available CSS classes renders it's white text on a white drop down and you can't see the text.

    My solution here was to change the class in EditorContentArea.css so that it has a grey background. Now when an editor clicks the "Apply CSS..." drop down they see an item with a dark background with white text, but when the content is published it adhears to the theme that I've used and does not apply the grey background.

    In summary EditorContentArea.css styles are only for how content will look in the Class selection drop down and while in edit mode. The name of your style needs to be the same between EditorContentArea.css, your theme's css, and the class added into EditorToolsFile.xml.

    Thank you very much for the help, every time that I learn something new about how telerik or Sitefinity works I get even more behind the product. Decoupling how a custom css class works between the editor and the live page's theme was a great decision, it just took me a little while to understand it.






    I thought someone out there might find this helpful and thanks again for the info Rebecca!
  6. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    02 Jul 2008
    Link to this post
    Hi Brett,

    Thanks for sharing your experience with us.
    Your absolutely right in your observation. Indeed, Apply Css Class tool is not enabled by default in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml but I thought you were referring to it here: 
    "I'm trying to add my styles into the drop down list of the editor".
    The FormatBlock tool (Paragraph Style dropdown) is responsible for setting the block elements only; for the other elements, you need the ApplyClass tool.

    Greetings,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Brook
    Brook avatar
    39 posts
    Registered:
    21 Mar 2007
    18 Jul 2008
    Link to this post
    I was implementing this functionality using the latest 3.2 release and when using FireFox 3.0.1, I only get a few of the styles i have added to the CSS list in my tool file.  It works fine and shows the complete list in IE 7.  Not sure if this is a bug or not.  To implement the custom css styles I added approx four of them to the EditorToolsFile.xml, added the four styles to EditorContentArea.css.  Also I am using the latest RadControls for ASP.net Ajax and have my site configured with 3.5 extensions to permit using Linq.

    I have instructed my client to use only the IE browser for the time.  Anyone have the same issues?


  8. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    21 Jul 2008
    Link to this post
    Hi Brook,

    Can you send us your CSS styles which you have added to the Editor? We will inspect them locally and get back to you with a solution or suggestion.

    Thank you for your cooperation in advance.

    Greetings,
    Georgi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Sean
    Sean avatar
    271 posts
    Registered:
    31 May 2006
    04 Aug 2008
    Link to this post
    Hi there,

    I had this same problem, with the classes not showing in the drop down, but in the end it turned out that Firefox was caching and after I cleared the Cache and refreshed the my classes appeared.

    Hope this helps someone else who gets stuck on this.

    Kind Regards
    Sean
  10. Robert
    Robert avatar
    7 posts
    Registered:
    14 Dec 2008
    02 Feb 2009
    Link to this post
    Hi,

    I have tried adding the link to my style sheet but the styles do not show up.

    The style sheet is a file called styles.css in a directory (CBCS) in the App_Themes folder.

    My question is -- Do I need to do anything else in order form my styles to show in the same list as the current Heading1...5. 

    I have set the line to:

    <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css,~/App_Themes/CBCS/style.css" />

    Also where do Heading1 etc get defined? 

    Many thanks
    Rob
  11. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Feb 2009
    Link to this post
    Hello Robert,

    Thank you for using our services.

    You can declare paragraphs in a module template for editing or creating new items. For instance

    You can use paragraphs collection declaratively in on of the templates you want to change.( for instance when you insert Generic Content items  you should change /Sitefinity/Admin/ControlTemplates/Generic_Content/ControlPanelInsert.ascx)

    Here is the declaration:

    <Paragraphs> 
           <telerik:EditorParagraph Title="Clear Formatting" Tag="<body>" /> 
           <telerik:EditorParagraph Title="Heading 1" Tag="<H1>" /> 
           <telerik:EditorParagraph Title="Heading 2" Tag="<H2>" /> 
           <telerik:EditorParagraph Title="Heading 3" Tag="<H3>" /> 
       </Paragraphs> 

    The tools file could be used as well.

     <root> 
     <tools name="MainToolbar" enabled="true"
       <tool name="FormatBlock" /> 
     </tools> 
     <paragraphs> 
       <paragraph name="Clear formatting" value="<body>" /> 
       <paragraph name="<H1>Heading 1</H1>" value="<H1>" /> 
       <paragraph name="<H2>Heading 2</H2>" value="<H2>" /> 
       <paragraph name="<H3>Heading 3</H3>" value="<H3>" /> 
       <paragraph name="<p class='redStyle'>redStyle</p>" value="<p class='redStyle'>" /> 
     </paragraphs> 
    </root>  


    I hope this helps.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Nahom Tijnam
    Nahom Tijnam avatar
    3 posts
    Registered:
    13 Dec 2009
    03 Jan 2010
    Link to this post
    Hi,

    I am facing the same issue mentioned in the original post while using version 3.7 of sitefinity (Sitefinity_3_7_2057_standard_trial.exe) and the mentioned method (adding styles in EditorContentArea.css & adding classes in EditorToolsFile.xml) does not work for me.

    Has the methodology to achieve this changed in this new version?

    Thanks in advance for any help.

    cheers,
    Manjit
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    03 Jan 2010
    Link to this post
    Hi Manjit Kaayikkodathu,

    You can take a look at the following articles.

    Introduction to Toolbars
    Using the ToolsFile.xml
    CSS Styles
    External CSS Files

    You should add ApplyClass toolbar or specify css classes. Below are some tips.

    Through EditorToolsFile file

    1. Open ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml file
    2. Specify the path to the css file, which you need the editor to use:

    <root>     
      
    ...     
      
      <cssFiles>     
      
        <item name="~/Sitefinity/Admin/ControlTemplates/MyCSS.css" />     
      
      </cssFiles>     
      
    ...     
      
    </root>

    3. Delete the <class> elements which appear as child elements of an element <classes>:

    <class name="Add CssClasses:" value=".test" />     
    <class name="EditorToolsFile.xml" value=".test1" />

    Programmatically.
    1. Map the external template for the desired view.
    2. Add inline code to the template and specify your css file with the custom classes.

    <script type="text/C#" runat="server">
      
        protected void Page_Load(object sender, EventArgs e)
        {
            Editor.CssFiles.Add("~/test/s.css");
        }
      
    </script>


    Other options

    Working with ToolsFile

    Your class section should look as in the sample below:

    <classes>
        <class name="RED" value=".BackGroundRed" />
        <class name="Blue" value=".BackGroundBlue" />
    </classes>

    As you can see we are applying css classes from our stylesheet.

    .BackGroundBlue
    {
      background-color: Blue;
    }
    .BackGroundRed
    {
      background-color: Red;
    }


    Note that you should have added the path to your css stylesheet in the desired template

    <telerik:RadEditor
     
                    runat="server"
                    ID="Editor"
                    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
                    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                  
                    Skin="WebBlue"                    
                    NewLineBr="False"
                    Width="95%"
                    ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
                    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                       <telerik:EditorCssFile Value="~/Files/style.css"/>
                    </CssFiles>
                </telerik:RadEditor>


    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  14. Nahom Tijnam
    Nahom Tijnam avatar
    3 posts
    Registered:
    13 Dec 2009
    04 Jan 2010
    Link to this post
    Hi Ivan,

    Thank you for your response with details. However, following your "Through EditorToolsFile file" methodology, the ApplyClass drop down is not getting filled up with required styles. The apply class drop down just has a Clear Class item.

    I've added the following code under <root> in /Sitefinity/admin/controltemplates/EditorToolsFile.xml file:
      <cssFiles> 
        <item name="~/ExternalCssFiles/ApplyClass.css" /> 
      </cssFiles> 

    I've removed the <class> items under the <classes> tag. So now the <classes> tag looks like this:
      <classes></classes
     


    The ApplyClass.css file is located in the ExternalCssFiles folder which is in the root of the project. Here is the content in ~/ExternalCssFiles/ApplyClass.css file:
    .title 
        font-familyArial
        font-size23px
        color#000080
        height40px
     
    .subTitle 
        font-familyArialHelveticasans-serif
        font-size13px
        color#808080
        font-weightbold
        line-height17px
     
    .content 
        font-familyArialHelveticasans-serif
        font-size11px
        color#808080
        font-weightnormal
        line-height17px


    For your second & third methods, I am not sure where I could add these codes in Sitefinity 3.7. 

    I'm stuck now and no idea how to move ahead to solve this problem. Let me know if it would help if I send you any project files or other detail.

    Thanks,
    Manjit Mohan
  15. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Jan 2010
    Link to this post
    Hello Manjit Kaayikkodathu,

    Try following the programmatically option Programmatically. 1. Map the external template for the desired view....." I added several styles at my end and they are showing correctly. Attached is a screenshot that represents two css classes added to ApplyCss drop down of GenericContent control which uses RadEditor control.

    Another option is having the following configuration in the RadEditortoolsFile.xml

    <cssFiles>
      <item name="~/Files/style.css"/>
    </cssFiles>
    <classes>
      <class name="Red" value=".Red" />
      <class name="Blue" value=".Blue" />
    </classes

    style.css

    .Red
    {
      background-color: Red;
    }
    .Blue
    {
      background-color: Blue;
    }

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Nahom Tijnam
    Nahom Tijnam avatar
    3 posts
    Registered:
    13 Dec 2009
    04 Jan 2010
    Link to this post
    Hi Ivan,

    Could you please mention the full path to the RadEditortoolsFile.xml you referred to?

    Thanks & Kind Regards,
    Manjit Mohan
  17. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Jan 2010
    Link to this post
    Hi Manjit Kaayikkodathu,

    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml" 

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  18. syed
    syed avatar
    22 posts
    Registered:
    05 Mar 2009
    04 Aug 2010
    Link to this post
    Hi there

    when i try to append more styles in existing EditorToolsFile.xml. No effect in styles dropdown box.
    please see the screenshot.


    thanks
    Syed
  19. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    06 Aug 2010
    Link to this post
    Hello syed,

    It looks like the css file which should contain the rules for those classes is missing half of the classes. Please try modifying the file to include the rules.

    Sincerely yours,
    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
  20. Rob
    Rob avatar
    20 posts
    Registered:
    03 Jun 2010
    04 Oct 2010
    Link to this post
    You posted the following two links:

    /Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorCssFile.css
    ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx

    However, that file structure does not exist for me in 3.7.  Where can I find those files today?

    -Rob
  21. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    04 Oct 2010
    Link to this post
    Hello Rob,

    You can download external templates from your account downloads section. You can gather more information at How to map a template

    Greetings,
    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
Register for webinar
21 posts, 0 answered