[Solved] Overloading CSS Standart Classes

[Michael Hauk]

Hi,

its very important for us that we can overload the standart CSS Classes.

Is it possible to add a function so we can also load the CSS from a String and not only from a File?

Or is there another way to do that?

Example:
I have an external CSS File loaded but want to add 3 Classes dynamical so it looks different for every User.

Thank you.

[Rumen]

Hi Michael,

RadEditor does not offers a method / property for loading the css classes from a string.

The CssFiles property provides the ability to load only the classes declared in the css file(s) loaded through it. If you want to limit the classes declared in this css file(s) then just set the CssClasses collection, e.g.

RadEditor1.CssClasses.Add("Links class ", "a.link");
RadEditor1.CssClasses.Add("Images class ", ".img");

If you want to load different css files depending on the logged user you can try the following code:

    private string userRole = "John";

    private void Page_Load(object sender, System.EventArgs e)
    {
        switch (userRole)
        {
            case "John":
                RadEditor1.CssFiles.Add("~/John.css");
                break;

            case "Mike":
                RadEditor1.CssFiles.Add("~/Mike.css");
                break;

            default:
                RadEditor1.CssFiles.Add("~/Default.css");
                break;

        }
    }

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael Hauk]

Hi,

this is not a solution for us.

The CSS is allways the same only 3 Classes will change.
These 3 Classes have to be added dynamicaly.

Lets say Links allways look the same but the normal Text color will change.

Its not possible to make a CSS for every user since there are too many Users.

Why isnt it possible to add the function to set the CSS from a String?
You have to load a CSS file so it should be easy to make it possible to use a String instead.

I only need to add something to an existing CSS, why is that not possible?

[Rumen]

Hi Michael,

The appearance of the RadEditor's content areas is controlled by a css file imported to the page with a <link> tag, e.g.

<link href="EditorContentArea.css" type="text/css" rel="stylesheet" />

That is why the CssFiles property works with css file(s) but not with string(s).

I would propose two solutions for your scenario:

Solution 1
Create the CSS file dynamically and set an unique name depending on the logged user. After that load the css file via the CssFiles property.

  RadEditor1.CssFiles.Add("~/ContentArea" + LOGGEDUSERID + ".css");

Solution 2
Another approach is to load the classes, which you want to apply to the content area, directly in the content area:

<telerik:RadEditor ID="RadEditor1"  runat="server" >
    <CssFiles>
        <telerik:EditorCssFile Value="~/EditorContentArea.css" />
    </CssFiles>
    <Content>
    <style>
       .textRed { color:red; }
       .textBlue { color: blue; }
       .textGreen { color: green; }
    </style>
test test test <br />
<div class="textRed">TEST</div>

    </Content>
</telerik:RadEditor>

Kind regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[John]

I have an idea for this issue:
1. Add a literal control to the page;
2. Dynamically write that css string to the page through the literal control;

But this requires the class name to be exactly the same as the content iFrame's class name which I don't know. I think the dynamically generated css class might override the default class and make it work.

Am I right?

[Rumen]

Hi John,

The editor's IFRAME does not have applied css class to it, but if the CssFiles property is not set then the editor automatically picks up the css classes from the page and applies them to its content area. It also populates the apply class dropdown with these classes. So if you add a literal control and write the css classes to the page then the editor will pick up them.

Best regards,
Rumen
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.

[John]

Hi Rumen,
Thank you for your quick reply.
Do you mean  if the CssFile property is not set, the CSS I write through the literal control will work?
My qustrion is:
If I don't use CssFile property and don't give the contents any classed container, what class name I should use in the CSS to define the contents styles such as background, font color, etc.
Thank you!

[Rumen]

Hello John,

If you do not set the CssFiles property then you should set a global body class with the desired font-family, font-size and background-color properties, e.g.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    body
    {
        background-color: white;
        color: black;
        font-size: 20px;
        font-family: Arial;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager id="ScriptManager1" runat="server" />

        <telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs">
          <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
        </telerik:RadEditor>


    </form>
</body>
</html>

Sincerely,
Rumen
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.

[Rumen]

This is a follow-up!

Another approach is to assign a className to the editor's iframe element using the code below:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    .ContentStyles
    {
        background-color: black;
        color: red;
        font-size: 20px;
        font-family: Arial;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager id="ScriptManager1" runat="server" />
        <script type="text/javascript">
        function OnClientLoad(editor)
        {
            editor.get_contentArea().className = "ContentStyles";
        }
        </script>
        <telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad">
          <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
        </telerik:RadEditor>


    </form>
</body>
</html>

Kind regards,
Rumen
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.

[John]

Thank you very much, Rumen.They all works.
I take the last approach. I write the dynamic css class to the literal control.
But my css is using id selectors (#pageContainer { font:...;}). So I add the javascript as follows: 

 

function OnClientLoad(editor, args)

{ editor.get_contentArea().id =

"pageContainer"; }

It works perfect!
Thank you again, Rumen.