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

How to change the color of a raddock titlebar

1 Answer 155 Views

Dock

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

1 Answer, 1 is accepted

answered on 16 Jul 2010, 01:06 PM

Hi Vinay,

Here is a simple RadDock with removed background sprite image and applied background color to the titlebar, text color,and borders. I have explained with comments, the purpose of each class:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<style type="text/css">

/* this sets lime green border to the RadDock titlebar, as when we removed the sprite image, we do not have borders anymore */

.rdTop

{

border: 1px solid lime;

}

/* this sets lime green left and right border to the RadDock content, as when we removed the sprite image, we do not have borders anymore */

.rdMiddle

{

border-left: 1px solid lime;

border-right: 1px solid lime;

}

/* this sets lime green bottom border to the RadDock bottom part, as when we removed the sprite image, we do not have borders anymore */

.rdBottom

{

border-top: 1px solid lime;

}

/* this removes background image sprite in order to be able to set background color to the titlebar */

.rdLeft, .rdCenter, .rdRight

{

background-image: none !important;

}

/* this sets black background color to the whole titlebar, you could change it */

.rdTop .rdLeft, .rdTop .rdCenter, .rdTop .rdRight

{

background-color: black !important;

}

/* sets red color to the em element, which is the title of RadDock, you could change it */

.RadDock .rdTitleBar em

{

text-align: left;

color: Red !important;

}

</style>

</head>

<body class="BODY">

<form id="Form1" method="post" runat="server">

<telerik:RadScriptManager ID="ScriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadDock ID="rd1" runat="server" Width="400" Height="400" Top="20" Left="20"

Title="Rad Dock Title">

</telerik:RadDock>

</form>

</body>

</html>

Best wishes,
Bojo
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