Support Forum Thread

Home > Support > Forums home > Sitefinity 3.x > Themes, Designs, Templates > CSS style inside r.a.d.editor

Daniel, 5/15/2008 1:29:54 AM

Hello telerik,

Is there a way to see the content you type in the r.a.d.editor to match the style that is in the theme? The editor is not WYSIWYG right now. I know there is some sort of property to set this, but I don't remember it.

I can imagine that it works a bit different in Sitefinity?

Daniel

, 5/15/2008 8:46:50 AM

Hi Daniel,

You need to add the styles from your page theme to the ~/Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorCssFile.css file if you haven't changed the value of the CssFiles property.

You can also open the ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx and specify a string array as the list of CSS files, which you need the editor to use, for example:

    
            <telerik:RadEditor   
        
                runat="server"   
        
                ID="RadEditor1" 
        
                ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml" 
        
                ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/Prometheus/Default2006/EditorContentArea.css" 
        
                ...  
        
                <CssFiles>  
        
                    <telerik:EditorCssFile Value="~/ExternalCssFiles/Styles1.css,~/ExternalCssFiles/Styles2.css" />  
        
                </CssFiles>  
        
                ...  
        
            </telerik:RadEditor>

Refer to this online help article for more details:
External CSS Files

Kind regards,
Rebecca
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Brett, 6/29/2008 11:36:12 PM

I'm trying to add my styles into the drop down list of the editor and the information posted isn't working for me. Have things changed with the newest version and patches?

To be very clear, I want to add additional elements into the drop down list of styles available in edit mode so that our content editors see them as they are editing content. These are custom styles, things like "byline" or "subtitle". All of these are in the theme of the site and work if someone manually sets the style when they switch to html view but our customers want to set them with the drop down.

Files that I've tried editing and have seen no change:

~\Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorContentArea.css

~\Sitefinity\Admin\Themes\Default\AjaxControlsSkins\Sitefinity\EditorCssFile.css

~\Sitefinity\Admin\ControlTemplates\Generic_Content\EditorTemplate.ascx - I added text here and it showed up in the menu so I know it's being run

It seems like what I've been editing changes the styles of the editor tool but does not alter the options of our content editors. I've even searched through the entire installation for the strings that appear in the drop down list to try and figure it out on my own but nothing has come up.

Any advice is appreciated, thanks.

, 6/30/2008 4:22:24 AM

Hi Brett,

You should add your styles to the ~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css in
order to set them for the editor content area.

Then, in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml, you have to populate the classes collection, e.g.:

<classes>
<class name="subtitle" value=".subtitle" />
</classes>

For more information about CSS styles with RadEditor for ASP.NET Ajax, see this help article:
http://www.telerik.com/help/aspnet-ajax/cssstyles.html

I hope this helps. Let us know if you need any further assistance.

Sincerely yours,
Rebecca
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Brett, 6/30/2008 11:03:20 PM

Thanks for your help. The solution that I ended up with works but it's not what I was originally expecting and there was a step missing that I found.

I'd like to clarify what I've learned for any future readers who are trying to do what I've done. If I say anything incorrectly please feel free to correct me.

Initially I thought that I could add custom classes to the default drop down list that appears in the Sitefinity editor along with items like Heading1 - Heading5 etc. This may be possible but the approach that I'm working with now includes adding a new drop down that is just for applying custom classes. I apologize for my previous posts not being clear but the advice is working like a charm, thanks :)

I found in another article somewhere that there is an xml document that shows all of the possible settings that can be turned on or off in the generic content editor. This file is found here:
~\Sitefinity\Admin\ControlTemplates\EditorToolsFileAll.xml

After looking at this dictionary of options and comparing it to my file that actually sets my editor's controls (~\Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml) I learned a couple of things.

First off is something in EditorToolsFile.xml

<tools name="DropdownToolbar" dockable="false"> 

This is where the existing drop down for standard formatting exists and where I added the drop down for custom drop downs. The standard formatting dropdown is identified as:

 <tool name="FormatBlock"/> 

I found the tool in EditorToolsFileAll.xml that allows us to add the drop down for custom CSS in the EditorToolsAll.xml file and added it into the DropDownToolbar section of EditorToolsFile.xml. The result looks like this:

  <tools name="DropdownToolbar" dockable="false"> 
    <tool name="FormatBlock"/> 
    <tool name="ApplyClass"/> <!-- *** THIS ADDS THE CUSTOM CSS DROP DOWN *** --> 
    <tool name="FormatStripper"/> 
  </tools> 

Now with the ApplyClass tool added to EditorToolsFile.xml I can follow the directions posted above and my custom styles work in the editor.

A few things to note.

Following the previously posted directions does a couple of things.

The name of the css class that you use has multiple purposes that may not be immediately apparent.
1. When you add a new class to EditorToolsFile.xml and a style to EditorContentArea.css this defnes how text will look both in the Class selection dropdown and how text will look in wysiwyg mode while editing.
2. The name of the class you choose is also how the <span> assigned will ultimately render given the chosen theme.

I mention this because I have one class where it is to be used to render white text over a table that has a grey background. If I directly copy and paste the style from my theme's css to EditorContentArea.css and look at the edtitor I see this:

When the drop down list for available CSS classes renders it's white text on a white drop down and you can't see the text.

My solution here was to change the class in EditorContentArea.css so that it has a grey background. Now when an editor clicks the "Apply CSS..." drop down they see an item with a dark background with white text, but when the content is published it adhears to the theme that I've used and does not apply the grey background.

In summary EditorContentArea.css styles are only for how content will look in the Class selection drop down and while in edit mode. The name of your style needs to be the same between EditorContentArea.css, your theme's css, and the class added into EditorToolsFile.xml.

Thank you very much for the help, every time that I learn something new about how telerik or Sitefinity works I get even more behind the product. Decoupling how a custom css class works between the editor and the live page's theme was a great decision, it just took me a little while to understand it.

I thought someone out there might find this helpful and thanks again for the info Rebecca!

, 7/2/2008 9:42:36 AM

Hi Brett,

Thanks for sharing your experience with us.
Your absolutely right in your observation. Indeed, Apply Css Class tool is not enabled by default in the ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml but I thought you were referring to it here:
"I'm trying to add my styles into the drop down list of the editor".
The FormatBlock tool (Paragraph Style dropdown) is responsible for setting the block elements only; for the other elements, you need the ApplyClass tool.

Greetings,
Rebecca
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Brook, 7/18/2008 1:19:43 PM

I was implementing this functionality using the latest 3.2 release and when using FireFox 3.0.1, I only get a few of the styles i have added to the CSS list in my tool file. It works fine and shows the complete list in IE 7. Not sure if this is a bug or not. To implement the custom css styles I added approx four of them to the EditorToolsFile.xml, added the four styles to EditorContentArea.css. Also I am using the latest RadControls for ASP.net Ajax and have my site configured with 3.5 extensions to permit using Linq.

I have instructed my client to use only the IE browser for the time. Anyone have the same issues?

, 7/21/2008 10:15:28 AM

Hi Brook,

Can you send us your CSS styles which you have added to the Editor? We will inspect them locally and get back to you with a solution or suggestion.

Thank you for your cooperation in advance.

Greetings,
Georgi
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Sean, 8/3/2008 10:53:12 PM

Hi there,

I had this same problem, with the classes not showing in the drop down, but in the end it turned out that Firefox was caching and after I cleared the Cache and refreshed the my classes appeared.

Hope this helps someone else who gets stuck on this.

Kind Regards
Sean

a product by telerik

Sitefinity ASP.NET CMS - Content Management System

Support Forum Thread