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

Forums / Designing with Sitefinity / Apply CSS Class Dropdown

Apply CSS Class Dropdown

2 posts, 0 answered
  1. Tim
    Tim avatar
    1 posts
    Registered:
    06 May 2009
    24 Aug 2011
    Link to this post
    I've looked at several different threads and tried to add styles to this dropdown but I'm not having any luck.  Here are the modifications I've made pasted in below.  The only thing I've accomplished is to get the Apply CSS dropdown to show.

    File:  \Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml
    <tools name="DropdownToolbar" dockable="false">
      <tool name="FormatBlock"/>
      <tool name="ApplyClass"/>
      <tool name="FormatStripper"/>
      <tool name="ToggleScreenMode" />
    </tools>
    <classes>
      <class name="Clear Class" value="" />
      <class name="Footnote" value=".FootNote" />
      <class name="Footnote Two" value=".FootNoteTwo" />
    </classes>

    File: \Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorCssFile.css
    .FootNote { color: Red; }
    .FootNoteTwo { color: Blue; }

    File: \Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorContentArea.css
    .FootNote { color: Red; }
    .FootNoteTwo { color: Blue; }

  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    06 Dec 2016
    29 Aug 2011
    Link to this post
    Hello Tim,

    To add a class the Apply Css dropdown create a stylesheet file reference it in the Editor codefile:
    protected void Page_Load(object sender, EventArgs e)
            {
                this.editControl.CssFiles.Add("~/ControlTemplates/StyleSheet1.css");
            }
    In the toolsFile, you can just add the ApplyClass tool:
    <tool name="ApplyClass" />
    and if you want to customize the way your custom CSS classes are listed in the dropdown, you can achieve this by adding a <classes> section in the toolsfile as well:
    </tools>
        <classes>
            <class name="Clear Class" value="" />
            <class name="Links Class" value="a.link" />
            <class name="Images Class" value=".img" />
            <class name="My Red Text" value=".text" />
            <class name="My Pink Text" value=".pinktext" />
        </classes>


    All the best,
    Stanislav Velikov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

2 posts, 0 answered