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

How to change the color of a raddock titlebar

1 Answer 108 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Vinay Kumar
Top achievements
Rank 1
Vinay Kumar asked on 16 Jul 2010, 09:58 AM

How to change the color of a raddock titlebar. I tried using

<style type="text/css">  
    .rdTitlebar,.rdTitle  
    {  
        background:green !important;  
    }     
</style> 


It doesnt work!

1 Answer, 1 is accepted

Sort by
0
Bozhidar
Telerik team
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">
<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
Tags
Dock
Asked by
Vinay Kumar
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Share this question
or