Use custom css stylesheet for content editor

Posted by Community Admin on 08-Feb-2012 00:00

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.

Posted by Community Admin on 13-Feb-2012 00:00

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

Posted by Community Admin on 13-Feb-2012 00:00

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

Posted by Community Admin on 16-Feb-2012 00:00

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

Posted by Community Admin on 16-Feb-2012 00:00

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

Posted by Community Admin on 20-Feb-2012 00:00

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

This thread is closed

All Replies