+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Adding CSS Classes to the Content Editor

Adding CSS Classes to the Content Editor

6 posts, 0 answered
  1. Ben
    Ben avatar
    44 posts
    Registered:
    27 Sep 2012
    10 Nov 2011
    Link to this post
    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
  2. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    11 Nov 2011
    Link to this post
    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 !!!
  3. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    08 Dec 2016
    11 Nov 2011
    Link to this post
    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
  4. Ben
    Ben avatar
    44 posts
    Registered:
    27 Sep 2012
    11 Nov 2011
    Link to this post
    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
  5. Laura
    Laura avatar
    311 posts
    Registered:
    25 Feb 2008
    16 Jun 2014 in reply to Ben
    Link to this post

    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.

  6. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    17 Jun 2014
    Link to this post
    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
     
6 posts, 0 answered