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

Rad Editor for DotNetNuke Pro 5.2.3 custom css

9 Answers 98 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jean Crow
Top achievements
Rank 1
Jean Crow asked on 18 May 2010, 12:23 AM

hi, all --

We've been trying to customize the "Apply CSS Class" dropdown in the editor.  This article explains how to do it by editing the ToolsFile.xml file ... we are guessing that in DotNetNuke this file is named 

~\DNN_523_Prod\Providers\HtmlEditorProviders\Telerik\Config\ToolsDefault.xml

We edited it per the article, but our added classes do not appear in the dropdown.

Any ideas?


Thanks much,
John Kwasnik using teammate Jean Crow's account



9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 18 May 2010, 08:32 AM
Hi Jean,

By default, the editor copies all styles from the page (skin, portal styles, etc.) and populates them in the Apply Class dropdown. To override them, set the CssFiles editor property. In DNN this can be done either from the editor configuration file (Website\DesktopModules\TelerikWebUI\RadEditorProvider\ConfigFile.xml) or through the editor provider configuration in the Web.config file.

Please, see this KB article for more information how to set properties with multiple values in the ConfigFile.xml file: Configuring RadEditor for ASP.NET AJAX in DNN.

Best regards,
Rumen
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.
0
Jean Crow
Top achievements
Rank 1
answered on 19 May 2010, 10:36 PM

Rumen --

Thanks for the prompt reply.

I did check your article citation.  However, there is no such path:

~\DesktopModules\TelerikWebUI\RadEditorProvider\

we find:

~\Providers\HtmlEditorProviders\Telerik\Config\

Our web.config maps ToolsFile and ConfigFile like this:

[ ... ]
      <providers>
        [ ... ]
        <add name="TelerikEditorProvider" type="DotNetNuke.Professional.Providers.HtmlEditorProviders.TelerikEditorProvider.EditorProvider, DotNetNuke.Professional" providerPath="~/Providers/HtmlEditorProviders/Telerik/" toolsFile="~/Providers/HtmlEditorProviders/Telerik/Config/ToolsDefault.xml" configFile="~/Providers/HtmlEditorProviders/Telerik/Config/ConfigDefault.xml" FilterHostExtensions="True" />
        [ ... ]
      </providers>
[ ... ]

So I have in ConfigDefault.xml (fragment):

[ ... ]
 <property name="CssFiles">~/Providers/HtmlEditorProviders/Telerik/Config/EditorCustom.css</property>
 <property name="CssClasses">Normal,HideMe,ReadMoreAcc</property>
[ ... ]

and in ToolsDefault.xml (fragment):

[ ... ]
 <classes>
  <class name="Normal" value=".normal" />
  <class name="HideMe" value=".hideMe" />
  <class name="ReadMoreAcc" value=".readMoreAcc" />
 </classes>
[ ... ]

The CssFiles property works, because now we get the same styling in the editing window as on the page.  But the "Apply CSS Class" dropdown only shows "Normal" ... which had been there out-of-the-box. 

We would very much like to enable our users to apply a class in this way, without having to edit the HTML.

Any assistance will be greatly appreciated,
John Kwasnik using teammate Jean Crow's account

0
Lini
Telerik team
answered on 20 May 2010, 09:48 AM
Hi John,

It seems that you are using the editor provider written by DotNetNuke Corp. and not our RadEditor provider. In this case you should direct your question to the DNN support. I apologize for the misunderstanding.

Although I am not sure it will work, I suggest that you try adding the <classes> element just before the end of the ToolsDefault.xml file (before the closing </root>). Check if you have duplicate <classes> elements in the tools file. Also, if you see an empty class dropdown after you add the <classes> element, make sure the CSS files you load in the editor content are actually have the .class_name values you use in the tools file.

Kind regards,
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.
0
Jean Crow
Top achievements
Rank 1
answered on 26 May 2010, 10:56 PM

Lini --

Thanks for the reply.  A couple of things:

1. does the DotNetNuke Pro license allow us to install the real RadEditor provider?  Or is their adapted version all we get without obtaining a separate license from Telerik?

 

2.  stumbling around, I did find a solution:  removing all children from ToolsDefault.xml causes the editor dropdown to poplulate exclusively from ~/Providers/HtmlEditorProviders/Telerik/Config/EditorCustom.css ... but then they don't show in the editing pane until they are again listed in ToolsDefault.xml ... any new styles must be added to both

Thanks much,
John Kwasnik using teammate Jean Crow's account

0
Lini
Telerik team
answered on 27 May 2010, 10:45 AM
Hi John,

Yes, you can safely install our DNN RadEditor provider as we continue to support it. The current Telerik modules PA does not overwrite the Telerik.Web.UI assembly you already have in DNN so you do not have to worry about problems due to different versions. Simply deploy the PA and choose our provider from the RadEditor activation module.

I see that you have managed to resolve your original issue, which is great. I am sure that DNN Corp. will continue to develop their RadEditor provider and will be happy to hear your feedback.

Kind regards,
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.
0
stephany
Top achievements
Rank 1
answered on 15 Jul 2010, 09:36 AM
Hi,

i'm trying to do the same in DNN 5.4.4 but i doesn't work. Can you help me?
I created the EditorCustom.css on:  \Providers\HtmlEditorProviders\Telerik\Config\EditorCustom.css
Here i place my own class: .NemotoH1{font-weight:bold; color:#24b3c3;}

in the ConfigDefault.xml on: \Providers\HtmlEditorProviders\Telerik\Config\ConfigDefault.xml
i placed the following code:
...

<

 

classes>.NemotoH1</classes>

 

 

 <!--

 

<property name="Classes">EditorCustom.css</property>-->

 

 </

 

configuration>

i dont see my own NemotoH1 class in the dropdown.
Please help.

Thanks in advance.
Stephany

 

 

 

 

 

0
John
Top achievements
Rank 1
answered on 15 Jul 2010, 05:56 PM
Stephany --

[Note that we are using v.5.2.3, so I'm not sure this applies.] 

For some reason it took removing all children from the <classes> element in ToolsDefault.xml ... this seems to kick-start it.  Once that was gone, the "Apply Classes" dropdown should populate from EditorCustom.css (which it looks like you were commenting out?).  Then restore the ToolsDefault.xml <classes> element children with your custom style names ... noting these must be the same in both ToolsDefault.xml and ConfigDefault.xml

First, you may want to browse ConfigDocumented.xml ... this has comments explaining all possible properties.

In our setup, ConfigDefault.xml indicates the stylesheet for the RadEditor window as:

<property name="CssFiles">~/Providers/HtmlEditorProviders/Telerik/Config/EditorCustom.css</property>

And the custom style names (not the styles class name) as a comma-delimited list:

<property name="CssClasses">Normal,HideMe,ReadMoreAcc,ColorBox,Indent12</property>

Note that the editing window is NOT WYSIWYG unless your EditorCustom.css has the same classes as your DNN stylesheet(s).

Hope this helps,

John Kwasnik
DGS Web Team


0
stephany
Top achievements
Rank 1
answered on 16 Jul 2010, 08:08 AM
Hi John,

thanks for the help.
I found my own solution but im not sure if it's te right way to do it.
In the ToolsDefault.xml i placed my own css classes:
<?xml version="1.0" encoding="utf-8" ?>
<root>
    <modules>
        <module name="RadEditorStatistics" dockingZone="Bottom"/>
    </modules>
    <classes>
        <class name="Head" value=".Head" />
        <class name="SubHead" value=".SubHead" />
        <class name="SubSubHead" value=".SubSubHead" />
        <class name="Normal" value=".Normal" />
        <class name="NormalBold" value=".NormalBold" />
        <class name="NormalRed" value=".NormalRed" />
    <!--custom styles nemoto-->
    <class name="NemotoH1" value=".NemotoH1" />
    <class name="NemotoH2" value=".NemotoH2" />
    </classes>

and in my own skin i placed my cssstyle:
/* ------ eigen heads voor texteditor ------*/
.NemotoH1{font-weight:bold; color:#24b3c3;font-size:13px;}
.NemotoH2{ color:#24b3c3;font-size:12px;}

and that's working. I'm only scared that when upgrading to a newer version of DNN the ToolsDefault.xml file will be overwritten. And i think this will be the same problem with your solution.
What to you think?

Greetings,
Stephany
0
John
Top achievements
Rank 1
answered on 16 Jul 2010, 08:51 PM

Stephany --

I'm glad it's working for you now. 

About upgrades:  we usually keep backups of the DNN filesystem and database before an upgrade, so I'm not worried.  (Always expect the worst.)  For now, we are sticking with 5.2.3 ... DNN seems to be coming out with new versions every couple of weeks.  If we tried to keep up with all of them, that is all we would be doing.

Good luck with your project,

John Kwasnik
CA DGS web team
Tags
Editor
Asked by
Jean Crow
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jean Crow
Top achievements
Rank 1
Lini
Telerik team
stephany
Top achievements
Rank 1
John
Top achievements
Rank 1
Share this question
or