This is a migrated thread and some comments may be shown as answers.

Issue defining custom CSS styles via RadEditor.css

21 Answers 683 Views
WebParts for SharePoint
This is a migrated thread and some comments may be shown as answers.
Tom.S
Top achievements
Rank 1
Tom.S asked on 04 Jun 2007, 07:53 AM
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.

21 Answers, 1 is accepted

Sort by
0
Lini
Telerik team
answered on 04 Jun 2007, 11:00 AM
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
0
Tom.S
Top achievements
Rank 1
answered on 05 Jun 2007, 05:42 AM
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.
0
Lini
Telerik team
answered on 07 Jun 2007, 04:23 PM
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
0
manishrao
Top achievements
Rank 1
answered on 03 Jul 2007, 10:13 AM
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.
0
chanti
Top achievements
Rank 1
answered on 09 Aug 2007, 07:44 AM
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.
0
Lini
Telerik team
answered on 09 Aug 2007, 03:00 PM
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
0
chanti
Top achievements
Rank 1
answered on 10 Aug 2007, 06:47 AM
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.
0
Lini
Telerik team
answered on 10 Aug 2007, 09:56 AM
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
0
chanti
Top achievements
Rank 1
answered on 10 Aug 2007, 10:13 AM
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.
0
chanti
Top achievements
Rank 1
answered on 10 Aug 2007, 01:30 PM
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.
0
Lini
Telerik team
answered on 14 Aug 2007, 08:12 AM
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
0
chanti
Top achievements
Rank 1
answered on 16 Aug 2007, 05:42 AM
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.

0
Georgi Tunev
Telerik team
answered on 17 Aug 2007, 02:54 PM
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
0
chanti
Top achievements
Rank 1
answered on 18 Aug 2007, 09:56 AM
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.
0
Georgi Tunev
Telerik team
answered on 20 Aug 2007, 12:03 PM
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
0
chanti
Top achievements
Rank 1
answered on 20 Aug 2007, 01:28 PM
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.
0
Erik
Top achievements
Rank 1
answered on 23 Nov 2009, 01:01 PM
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
0
Stanimir
Telerik team
answered on 24 Nov 2009, 02:08 PM
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.
0
Erik
Top achievements
Rank 1
answered on 24 Nov 2009, 02:15 PM
Thank you,

This is what I was looking for.
Its based on sitecollection UID I assume
0
diego raga
Top achievements
Rank 1
answered on 17 May 2010, 12:04 AM
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?


0
Lini
Telerik team
answered on 17 May 2010, 11:09 AM
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.
Tags
WebParts for SharePoint
Asked by
Tom.S
Top achievements
Rank 1
Answers by
Lini
Telerik team
Tom.S
Top achievements
Rank 1
manishrao
Top achievements
Rank 1
chanti
Top achievements
Rank 1
Georgi Tunev
Telerik team
Erik
Top achievements
Rank 1
Stanimir
Telerik team
diego raga
Top achievements
Rank 1
Share this question
or