Forums

Home / Developer Network / Forums / Sitefinity Older Versions (3.x): Designing with Sitefinity > CSS Styles not appearing in 'Apply CSS Style' dropdown

• Laura Newman

  Posted on Feb 9, 2010 (permalink)

  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

  Reply

• Ivan Dimitrov Ivan Dimitrov

  Posted on Feb 9, 2010 (permalink)

  Hi Laura Newman,
  
  Please check the following articles first
  
  

  • Introduction to Toolbars
  • Using the ToolsFile.xml
  • CSS Styles
  • External CSS Files

  
  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.

  Reply

• danfinney

  Posted on Nov 11, 2010 (permalink)

  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?
  

  Reply

• Ivan Dimitrov Ivan Dimitrov

  Posted on Nov 11, 2010 (permalink)

  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

  Reply

Home / Developer Network / Forums / Sitefinity Older Versions (3.x): Designing with Sitefinity > CSS Styles not appearing in 'Apply CSS Style' dropdown