Adding CSS Classes to the Content Editor

Hi,

I'm wondering how I would add a couple css classes to the content editor, specifically when you right click on an Image and go to Properties then CSS Classes. I've attached a couple of screenshots to show where I'm referring to.

Thanks,

-Ben

Ben,

If I understand the question right, then I think there are two ways that I can think of:
1 - You can drop a CSS control (from the tool box) straight onto the page or on the Master Page for that page and then reference the CSS class in that drop down box.
2 - If you use your own Master Page then you can attach CSS files to it and then have the CSS classes in the CSS file. Then reference the classes through the drop-down box that you show in your example.

I hope I understood the question correctly.
Andrei

If you don't have a current back-up of the system (source code and database), then do it now !!!

Hello,

Like Andrei properly pointed out, you'll need to have the CSS loaded on your page in order to be able to use it. The easiest way to achieve this would be to modify the Content editor's ToolsFiles and add a reference to an external CSS file that contains your styles. Then you can substitute the default ToolsFile we're using with your custom one, and this will ensure that the ApplyCSS dropdown is populated with your custom CSS. You can check this forum thread which contains a detailed discussion on achieving similar functionality, and check out the videos and code samples we've provided there. If you have any additional questions, or needs some further information, please let us know.

Kind regards,
Boyan Barnev
the Telerik team

Thanks for getting back to me. I followed the steps in Grisha's blog post and was able to get everything to work, here are my steps:

Under Adiminstration --> Advanced --> Appearance in the StandardEditorConfiguration box I have my config file: ~/App_Data/Sitefinity/WebsiteTemplates/MyTemplate/App_Themes/Default/config/StandardToolsFile.xml

I know that the editor is picking it up, as I can comment out the Bold tool element and see that option be removed from the editor.

I added the   

Hello - 

Is there a way to get the class to be added to the top level element such as the UL in a list instead of the LI each time? When you have a list, and the user selects the class from the drop down, it will get added to the li element instead of the UL element.

Thank you.

Hello Laura,

What version of Sitefinity are you using? I have tested on both Sitefinity 6.3 and 7.0 and the ApplyCss behavior is exactly what you want - it is setting the class only to the parent element - <ul> or <ol> for lists. I have recorded a video of the behavior of the ApplyCss on my end.

Regards,
Nikola Zagorchev
Telerik