Issue defining custom CSS styles via RadEditor.css

22 posts, 0 answers
  1. Tom.S
    Tom.S avatar
    17 posts
    Member since:
    Apr 2007

    Posted 04 Jun 2007 Link to this post

    Hi,
     I'm following the documentation section 'Defining custom CSS styles' and I can't seem to get the rad editor to use the custom external stylesheet defined in RadEditor.css.

    I've created a new css file whose path is: C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.1.0.0__1f131a624888eeed\RadControls\Editor\

    The styles dont appear in the drop down style picker even after restarting IIS.

    I'm using the rad editor with WSS v3.0.

    Any help would be much appreciated,
    Tom.
  2. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 04 Jun 2007 Link to this post

    Hello Tom,

    There is an error in the editor documentation. The correct file name is 

    /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/4.1.0.0__1f131a624888eeed/RadControls/Editor/CssEditor.css

    You should rename RadEditor.css to CssEditor.css and the styles will be applied. We apologize for the inconvenience.

    Greetings,
    Lini
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center

  3. Tom.S
    Tom.S avatar
    17 posts
    Member since:
    Apr 2007

    Posted 05 Jun 2007 Link to this post

    Hi,
     Thanks for you quick reply. It seems to work fine when in edit mode, the styles are accessed from CssEditor.css and displayed correctly, however the stylesheet isn't applied to the web part area containing the content when a page is displayed in normal (reading) mode.

    I'm a bit confused as to wether this is due to me using WSS and not MOSS, or if it's something else.

    Thankyou,
    Tom.
  4. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 07 Jun 2007 Link to this post

    Hello Tom,

    We have looked into the issue some more and it seems that this is a bug in the current versions. You can work around it by adding the CssEditor.css file manually on the page. You can easily do that by using SharePoint Designer. A good place to add the CssEditor.css file is the master page. I am sorry for the inconvenience this has caused you.

    The Web Part and WCM editors have already been patched to fix this issue, however we are still brainstorming on how to fix the list (wiki,blogs) editor. The list editor control is only used when you are actually editing the list item. When you are only browsing, MOSS is not using our control at all, so we cannot register the CSS file. Perhaps the only way to use the CssEditor.css file in lists would be to manually register the file with SharePoint Designer in the lists master page.

    Greetings,
    Lini
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. manishrao
    manishrao avatar
    1 posts
    Member since:
    May 2007

    Posted 03 Jul 2007 Link to this post

    The best thing to do is to goto the following location....
    C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
    and should find the following css files:
    1] HtmlEditorCustomStyles.css: For Applying font and images related changes.
    2]HtmlEditorTableFormats.css: For applying changes on the tables.
    3] CORE.CSS:The changes made in any of the above  css  file needes to be updated in this file.
    Once this is done clear ur browser history and temporary internet files and refresh the aspx page to get the changes.
  6. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 09 Aug 2007 Link to this post

    Hi telerik team,

    i am using the rad editor for share point. but my problem is in Apply CSS styles drop down, i am getting all the styles in core.css, htmlcustomstyles.css and htmltablestyles.css  files styles.
    but i don't need all these styles to shown in this drop down.
    my client gets confusion and not applying correct styles.
    is there any way to show the styles what i want.
    please help me out
    thanks in advance.
    Praveen.
  7. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 09 Aug 2007 Link to this post

    Hi Praveen,

    You can set the following in the editor's configuration file:

    <property name="CssFiles">
     <item>\wpresources\RadEditorSharePoint\4.3.1.0__1f131a624888eeed\RadControls\Editor\CssEditor.css</item>
    </property>

    This will instruct the editor to load only the CssEditor.css file (if present). All other styles will be deleted from the styles dropdown list. As you have probably guessed, you can add as many files as you want to this list and they will be loaded in the Apply Style dropdown.

    The editor configuration file is called either ConfigFile.xml or ListConfigFile.xml, depending on your scenario. It is located in the \Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.3.1.0__1f131a624888eeed\RadControls\Editor\ folder.

    Note that this applies only for the current MOSS editor version (4.3.1) if you are using an older version then there is no way to modify the contents of the Apply CSS list.

    Greetings,
    Lini
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 10 Aug 2007 Link to this post

    Hi Lini,

    what a beautiful solution.
    but unfortunately, iam using 4.3.0. version.
    please reply me as fast as possible.
    thank you very much.
    praveen.
  9. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 10 Aug 2007 Link to this post

    Hi,

    Unfortunately, the only choice you have is to upgrade to the latest release. Download version 4.3.1 from our site and read the upgrade instructions in the included documentation. The upgrade process is relatively easy - retract the old solution, deploy the new one and update a few web.config settings.

    Kind regards,
    Lini
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 10 Aug 2007 Link to this post

    hi Lini,
     thanks you very much.
    i didn't expect, you guys replied me this much faster.
    thanks.
    i will try and let you know the status.

    thanks
    Praveen.
  11. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 10 Aug 2007 Link to this post

    Hi Lini,
     finally i am in trouble. I installed 4.3.1 version. But i am not getting the functionality work.
    i added CSSEditor.css file in Configfile.xml.
    it is showing styles in csseditor styles first and then core,other two files styles following it.
    if i added csseditor.css property in configfile.xml and listconfigfile.xml,No styles are showing in drop down.
    please help me.
    why these are not showing...

    thanks
    Praveen.
  12. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 14 Aug 2007 Link to this post

    Hello Praveen,

    This is the expected behavior with the new version (4.3.1).

    By default, the editor will use the following CSS files:

    /_wpresources/RadEditorSharePoint/4.3.1.0__1f131a624888eeed/RadControls/Editor/CssEditor.css
    /_layouts/1033/styles/HtmlEditorTableFormats.css
    /_layouts/1033/styles/HtmlEditorCustomStyles.css

    When you add the CssFiles property in the configuration file, the above list is ignored and only what's inside the CssFiles property counts. For example:

    <property name="CssFiles">
     <item>\wpresources\RadEditorSharePoint\4.3.1.0__1f131a624888eeed\RadControls\Editor\CssEditor2.css</item>
    </property>

    If you have the above in the config file, then the editor will only look for the CssEditor2.css file and use only the CSS styles from that file in the Apply CSS Class dropdown list. This means that if you want to use the CssFiles property, you need to list ALL css files that you want to use in the Apply Class dropdown list.


    All the best,
    Lini
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 16 Aug 2007 Link to this post

    sorry Lini,
    it's not working for me.
    it worked for you guys?
    what's wrong? i just  installed and in listconfig.xml, i added cssfiles property.
    it is showing all the styles in the style sheet added in config file at the top of drop down, and all styles default populate by rad editor following it.
    if i add in config.xml, it's  not showing any thing.
    really disappointed..
    please take a look it again, please
    thanks
    Praveen.

  14. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 17 Aug 2007 Link to this post

    Hello Praveen,

    Please open a new support ticket and send us your configuration file and the CSS file that you wish to use so we can check it.



    All the best,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  15. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 18 Aug 2007 Link to this post

    This is the listConfig.xml file.
    <?xml version="1.0" encoding="utf-8" ?>
    <!-- ==============================================================================================
        Config File valid structure:
        <configuration>
        <property>...</property>
        ...
            <property>
                <item>...</item>
                <item>...</item>
                ...
            </property>
            ...
        </configuration>
    =============================================================================================== -->
    <configuration>
      <property name="ConvertToXhtml">true</property>
      <property name="EnableDocking">False</property>
      <property name="ShowPreviewMode">False</property>
      <property name="StripAbsoluteAnchorPaths">False</property>
      <property name="StripAbsoluteImagesPaths">False</property>
      <property name="Height">240px</property>
      <property name="Width">500px</property>
    <property name="CssFiles">
     <item>\wpresources\RadEditorSharePoint\4.3.1.0__1f131a624888eeed\RadControls\Editor\CssEditor.css</item>
    </property>

    </configuration>

    Below is the css file named csseditor.css.
    .rad-BodyText
    {
        font-size:1.0em;
        font-weight: normal;
        font-family:Arial, Helvetica, sans-serif;
    }

    .rad-IntroText
    {
        font-size: 1.2em;
        font-weight: normal;
        font-family:Arial, Helvetica, sans-serif;
    }

    .rad-H1
    {
        font-size: 2.2em;
        font-weight: normal;
        font-family:Georgia;
    }

    .rad-H2
    {
        font-size: 1.7em;
        font-weight: normal;
        font-family:Georgia;
    }

    .rad-H3
    {
        font-size: 1.0em;
        font-weight: bold;
        font-family:Arial, Helvetica, sans-serif;
    }

    thanks for all.
    here i added my files.
    thanks
    praveen.
  16. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 20 Aug 2007 Link to this post

    Hello Praveen,

    Make sure that the path to the CSS file is correct and matches your setup. The path must be set with forward slashes and must match the exact location of the CSS file that you set. For example on RadEditor for MOSS v4.3.2, the path is set like this:

    <property name="CssFiles">  
     <item>/_wpresources/RadEditorSharePoint/4.3.2.0__1f131a624888eeed/RadControls/Editor/CssEditor.css</item> 
    </property> 

    It leads to the ..\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\4.3.2.0__1f131a624888eeed\RadControls\Editor folder and if there is such file in it, the CSS dropdown will be populated as expected (see attached screenshot)



    Best wishes,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  17. chanti
    chanti avatar
    15 posts
    Member since:
    Aug 2007

    Posted 20 Aug 2007 Link to this post

    hi Georgi Tunev,
     thanks you very much.
    it is working very fine.
    but the only problem with this is needs to put '_' before wpresources.
    but none of you guys didn't specify before this post.
    due to this i wasted lot of time. please mentioned correct format.
    Tunev you posted very well, the previous posts didn't specify this.
    nice and one again thank you very much.

    thanks
    Praveen.
  18. Erik
    Erik avatar
    12 posts
    Member since:
    Dec 2008

    Posted 23 Nov 2009 Link to this post

    Hi,

    I have a question about defining custom CSS Styles.

    Within my SharePoint Farm i'm running mutiple lables for diffrent websites.
    These lables all have their own style implementations. So they also need different "Apply styles" depending the label (Brand)

    Is it possible to use somekind of config switch for the CssEditor.css files.
    Example:
    Label A needs to use CssEditor_Label_A.css
    Label B needs to use CssEditor_Label_B.css
    Label C needs to use CssEditor_Label_C.css

    Kind regards
    Erik
  19. Stanimir
    Admin
    Stanimir avatar
    1653 posts

    Posted 24 Nov 2009 Link to this post

    Hi Erik,

    What you can do is create different configuration (ToolsFile.xml, ListToolsFile.xml) files for the different webs and define different cssFiles collections in them. Here are the help articles that you will need to review in order to achieve the desired functionality.
    http://www.telerik.com/help/aspnet-ajax/different-configuration-files-for-different-webs.html
    http://www.telerik.com/help/aspnet-ajax/externalcssfiles.html


    All the best,
    Stanimir
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  20. Erik
    Erik avatar
    12 posts
    Member since:
    Dec 2008

    Posted 24 Nov 2009 Link to this post

    Thank you,

    This is what I was looking for.
    Its based on sitecollection UID I assume
  21. diego raga
    diego raga avatar
    1 posts
    Member since:
    May 2010

    Posted 16 May 2010 Link to this post

    Hi,

    I really apreciate if you could help me.

    Im using the rad control for the DNN 05.03.01 (7)

    and im trying to apply my own css but its not working.

    I cant find the route. I tried with: 

    C:\Inetpub\vhosts\dnn.dominionmexico.com\httpdocs\Providers\HtmlEditorProviders\Telerik 

    changing the only .css that is there: EditorOverride.css

    This is the content: 
    .RadEditor ul li, .reDropDownBody ul li
    {list-style: none !important;}
    .RadEditor a, .reDropDownBody a
    {text-decoration: none !important;}
    div.RadWindow table.rwTitlebarControls ul.rwControlButtons li
    {list-style-type: none;}

    And I add the following:


    .titulos {
    font-family: CALIBRI;
    font-size: 24px;
    font-weight: bold;
    color: #003549;
    text-indent: 51px;
    }
    .linea {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: 187495;
    }
    .texto {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #3F3F3F;
    text-align: justify;
    }
    .fecha {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #31677B;
    text-align: justify;
    }
    .tituloNoticia {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #003549;
    text-align: justify;
    text-transform: uppercase;
    text-decoration: underline;
    }
    .leerMas {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #20566A;
    text-align: right;
    }
    .lineaDivisoria {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: D7D7D7;
    }
    .tituloTexto {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #003549;
    text-align: justify;
    text-transform: uppercase;
    }
    .subtitulos {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #003549;
    text-align: justify;
    }
    But Still not working


    could you help me?


  22. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 17 May 2010 Link to this post

    Hello,

    The EditorOverride.css file is only loaded when the editor is on the page to fix possible CSS conflicts with the DNN skin. If you want to add additional styles that should be used inside the editor content area, you can easily do that from the portal.css file in your DNN portal folder.

    Sincerely yours,
    Lini
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top