Custom CSS in editor

Posted by Community Admin on 05-Aug-2018 17:31

Custom CSS in editor

All Replies

Posted by Community Admin on 23-Mar-2011 00:00

When editing a page I'd like to see an option to apply custom styles to text. Is there a way to add a custom CSS selector to Sitefintity text editor?

Note: I have no problem using HTML view and wrapping text inside of a <span class="">, but the people who will manage this site are not HTML savy. They need an easy way to apply styles.

Any documentation you have on doing this would be really helpful for the Designer Guide too. Thanks.

Posted by Community Admin on 24-Mar-2011 00:00

Hi Justin,

Thank you for contacting Telerik Support.

You need to map the template for ContentBlock designer and then you can specify your CSS styles either in the template or in the tools file. Please follow the below steps.

1. Create a file, for example ContentBlockTmp.ascx in a directory, let's say Templates:

Copy Code
Copy Code
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
  
<sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile Name="CSS/myCSS.css" /><%--Location of your CSS style file--%>
</sf:ResourceLinks>
  
<sf:FormManager ID="formManager" runat="server" />
<div style="width: 660px; overflow: hidden;">
    <sf:HtmlField
        ID="htmlEditor"
        runat="server"
        Width="99%"
        Height="370px"
        EditorContentFilters="DefaultFilters"
        EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
        DisplayMode="Write"
        FixCursorIssue="True"
        EditorToolsConfiguration="Custom"
        EditorToolsConfigurationKey="toolsFile"> <%--This key has to be the same as the key you add in AppearanceConfig.config--%>
    </sf:HtmlField>
</div>
<script type="text/javascript">
    $("body").addClass("sfContentBlockDesigner");
</script>

2. Modify the contents of file AppearanceConfig.config (App_Data\Sitefinity\Configuration\). Add the following inside:
Copy Code
Copy Code
<editorConfigurations>
    <add value="~/Configuration/ERS Bruchwiese/EditorToolsFile.xml" key="toolsFile" /> <!--This key has to be the same as in your template-->
  </editorConfigurations>
</appearanceConfig>
 3. Go to Administration >> Settings >> Advanced >> Toolboxes >> Toolboxes >> PageControls >> Sections >> ContentToolboxSection >> Tools >> LayoutTemplate: ~/Templates/ContentBlockTmp.ascx

4. Map the ContentBlockDesigner template from Administration >> Settings >> Advanced >>Controls >>ViewMap
HostType: Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
LayoutTemplatePath:"relative path to the template where you have declared HtmlField control"

After you do this, please visit the following link to see several options for setting the CSS classes in Apply CSS Class dropdown. Another possible option is to include your CSS in your template directly, by putting it into a block like this sample:

Copy Code
Copy Code
<style type="text/css">
<%--Put your CSS here--%>
</style>

I hope this information helps. I will be glad to assist you further.

Best wishes,
Boyan Barnev
the Telerik team

This thread is closed