Custom CSS in editor - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Custom CSS in editor

  • Custom CSS in editor
  • 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.
  • 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:FormManager ID="formManager" runat="server" />
    <div style="width: 660px; overflow: hidden;">
            EditorToolsConfigurationKey="toolsFile"> <%--This key has to be the same as the key you add in AppearanceConfig.config--%>
    <script type="text/javascript">

    2. Modify the contents of file AppearanceConfig.config (App_Data\Sitefinity\Configuration\). Add the following inside:
    Copy Code
    Copy Code
        <add value="~/Configuration/ERS Bruchwiese/EditorToolsFile.xml" key="toolsFile" /> <!--This key has to be the same as in your template-->
     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--%>

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

    Best wishes,
    Boyan Barnev
    the Telerik team