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

Forums / General Discussions / Limiting Styles in the Editor

Limiting Styles in the Editor

28 posts, 0 answered
  1. Ben Alexandra
    Ben Alexandra avatar
    215 posts
    Registered:
    15 Sep 2012
    22 May 2007
    Link to this post
    Hi,

    Cranking on v3 and LOVING IT!!!  Great job, guys.  It's working really well and the upgrade from the Betas was a snap.  Thanks

    I've enabled Apply CSS Styles in the editor (along with a lot of other things), but the list of CSS styles listed is everything from Sitefinity and not from my site.

    Is there an easy way to get rid of all your styles and set the URL of a stylesheet that it should grab styles from?  I have all my page styles in one .css file under my Themes folder.

    Any guidance would be greatly appreciated

    Thanks

    Ben
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    08 Dec 2016
    22 May 2007
    Link to this post
    Hello Ben Alexandra,

    By default the Telerik RadEditor uses the CSS classes available in the current page. However, it can be configured to load external CSS files instead.

    Thanks to the CssFiles property, you can specify a string array as the list of CSS files, which you need the editor to use. e.g.

    ASPX:

    <rade:radEditor 
         Id="RadEditor1" 
         Runat="server" 
         CssFiles="~/ExternalCssFiles/Styles1.css,~/ExternalCssFiles/Styles2.css">
    </rade:radEditor>

    Styles1.css:

    a.link
    {
       color: #0000ff;
       font-weight: normal;
       font-style: italic;
    }
    .img
    {
       border: none;
    }

    .text
    {
       background-color: Red;
       font-size: 10px;
    }

    The css classes available in the external css files will populate the "Apply Css Class" dropdown. If you would like you can easily modify this set of external classes in the dropdown and display only a few classes using the Add method of CssClasses Collection:

    C# code:
    RadEditor1.CssClasses.Add("Links class ", "a.link");
    RadEditor1.CssClasses.Add("Images class ", ".img");

    You can also populate the CSS class dropdown using the ToolsFile, as shown in the example below:

    <classes>
       <class name="Links class" value="a.link" />
       <class name="Images class" value=".img" />
    </classes>

    Regards,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Ben Alexandra
    Ben Alexandra avatar
    215 posts
    Registered:
    15 Sep 2012
    22 May 2007
    Link to this post
    No no... I mean in the built-in editor that comes with Sitefinity.  "Generic Content" I guess I should have said.

    Thanks

    Ben
  4. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    22 May 2007
    Link to this post
    Hi Ben,

    Sorry for not mentioning that the rich text editor you see in Sitefinity (a.k.a. Generic Content) is in fact the mighty
    Telerik RadEditor :)

    Best wishes,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Ben Alexandra
    Ben Alexandra avatar
    215 posts
    Registered:
    15 Sep 2012
    22 May 2007
    Link to this post

    Hi Rebecca,

    Yes, of course I realize that, as is this box i'm typing into now... and i love it.  But it's configured differently and I'm not sure where I'd change, for the Generic Content, which styles are shown.  It shows all of Sitefinity's styles, which is fairly useless to most people, i'm guessing, instead of showing the styles from the selected Theme of the page i'm adding Generic Content too (much more useful).  Where, in SF would I go to remove all those styles and just show the styles I want?

    Thanks!

    Ben

  6. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    22 May 2007
    Link to this post
    Sorry Ben,

    Setting the CssFiles property in this file will modify all
    Generic Content control instances:
    ~/Sitefinity/Admin/ControlTemplates/GenericContent/EditorTemplate.ascx
     
    If you do the same in the ~/Sitefinity/Admin/ControlTemplates/GenericContent/ControlPanelinsert.ascx and ~/Sitefinity/Admin/ControlTemplates/GenericContent/ControlPanelEdit.ascx files, you change the editor in the Modules/Generic Content section.


    All the best,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. Ben Alexandra
    Ben Alexandra avatar
    215 posts
    Registered:
    15 Sep 2012
    22 May 2007
    Link to this post
    Perfect!  Thanks.  There are still a few RadE... styles, from the Editor, or the page it's on, I guess.  Can I get rid of those, or do I have to just live with them?

    Thanks

    Ben
  8. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    23 May 2007
    Link to this post
    Hello Ben,

    In order to  make the RadEditor display certain styles only, limit the access to all styles from the theme or the styles coming with the editor, you need to add those classes to the class collection in the EditorToolsFile.xml located in ~/Sitefinity/Admin/ControlTemplates folder.

    For example, if you have a class .attention{color:red; font-weight:bold;} in your CSS file and you need to display it in the editor dropdown, you need to add it to the class collection in the EditorToolsFile.xml as shown below:

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


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

    Kind regards,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. Jason
    Jason avatar
    31 posts
    Registered:
    07 Nov 2007
    05 Dec 2007
    Link to this post
    Greetings,

    so far the instructions in this thread are in line with other resources I have focused on.  However, I dont seem to ever see any of the styles that I want in the drop down.  I only see the H1 - H5 and other standard HTML styles and not the ones that are in use on the page.

    I tried modifying the files and properties mentioned but the list never changes, what could I be missing?
  10. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    05 Dec 2007
    Link to this post
    Hi Jason,

    I think you just expect too much of the paragraph style dropdown :)

    Please look at the attached images to make the difference between two tools: Paragraph Style and Apply CSS Class. In the previous posts, we discussed the Apply CSS Class editor tool.

    1. In order to disable the Paragraph Style in the Generic Content editor toolbar, you need to open the \Sitefinity3.1\WebSites\[YourProject]\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml and set FormatBlock to false:
    <tool name="FormatBlock" enabled="false"/>   
    Please, review the following help article, which provides guidance how to populate the FormatBlock tool with the desired items: Paragraph Styles.

    2. To configure the editor to load your own CSS, it is best to put your styles in an external .css file (e.g. Styles1.css) and specify the path to it in the \Sitefinity3.1\WebSites\[YourProject]\Sitefinity\Admin\ControlTemplates\Generic_Content\EditorTemplate.ascx file like this:

    <radE:RadEditor runat="server" ID="RadEditor1"
        ConfigFile="~/Sitefinity/Admin/ControlTemplates/EditorConfigFile.xml"
        CssFiles="~/Styles1.css"
        SkinsPath="~/Sitefinity/Admin/Themes/Default/Skins/Editor/"
        Skin="Sitefinity" ConvertFontToSpan="true" ConvertToXhtml="true" NewLineBr="false"
        Height="360px" Width="98%">

    Then edit the the \Sitefinity3.1\WebSites\[YourProject]\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml file to display the Apply CSS Class dropdown:

    <tool name="ApplyClass" enabled="true"/>
    Finally, in the above file, add your classes to the classes collection to populate the Apply CSS dorpdown as shown below.
    <classes>
       <class name="Links class" value="a.link" />
       <class name="Images class" value=".img" />
    </classes>

    Hope this helps. Do 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
  11. Jason
    Jason avatar
    31 posts
    Registered:
    07 Nov 2007
    05 Dec 2007
    Link to this post
    Hello Rebecca,

    Thank you so very much for that insight, I was wondering why all of the examples had that control which looked so different.  At this point everything is working very well, too well acutally :)

    Our designers elected to use lots of white text to sit on darker background and image.  Is there a way to change the background color (aside from overriding existing style properties) so that the dropdown for the styles and the main area can have a different BackColor?

    Thanks in advance,

    Jason
  12. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    05 Dec 2007
    Link to this post
    Hello Jason,

    You can control the look of the common dropdowns from the following three classes in the ~/Sitefinity/Admin/Themes/Default/Skins/Editor/Sitefinity/Controls.css file:

    /*--Common Dropdown (Snippet, Paragraph, Sweeper, CssClass) Related Styles --*/

    .RadEDropDownTable
    {
        background-color:yourcolor;
    }
    .RadEDropDownTable td
    {
        border:1px solid #AAAAAA;
        font:normal 11px Tahoma;
        color:#000000;
    }

    .RadEDropDownTable td.Over
    {
        border:1px solid #666666;
    }


    I would highly recommend installing Firebug as it is a valuable aid with CSS (see attachment).

    All the best,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. Jason
    Jason avatar
    31 posts
    Registered:
    07 Nov 2007
    05 Dec 2007
    Link to this post
    Greetings Rebecca,
    thank you very much for your reply, unfortunetly, nothing happend when I changed the color.  I wanted to make sure we were on the same page, so I am including a screen shot of the area that I want to alter.  I was able to get the main area to change to Gray as you see.

    http://www.flickr.com/photos/xximjasonxx/2088831509/

    I used firebug to dive into this and saw the the styles are changing as I interact with the control.  Thanks for the tip, I love Firebug too :)

  14. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    06 Dec 2007
    Link to this post
    Hello Jason,

    I can think of three scenarios that may be causing the problem.

    First, please make sure you have changed the background color in the right file which is Controls.css. If you have added your CSS in EditorContentArea.css, which is the CSS file that is applied to the main area that you have changed the background color of, it will not be applied to the drop-downs.

    Second, make sure there are no other styles to overwrite the new background style. These styles may appear after your style or may have more specific selectors. Another way to correct that problem is to make that rule "important" like that:

    .RadEDropDownTable
    {
        background-color: yourcolor !important;
    }


    And finally, please delete the cache of your browser. The style sheet files might have been cached, so that might be the reason why the changes are not applied.

    Sincerely yours,
    Katia
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  15. Dennis
    Dennis avatar
    19 posts
    Registered:
    26 May 2009
    19 Sep 2009
    Link to this post
    Hello

    I'm using 3.7 and I cannot get my CSS styles to appear in the Generic Content control.

    Entering <tool name="ApplyClass" /> in the editortoolssfile.xml does make the css drop down appear.

    However the classes that I enter in the class section do not appear - I've tried to clear the cache.

    The file that you refer to - Sitefinity\Admin\ControlTemplates\Generic_Content\EditorTemplate.ascx - for custom CSS does not seem to be a part of SF 3.7

    Hope you can help

    Dennis
  16. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    21 Sep 2009
    Link to this post
    Hi Dennis,

    As I see it this is an two years old post. So the things in 3.7 are different. From Sitefinity 3.6 we use embedded templates.

    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> 

    Regards,
    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.
  17. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    21 Oct 2009
    Link to this post
    Hi,
    I've setup my radeditors to use ToolsFileAll.xml and used this code

    <root> 
    ... 
        <cssFiles> 
            <item name="~/css/content.css"></item> 
        </cssFiles> 
        <classes> 
            <class name="Last Item" value=".last"></class> 
        </classes> 
    ... 
    </root> 

    The funny thing is I'm not seeing this Last Item class in the editor.  I'm using Sitefinity 3.7.

    Thanks in advance!
  18. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    22 Oct 2009
    Link to this post
    Hello Devin,

    Please follow step 3

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

    Regards,
    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.
  19. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    22 Oct 2009
    Link to this post
    Thanks Ivan, worked like a charm ^_^  OMG I can't believe I missed that...
  20. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 Sep 2010
    Link to this post
    Hi Ivan,

    Could you please have a look at this xml excerpt and let me know what I am missing from this:

      <cssFiles>      
          <item name="~/App_Themes/2010a/css/010-rad-editor.css" />      
      </cssFiles>
      <classes>
      </classes>
      <dialogParameters></dialogParameters>
      <languages></languages>
      <contextMenus>
      </contextMenus>
    </root>

    As I understand it, I should then see the class names in my RadEditor's Paragraph Style drop down list...is that correct?

    thanks
  21. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Sep 2010
    Link to this post
    Hello James,

    Delete <classes> tags and clear the browser cache.

    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
  22. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 Sep 2010
    Link to this post
    Hi Ivan,

    I am making these changes in the EditorToolsFile.xml file right?

    I have done what you are suggestion and maybe I am not completely understanding what should be happening but as I understand it, I should then see my class names in the paragraph style drop down menu. Is that correct?

    I've also been through this document and found it not working either.


    Thanks!
  23. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Sep 2010
    Link to this post
    Hello James,

    No, this makes changes to Apply Css drop down. For paragraphs you can use

    1. ToolsFile.xml and its <paragraphs> tags

    2. RadEditor declaration  -<Paragraphs><telerik:EditorParagraph .../> node

    3. Inline styles where the RadEditor control has been declared

    4. Adding reference to a stylesheet with classes where the RadEditor has been declared.

    Sincerely yours,
    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
  24. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 Sep 2010
    Link to this post
    Aaah, I don't see the Apply Css drop down in my Sitefinity menu Ivan.

    How do I get this working?
  25. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Sep 2010
    Link to this post
    Hi James,

    You can take a look at Using the ToolsFile.xml

    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
  26. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 Sep 2010
    Link to this post
    Thanks Ivan, I have already read through that document but I don't quite understand where the ToolsFile.xml file needs to be placed and what I need to do to add the Apply Css drop down. It does not explain on that page where to add this.

    Apologies as I am under heavy deadline today and need quick answers.

    Thanks very much.
    James
  27. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    29 Sep 2010
    Link to this post
    Hello James,

    Here is a sample that shows how to enable the drop down in EditorToolsFile.xml

    <tools name="MainToolbar" dockable="false">
       <tool name="ApplyClass" />
     </tools>

    Inside in the same destination where EditorToolsFile.xml resides there is a file EditorToolsFileAll.xml from where you can see how to enable some of the tools.

    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
  28. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    29 Sep 2010
    Link to this post
    Awesome, got it working! Thanks Ivan. Really appreciate it! Beers on me :)
Register for webinar
28 posts, 0 answered