How to change the color of a raddock titlebar

2 posts, 0 answers
  1. Vinay Kumar
    Vinay  Kumar avatar
    5 posts
    Member since:
    Apr 2010

    Posted 16 Jul 2010 Link to this post

    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!
  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 16 Jul 2010 Link to this post

    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
Back to Top