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

How to remove template backcolor (gray)?

4 Answers 308 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
Runat="Server"
Top achievements
Rank 2
Runat="Server" asked on 03 Nov 2011, 02:20 PM

Hi,

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

What should I do?

Thanks.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 04 Nov 2011, 05:31 AM
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.
0
Runat="Server"
Top achievements
Rank 2
answered on 04 Nov 2011, 07:17 AM
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>
0
Kate
Telerik team
answered on 04 Nov 2011, 12:39 PM
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
0
Runat="Server"
Top achievements
Rank 2
answered on 04 Nov 2011, 12:54 PM
Fine!
Tags
ToolBar
Asked by
Runat="Server"
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Runat="Server"
Top achievements
Rank 2
Kate
Telerik team
Share this question
or