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!