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

Forums / Designing with Sitefinity / CSS Styles not appearing in 'Apply CSS Style' dropdown

CSS Styles not appearing in 'Apply CSS Style' dropdown

4 posts, 0 answered
  1. Laura Newman
    Laura Newman avatar
    11 posts
    Registered:
    26 Jan 2010
    09 Feb 2010
    Link to this post
    Hello,

    I've added some new styles to our stylesheet that look like:

     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    a.testLink:link {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; text-decoration:none;}
    a.testLink:active {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; text-decoration:none;}
    a.testLink:visited {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; text-decoration:none;}
    a.testLink:hover {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; text-decoration:underline;}

     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    I have referenced them in the tools xml file but they're still not appearing in the apply css style dropdown.  All our other styles are displaying fine, which look like (for example):

     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    .exampleStyle {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        color:#FFFFFF;
    }

     - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    Can you help with this please as I'm not sure what I'm missing.

    Many thanks,

    Laura
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    09 Feb 2010
    Link to this post
    Hi Laura Newman,

    Please check the following articles first


    You should add ApplyClass toolbar or specify css classes. Below are some tips.

    Through EditorToolsFile file

    1. Open ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml file
    2. Specify the path to the css file, which you need the editor to use:

    <root>     
      
    ...     
      
      <cssFiles>     
      
        <item name="~/Sitefinity/Admin/ControlTemplates/MyStyleSheet.css" />     
      
      </cssFiles>     
      
    ...     
      
    </root>

    3. Delete the <class> elements which appear as child elements of an element <classes>:

    <class name="Add CssClasses:" value=".test" />     
    <class name="EditorToolsFile.xml" value=".test1" />

    Programmatically.
    1. Map the external template for the desired view.
    2. Add inline code to the template and specify your css file with the custom classes.

    <script type="text/C#" runat="server">
      
        protected void Page_Load(object sender, EventArgs e)
        {
            Editor.CssFiles.Add("~/Styles/stylesheet.css");
        }
      
    </script>


    Other options

    Working with ToolsFile

    Apply value property as  the name of your css class.


    <classes>  
      <class name="Heading1" value="H1" />
      <class name="Heading2" value="H2" />
      <class name="Heading3" value="H3" />
      <class name="normal" value="p" />   
     
    </classes>

    Your class section should look as in the sample below:


    <classes>
        <class name="RED" value=".BackGroundRed" />
        <class name="Blue" value=".BackGroundBlue" />
    </classes>

    As you can see we are applying css classes from our stylesheet.


    .BackGroundBlue
    {
      background-color: Blue;
    }
    .BackGroundRed
    {
      background-color: Red;
    }


    Note that you should have added the path to your css stylesheet in the desired template


    <telerik:RadEditor
     
                    runat="server"
                    ID="Editor"
                    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
                    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                  
                    Skin="WebBlue"                    
                    NewLineBr="False"
                    Width="95%"
                    ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
                    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                       <telerik:EditorCssFile Value="~/Files/style.css"/>
                    </CssFiles>
                </telerik:RadEditor>


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  3. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    11 Nov 2010
    Link to this post
    Hi Ivan,

    I am trying to get the editor to pickup a couple of styles that we have set in the Theme. I attempted to go into the Tools file located at ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml and change the settings.

    I found this block of code:

    <classes>
      <class name="Add CssClasses collection here:" value=".attention" />
      <class name="EditorToolsFile.xml" value=".read" />
    </classes>

    I changed it to look like the following:

    <classes>
      <class name="imageleft" value=".imageleft" />
      <class name="imageright" value=".imageright" />
    </classes>

    Now when I go back to the Editor inside of Sitefinity I do not see the classes that I just added in the available dropdown. 

    Does it require that I specify a specific external CSS file like your example or can I just make the style choices that I want appear?  What do I specifically need to do to get the "imageleft" and "imageright" classes to show up?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    11 Nov 2010
    Link to this post
    Hello danfinney,

    1. Make sure that you have set EditorCssFile property of the RadEditor control.
    2. Refresh the browser and clear its cache.
    3. You can take a look at this post and the preview the thread.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
4 posts, 0 answered