Try Now
More in this section

Forums / Designing & Styling / Custom CSS in editor

Custom CSS in editor

2 posts, 0 answered
  1. Justin
    Justin avatar
    11 posts
    28 Feb 2011
    23 Mar 2011
    Link to this post
    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.
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    24 Oct 2016
    24 Mar 2011
    Link to this post
    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
    : Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
    :"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
2 posts, 0 answered