How to remove template backcolor (gray)?

5 posts, 0 answers
  1. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 03 Nov 2011 Link to this post

    Hi,

    I need to get a transparent background for the template items (Container & Page) and delete the border.

    What should I do?

    Thanks.

  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Nov 2011 Link to this post

    Hello,

    Try the following CSS.
    aspx:
    <telerik:RadToolBarButton Text="click" runat="server" CssClass="template"  >
    </telerik:RadToolBarButton>

    CSS:
    <style type="text/css">
     .template
     {
        background-color: Transparent !important;
     }
      div.RadToolBar_Default .rtbOuter
     {
        border: none !important;
     }
    </style>

    Thanks,
    Princy.
  5. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 04 Nov 2011 Link to this post

    Hi,

    Does not work! Trouble! The following is my code:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
     
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
         
    </script>
    <head runat="server">
        <title></title>
        <style type="text/css">
            .template
            {
                background-color: Transparent !important;
            }
            div.RadToolBar_Default .rtbOuter
            {
                border: none !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadToolBar ID="RadToolBar1" runat="server" Skin="Office2007" EnableRoundedCorners="true"
            EnableShadows="true" Width="100%">
            <Items>
                <telerik:RadToolBarButton runat="server" Text="First Button" />
                <telerik:RadToolBarButton runat="server" CssClass="template">
                    <ItemTemplate>
                        <telerik:RadMenu ID="RadMenu1" runat="server">
                            <Items>
                                <telerik:RadMenuItem Text="Second Button" CssClass="template">
                                    <Items>
                                        <telerik:RadMenuItem Text="gggg">
                                            <Items>
                                                <telerik:RadMenuItem Text="aaaa" />
                                            </Items>
                                        </telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenu>
                    </ItemTemplate>
                </telerik:RadToolBarButton>
            </Items>
        </telerik:RadToolBar>
        </form>
    </body>
    </html>
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Nov 2011 Link to this post

    Hello Arie,

    To remove the image that is applied to the button you can use the following css class selectors:
    div.RadMenu_Default .rmRootGroup
    {
        background-color: transparent;
        border: 0px solid #828282;
    }
     
    div.RadMenu_Default .rmRootGroup,
    div.RadMenu_Default a.rmLink,
    div.RadMenu_Default .rmGroup .rmText,
    div.RadMenu_Default .rmVertical .rmText,
    div.RadMenu_Default .rmLeftArrow,
    div.RadMenu_Default .rmRightArrow,
    div.RadMenu_Default .rmTopArrow,
    div.RadMenu_Default .rmBottomArrow
    {
        background-image: none;
    }

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Runat="Server"
    Runat="Server" avatar
    14 posts
    Member since:
    Feb 2010

    Posted 04 Nov 2011 Link to this post

    Fine!
Back to Top