Change radwindow title color and font

[Fakhrul]

Hi,

How can i change radwindow title color and font size of outlook skin? I am using an older version 1.5.2.0.

Thanks in advance!

Fakhrul

[Martin]

Hi Fakhrul,

You may easily change anything in the appearance of RadWindow if you edit the CSS file of the skin. You may use Microsoft Developer Toolbar or FireBug in order to inspect the necessary classes that need to be changed so as to achieve the desired look and feel.

Regards,
Martin Ivanov
the Telerik team

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

[eugen100]

Could you explain it more explicitly? I tried the following:
1. Added Window.Office2007.css to the project
2. added 

 

font-family:Arial ;
after

 

div.RadWindow_Office2007

 

.rwTitlebarControls em

 

(I did not find more suitable place)
3.in

telerik

 

:RadWindowManager

 

I have the following code:

<

 

telerik:RadWindow

 

 

id="EventListRadWindows"

 

 

runat="server"

 

 

 

Behaviors="Move,Minimize,Close"

 

 

IconUrl="~/Images/EmergencyEvents.png"

 

 

 

Visible="true" Skin="Office2007"

 

 

>

 

 

</telerik:RadWindow>

But all this does not help.

 

[Marin Bratanov]

Hi  Evgeny,

If you wish to embed this in the skin you also need to configure the RadWindow to use your custom skin instead of the built-in one. How to do this is explained in the second section of the following help article: http://www.telerik.com/help/aspnet-ajax/window-appearance-css-classes-usage.html. At the current state your CSS file is neither loaded, nor applied to the RadWindow (at least this is what I can deduce based on the code snippets).

An alternative is to use a CSS rule in the page that will override the CSS from the built-in skin. This is easiest done via the !important attribute, or by making the class selector heavier. A simple example follows:

.rwTitlebarControls em
{
    color: Red !important;
}

and

<telerik:RadWindow id="EventListRadWindows" runat="server" Behaviors="Move,Minimize,Close" Title="lorem ipsum dolor sit amet"
IconUrl="~/Images/EmergencyEvents.png" Visible="true" Skin="Office2007" VisibleOnPageLoad="true" />

This results in the attached screenshot. Note that this exact rule will affect all RadWindows on the page and is not skin-specific.

There exists yet a third option - you can use the RadWindow's set_title() method and set an HTML string to be displayed in the titlebar, which can contain your css rules. Please note that this must be used carefully, as if the page loaded in the RadWindow has the <title> set it may override your code after the page fully loads.


Kind regards,
Marin
the Telerik team

[eugen100]

Thank you very much!