[CLOSED] How to stylize Context menu?

[vadym.f]

Hi,

I'm trying to change the background of the Context Menu object such that the vertical divider disappears and the look of the background will be close to that of a Panel or Window. Could you please suggest the correct CSS class to tweak it?

    <ext:Menu ID="RowContextMenu" runat="server" LabelWidth="60" Cls="transparent-context-menu">
        <Items>
            <ext:ComboBox ID="ComboBox1" runat="server" FieldLabel="Reason"></ext:ComboBox>
            <ext:MenuItem runat="server" ID="MenuItem1" Icon="UserDelete" Text="Delete User...">
            </ext:MenuItem>
        </Items>
    </ext:Menu>

.transparent-context-menu .x-menu .x-menu-floating .x-layer
{
    background: transparent !important;
}

[geoffrey.mcgill]

The following video demonstrates a general technique of using Firefox + Firebug for inspecting the elements and all css styles applied to those elements.

http://vimeo.com/10076549

The same technique can be applied to any component.

Hope this helps.

[vadym.f]

Hi Geoffrey,

Thanks for providing the video link. I've been basically doing a similar style detection exercise with IE9 and F12 Developer Tool. The aspect I've often found challenging is the usage of style related properties, i.e. Cls, CtCls, ItemCls, etc. on the various objects and their child objects. To make things more complicated, sometimes it would even take an injection of client side code to have the right style applied.
In the video, it seems like a basic case of overriding is covered, which may not necessarily be applicable in the real application. Is there any general idea what Style properties one should use and under what circumstances?

[Baidaly]

Hello!

You can solve your problem using ShowSeparator="False"

<ext:Menu ID="RowContextMenu" runat="server" LabelWidth="60" Cls="transparent-context-menu" ShowSeparator="False">

Or you can set the following CSS:

.transparent-context-menu  {
	background-position: -27px;
}

[vadym.f]

Thanks for the suggestions! The CSS class works, either as

.transparent-context-menu  {
    background-position: -27px;
}

or

.transparent-context-menu  {
    background-image: none;
}

Setting ShowSeparator="False" seemingly has no effect on the appearance in this context. Please mark this thread as closed.