Adding CSS Classes to the Content Editor

Posted by Community Admin on 03-Aug-2018 18:52

Adding CSS Classes to the Content Editor

All Replies

Posted by Community Admin on 10-Nov-2011 00:00

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

Posted by Community Admin on 11-Nov-2011 00:00

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 !!!

Posted by Community Admin on 11-Nov-2011 00:00

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

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 11-Nov-2011 00:00

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   

<tool name="ApplyClass" />

to my StandardToolsFile.xml and I can see also see the "Apply CSS Class" Drop down show up in the editor.

I also added a

<cssFiles>
  <item name="~/Sitefinity/WebsiteTemplates/MyTemplate/App_Themes/Default/CSS/RadEditor.css" />
</cssFiles>
 
element after all the tools elements.

Thanks!

-Ben

Posted by Community Admin on 16-Jun-2014 00:00

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.

Posted by Community Admin on 17-Jun-2014 00:00

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

 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

This thread is closed