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 242 Views

Editor

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

9 Answers, 1 is accepted

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.

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

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

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

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

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

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

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" />
    
    <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