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

Forums / Developing with Sitefinity / Use custom css stylesheet for content editor

Use custom css stylesheet for content editor

6 posts, 0 answered
  1. Stephen
    Stephen avatar
    10 posts
    Registered:
    03 Feb 2012
    08 Feb 2012
    Link to this post
    I have some issues for adding custom css file to the content editor in the backend. I followed the following steps to add a custom css to the editor. All pathes are correct.
    My version is Sitefinity 4.4.2117.0 SE Trial version

    Step 1: Create two files
    CustomToolsFile.xml
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <modules>
            <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
            <module name="RadEditorDomInspector" visible="false" />
            <module name="RadEditorNodeInspector" visible="false" />
            <module name="RadEditorHtmlInspector" visible="false" />
        </modules>
        <tools name="MainToolbar">
            <tool name="ToggleAdvancedToolbars"/>
            <tool name="ApplyClass" />
            <tool name="Bold" shortcut="CTRL+B"/>
            <tool name="Italic" shortcut="CTRL+I"/>
            <tool separator="true"/>
            <tool name="InsertOrderedList" />
            <tool name="InsertUnorderedList" />
            <tool separator="true"/>
            <tool name="LinkManager" shortcut="CTRL+K"/>
            <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
            <tool name="ImageManager" shortcut="CTRL+G"/>
            <tool separator="true"/>
            <tool name="AjaxSpellCheck"/>
            <tool separator="true"/>
            <tool name="PasteFromWord" />
        </tools>
        <tools>
            <tool separator="true"/>
            <tool name="JustifyLeft" />
            <tool name="JustifyRight" />
            <tool name="JustifyCenter" />
            <tool name="JustifyFull" />
            <tool separator="true"/>
            <tool name="Indent" />
            <tool name="Outdent" />
        </tools>
        <tools>
            <tool name="FontName" shortcut="CTRL+SHIFT+F"/>
            <tool separator="true"/>
            <tool name="RealFontSize"/>
            <tool separator="true"/>
            <tool name="FormatBlock"/>
            <tool separator="true"/>
            <tool name="ForeColor"/>
            <tool name="BackColor"/>
            <tool separator="true"/>
            <tool name="MediaManager" />
            <tool name="FlashManager" />
            <tool name="DocumentManager" />
        </tools>
        <tools>
            <tool name="InsertParagraph" />
            <tool name="InsertTable" />
            <tool name="InsertSymbol"/>
            <tool name="InsertHorizontalRule" />
            <tool separator="true"/>
            <tool name="Superscript" />
            <tool name="Subscript" />
            <tool separator="true"/>
            <tool name="FormatStripper"/>
            <tool separator="true"/>
            <tool name="FindAndReplace" shortcut="CTRL+F"/>
            <tool name="Print" shortcut="CTRL+P"/>
            <tool name="ToggleScreenMode" />
        </tools>
        <cssFiles>
            <item name="~/css/customEditor.css"></item>
        </cssFiles>
    </root>

    CustomEditor.css
    h1 { font-size: 10px;}
    .img-left { width: 10px;}

    Step 2:
    Under Administration -> Settings -> Advanced Settings -> Appearance, I updated the "StandardEditorConfiguration" to point to the CustomToolsFile.xml file.
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    13 Feb 2012
    Link to this post
    ApplyClass-setting.rar

    Hi,

    The only issue with this approach is that the editor is looking for particular classes, so if you specify just
    h2{
    }
    this would not be parsed by the content editor, as you're specifying only the HTML element to which your class will be applied, but you're not specifying an actual class. You can do, for example:
    h2.Heading2{
    }
    and this would successfully apply your Heading2 class to all h2 elements. For the sake of clarity i've recorded a short video demonstrating my current setup, I hope you'll find it useful.

    Regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Stephen
    Stephen avatar
    10 posts
    Registered:
    03 Feb 2012
    13 Feb 2012
    Link to this post
    Hi Boyan,
    I followed your instruction and still had problems to display my custom css file in the editor for one of my project. I made it work in another project though with exactly the same files and instructions. Both projects are running in Sitefinity 4.4 and the only difference is that one of them is running under IIS 6.0 and the other one is under 7.0. The project in IIS 7.0 are working fine.
    Thanks,
    Stephen
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    16 Feb 2012
    Link to this post
    Hello Stephen,

    Can you please let us know if there is anything else specific to reproducing the issue besides the IIS version? Are you using the same browser when testing, as we have found out there's a problem with the ApplyCSS dropdown not populating when using Firefox browser, versions 9 and 10? Looking forwards to your response.

    Kind regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Stephen
    Stephen avatar
    10 posts
    Registered:
    03 Feb 2012
    16 Feb 2012
    Link to this post
    Hi Boyan,
    There is nothing special when I set up the site. I tested both sites in Firefox, and only one of them is working. I tested the non-working one in IE and it does not work either. Can I create a ticket and send the project to you to debug?
    Thanks,
    Stephen
  6. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    20 Feb 2012
    Link to this post
    Hello,

    Yes, there's no problem sending the project so we can inspect this behavior locally, however if you observe this behavior only on a particular server maybe it'd be better to look for the problem there. Can you please confirm if the issue reproduces with a newly created Sitefinity project as well? Thanks ina dvance for your kind cooperation.

    All the best,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
6 posts, 0 answered