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

Forums / Designing with Sitefinity / Make Generic Content aware of my styles?

Make Generic Content aware of my styles?

9 posts, 1 answered
  1. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    23 Feb 2009
    Link to this post
    How do I link a css file up to the GenericContent editor so what the user sees in the page is what they see in the editor?
  2. Nikolai
    Nikolai avatar
    216 posts
    Registered:
    21 Nov 2016
    25 Feb 2009
    Link to this post
    Hello Steve,

    Please follow the ApplyCSS discussion that will show you how to add CSS styles to the rad Editor. If I am understanding you correctly, there might be a CSS style you have added to the page that overrides the RadEditor CSS styling.
    If this is not your case please provide us with more details of what exactly is happening and what you are trying to achieve.


    Kind regards,
    Nikolai
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    26 Feb 2009
    Link to this post
    Working great on my admin template now, but how do I apply them to the generic content editor on the users edit page?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    27 Feb 2009
    Link to this post
    Hi Steve,

    You can edit ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml. Adding new tools to the file will be shown in the Generic Content control - edit mode.

    Let us know if there is anything else that we can do for you.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    27 Feb 2009
    Link to this post
    Hi, sorry, maybe I'm just missing it, but I don't see where to add the .css file references in the toolsfile.xml...

    I googled this page as a reference http://www.sitefinitywatch.com/notes/09-01-14/Making_the_Most_of_RadEditor_in_Sitefinity.aspx but I've already added the ContentEditView.ascx and added my css files to it.  They arent showing up on the users Generic_Content editor though.
  6. Sonya
    Sonya avatar
    231 posts
    Registered:
    24 Sep 2012
    03 Mar 2009
    Link to this post
    Hello Steve,

    As far as I understand, you would like to apply specific custom styles to a RadEditor that will be available in the public part of Sitefinity. Is this correct? If so, you could use as an example the Forums module which provides functionality for users to use RadEditor on the public side in order to post a new thread or reply to an existing one.

    Here is how the RadEditor is declared in the EditPost.ascx template for Forums:
    <telerik:RadEditor  
            ID="tbQuote"  
            runat="server" 
            ToolsFile="~/Sitefinity/ControlTemplates/Forums/ToolsFile.xml" 
            EnableEmbeddedSkins="True"  
            Skin="Default2006"  
            DialogsCssFile ="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorDialogs.css" 
            Height="200px" 
            EditModes="Design,Html" 
            Width="95%"
            <CssFiles> 
                <telerik:EditorCssFile Value="~/Sitefinity/ControlTemplates/Forums/EditorCssFile.css" /> 
            </CssFiles>  
        </telerik:RadEditor> 

    When you modify the highlighted file EditorCssFile in the desired way (applying the styles for the theme), you should be able to observe the changes on the public side as well.

    This is basically the same as one of the approaches described in the forum thread provided by my colleague Nikolai, with the only difference that this is placed in the template for the public side of the module.

    Let us know if you need further assistance or if there has been a misunderstanding from our side regarding your requirements.

    Sincerely yours,
    Sonya
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
    Answered
  7. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    07 Aug 2009
    Link to this post
    Hi,
    I am also trying to add my own css on the dropdown when I go to edit mode of generic control.
    I followed this post but it's not working. There is no file called EditorTemplate.ascx.
    http://www.sitefinity.com/support/forums/sitefinity-3-x/designing-with-sitefinity/css-style-inside-r-a-d-editor.aspx

    And at the bottom of this post you mentioned to use an example of Forums module. But there is no EditPost.ascx template for Generic control.

    Anyway this is what I did which is still not working. For example
    Under "Admin\themes\default\ajaxControlSkins\sitefinity\EditorContentArea.css", I added
    .subtitle{
    color:#000;
    }


    Then in Sitefinity\Admin\controltemplates\EditorToolsFile.xml, I added

    <classes>
        <class name="Add CssClasses collection here:" value=".attention" />
        <class name="EditorToolsFile.xml" value=".read" />
        <class name="Black Text" value=".subtitle" />
      </classes>

    Any suggestions? I am using the latest version 3.6 sp2

  8. Rabindra
    Rabindra avatar
    106 posts
    Registered:
    17 May 2009
    08 Aug 2009
    Link to this post
    For some reason I was unable to add any css style under Paragraph Style dropdown.
    But I was able to add "apply css style" dropdown with the help of few other posts which is listed at the end.
    I think in Sitefinity 3.6 SP2 there are some new file names which aren't mentioned on other posts.

    This is what I did to add my own style sheet. And it might be helpful to others.

    1. You have to edit css reference in this file "GenericContentDesigner.ascx" which is located at
    Sitefinity\Admin\ControlTemplates\Generic_Content\GenericContentDesigner.ascx
    eg.
    <CssFiles>
            <%--<telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />--%>
            <telerik:EditorCssFile Value="~/App_Themes/MSCTemplate Theme/genericFormatting.css" />
     </CssFiles>

    By default "EditorCssFile.css" is referenced as you can see above. This empty file is located at
    Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css. If you do not want to use this file but your own then you have to do as I did above. My css file "genericFormatting.css" is the one I created. Note:it is different from my actual template css file.

    2. Add all your css elements in your custom css file (eg. genericFormatting.css") or defautl file EditorCssFile.css.

    3. Open EditorToolsFile.xml which is located at Sitefinity\Admin\ConrolTemplate\EditorToolsFile.xml

    Somewhere at line 155 you will see
    <classes>
          <class name="Clear Class" value="" />
          <class name="Add CssClasses collection here:" value=".attention" />
        <class name="EditorToolsFile.xml" value=".read" />
        <class name="Article Title" value=".ArticleTitle" />
    </classes>

    Add your css elements like mentioned above. The value ".ArticleTitle" is the element I had in my custom css file or if you don't have custom file you should use EditorCssFile.css.

    4. Now on this same file EditorToolsFile.xml, go to about line number 30. You will see
      <tools name="DropdownToolbar" dockable="false">
        <tool name="FormatBlock"/>
        <tool name="FormatStripper"/>
        <tool name="ToggleScreenMode" />
          <tool name="ApplyClass"/>
      </tools>

    You will have to add "<tool name="ApplyClass"/>" as above.

    Now in your CMS open Edit of your generic control. You will see an additional dropdown named "Apply css class" on the right. Now you should be able to see the name you added on step 3 eg. "Article Title". You are ready to apply your custom css.

    In my case everything worked fine at the backend. I could see my title being formatted but didn't work at the front end when I viewed that particular page. This was because my front end page wasn't importing my custom css file "genericFormatting.css" as it was different from my main Tempalate css file. So on my main Templage css file I had to add this line at the top
    @import url(genericFormatting.css)

    ref:
    http://www.sitefinity.com/support/forums/sitefinity-3-x/designing-with-sitefinity/css-style-inside-r-a-d-editor.aspx
    http://www.sitefinitywatch.com/notes/09-01-14/Making_the_Most_of_RadEditor_in_Sitefinity.aspx

  9. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    12 Aug 2009
    Link to this post
    Hi Rabindra,

    Thanks for posting the complete steps. The RadEditor documentation is covering the paragraph topics as well.

    Kind regards,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
Register for webinar
9 posts, 1 answered