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
    677 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top