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

Forums / General Discussions / Use CSS classes

Use CSS classes

14 posts, 0 answered
  1. Paul
    Paul avatar
    5 posts
    Registered:
    16 Jun 2008
    08 Jul 2008
    Link to this post
    Hi,
    I do not know what I am missing, but following all the documentation does not work for me.

    I add the
    <tool name="ApplyClass" enabled="true" />
    Now I get the drop down, but I can not get it to fill anything.

    I have set the CSS files to point to an external CSS file, I have added my classes to ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css.

    I have added the classes in the tools.xml file.

    Still All I get in the drop down is Clear Class.

    Any ideas??

    Paul Coleman
    pcoleman@vision.org
  2. Rebecca
    Rebecca avatar
    536 posts
    Registered:
    24 Sep 2012
    09 Jul 2008
    Link to this post
    Hello Paul,

    It looks you have followed all the necessary steps to enable and populate the Apply Css Class dropdown. Most probably, clearing the browser cache and cookies will do the trick.

    If this does not help, please make sure you have followed these steps:

    1. Enable Apply Css Class tool in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:

        <tool name="ApplyClass" />

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

    3. Add your styles to the external .css file and specify the path to it in the ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx like this:

    <CssFiles>
          <telerik:EditorCssFile Value="~/Editor.css" />
    </CssFiles>

    4. Populate the classes collection in the
     ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml, e.g.:

      <classes>
        <class name="Subtitle" value=".subtitle" />
        <class name="Custom class" value=".custom" />
      </classes>

    The steps above should ensure your styles appear in the dropdown in the Generic Content public control and the Generic Content module.
    To do the same for other modules, you need to edit the CssFiles property in the ControlPanelInsert.ascx and ControlPanelEdit.ascx templates for the respective module. These are located in the ~/Sitefinity/Admin/ControlTemplates/[Name_of_Module] folder.

    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

    Do not hesitate to contact us if you need any further assistance.

    Greetings,
    Rebecca
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Paul
    Paul avatar
    5 posts
    Registered:
    16 Jun 2008
    09 Jul 2008
    Link to this post
    Hi,
    I knew I was missing something.  The documentation mentions about clearing the cookies to change the classes, but it did not sink in.

    Clearing the cookies and cache did the trick. 

    Thanks
  4. Grant
    Grant avatar
    13 posts
    Registered:
    24 Jan 2008
    18 Dec 2008
    Link to this post
    Can someone post some other examples or documentation of how this is supposed to work? I've tried all of the above (included clearing cookies and cache) and I am unable to get any classes to show up in the apply css classes dropdown.
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    19 Dec 2008
    Link to this post
    Hi Grant,

    Take a look at the following article External CSS Files. There are examples with external CSS files.
    I suggest that you should declare the classes in the template as below

     <telerik:radeditor runat="server" ID="RadEditor1"
    .... 
       <CssFiles> 
           <telerik:EditorCssFile Value="~/MyExternalCssFiles/custom.css /> 
       </CssFiles> 
    .... 
    </telerik:radeditor>  

    I hope this helps.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Grant
    Grant avatar
    13 posts
    Registered:
    24 Jan 2008
    19 Dec 2008
    Link to this post
    The CSS files are being loaded on the page according to the above example, but they do not show up in the dropdown. Are the classes that show up in the dropdown controlled by the EditorToolsFile.xml or the css files?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    20 Dec 2008
    Link to this post
    Hello Grant,

    Try the following

    1. Declare the classes in the template. For instance I am working with ~\Sitefinity\Admin\ControlTemplates\News\ControlPanelInsert.ascx

    <CssFiles> 
    <telerik:EditorCssFile Value="~/Css/custom.css" /> 
    </CssFiles> 

    I have created root directory named Css and there I  have one css file with three defined classes.

    Then, in ~\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml (standard settings)

    <tools name="DropdownToolbar" dockable="false"
        <tool name="FormatBlock"/> 
        <tool name="FormatStripper"/> 
        <tool name="ApplyClass"/> 
      </tools> 
      <classes> 
        <class name="Clear Class" value="" /> 
        <class name="Links Class" value="myclass1" /> 
        <class name="Images Class" value=".myclass2" /> 
        <class name="My Red Text" value=".myclass3" /> 
      </classes> 


    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.
  8. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    01 Jan 2009
    Link to this post
    Hello All,

    I'm sure I'm missing something obvious here, but after adding the <tool name="ApplyStyle" enabled="true" /> entry to the EditorToolsFile.xml, I get a "?" icon where the Apply Style drop-down should be, and when I click it, I get the error "The command ApplyStyle is not implemented yet".

    Does it matter which tools section I add the ApplyStyles to?

    Thanks for any insight.

    Regards,
    John Gassman
    Workstate Consulting
  9. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    01 Jan 2009
    Link to this post
    Yikes, nevermind. It should be "ApplyClass".

    Nothing to see here....
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    02 Jan 2009
    Link to this post
    Hello JohnGassman,

    I am glad to hear that everything is working at your end now. Let us know if you need further assistance.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  11. Joe Morse
    Joe Morse avatar
    1 posts
    Registered:
    31 Jul 2009
    31 Jul 2009
    Link to this post
    I did all the steps in the July 9- 2008 post. I see the dropdown with "Apply CSS Class", but the only option is "Clear Class" which I didn't include. My classes are not present in the dropdown.

    Any help is appreciated!
    Thanks
    Joe
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    05 Aug 2009
    Link to this post
    Hello Joe Morse,

    Thank you for using our services.

    If you are using Sitefinity 3.6 or above you will also have to map the template for the control that you have added the additional CSS classes. This forum post relates to a previous version of Sitefinity (3.5), where the control templates were not embedded. You can see how to map a template here.

    Greetings,
    Rado
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  13. Meister
    Meister avatar
    262 posts
    Registered:
    09 Nov 2007
    13 Oct 2009
    Link to this post
    Hi Jo

    Did you ever resolve this issue with Clear Class in the drop down and nothing else?
    i'm having the same issue, 3.2 sp2

    thanks
  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    14 Oct 2009
    Link to this post
    Hello Quade,

    Try adding the css classes programmatically as shown below:

    RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles1.css");
    RadEditor1.CssFiles.Add("~/ExternalCssFiles/Styles2.css");

    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.
Register for webinar
14 posts, 0 answered