[CLOSED] Neptune Theme - Panel Frame Border Style

[iansriley]

Hi, I am using the neptune theme and I am trying to get rounded corners around a panel. In the default theme, I was able to set frame="true" and that would set rounded corners. In the Neptune theme, when I do this the border is way too big (~6px). How can I change that to a smaller border with rounded corners?

<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Neptune">
    </ext:ResourceManager>    
    <ext:Viewport ID="Viewport1" runat="server">        
        <Items>
            <ext:Panel ID="Panel2" runat="server" Header="false" Title="" Border="false" Frame="true">
                <Defaults>
                    <ext:Parameter Name="margins" Value="5 0 5 0" Mode="Value" />
                </Defaults>
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Center" />
                </LayoutConfig>
                <Items>
                    <ext:TagLabel ID="TagLabel1" runat="server" Stacked="true" Width="180" MaxLength="100">
                        <Tags>
                            <ext:Tag Text="Calendar" Icon="Calendar" Style="padding-right: 25px !important; background-position: right 5px center !important;">
                            </ext:Tag>
                        </Tags>
                    </ext:TagLabel>
                </Items>
            </ext:Panel>                       
        </Items>
    </ext:Viewport>

I have read that this can be done by using frame="false" and Cls="x-box" and trying to change those styles, but I have no idea what I would change:

<style type="text/css">        
        .x-box-tl{background:transparent url(../images/default/box/corners.gif) no-repeat 0 0;zoom:1;}
        .x-box-tc{height:8px;background:transparent url(../images/default/box/tb.gif) repeat-x 0 0;overflow:hidden;}
        .x-box-tr{background:transparent url(../images/default/box/corners.gif) no-repeat right -8px;}
        .x-box-ml{background:transparent url(../images/default/box/l.gif) repeat-y 0;padding-left:4px;overflow:hidden;zoom:1;}
        .x-box-mc{background:#eee url(../images/default/box/tb.gif) repeat-x 0 -16px;padding:4px 10px;font-family:"Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;color:#393939;font-size:12px;}
        .x-box-mc h3{font-size:14px;font-weight:bold;margin:0 0 4px 0;zoom:1;}
        .x-box-mr{background:transparent url(../images/default/box/r.gif) repeat-y right;padding-right:4px;overflow:hidden;}
        .x-box-bl{background:transparent url(../images/default/box/corners.gif) no-repeat 0 -16px;zoom:1;}
        .x-box-bc{background:transparent url(../images/default/box/tb.gif) repeat-x 0 -8px;height:8px;overflow:hidden;}
        .x-box-br{background:transparent url(../images/default/box/corners.gif) no-repeat right -24px;}
        .x-box-tl,.x-box-bl{padding-left:8px;overflow:hidden;}
        .x-box-tr,.x-box-br{padding-right:8px;overflow:hidden;}
    </style>

[geoffrey.mcgill]

I have read...

Can you link to where you read this?

[iansriley]

I found this when reading through some documentation here:

http://docs.sencha.com/ext/5.0.0/api.../Element3.html

        /**
         * Wraps the specified element with a special 9 element markup/CSS block that renders by default as
         * a gray container with a gradient background, rounded corners and a 4-way shadow.
         *
         * This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
         * {@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}).
         * The markup is of this form:
         *
         *     <div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
         *     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
         *     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>
         *
         * Example usage:
         *
         *     // Basic box wrap
         *     Ext.get("foo").boxWrap();
         *
         *     // You can also add a custom class and use CSS inheritance rules to customize the box look.
         *     // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
         *     // for how to create a custom box wrap style.
         *     Ext.get("foo").boxWrap().addCls("x-box-blue");
         *
         * @param {String} [class='x-box'] A base CSS class to apply to the containing wrapper element.
         * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
         * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
         * @return {Ext.dom.Element} The outermost wrapping element of the created box structure.
         */

[Daniil]

Ext.NET v2 is based on ExtJS 4.

The latest Ext.NET v2 is based on ExtJS 4.2.1. So, you should rely on this documentation:
http://docs.sencha.com/extjs/4.2.1/

Though, as for your requirement, I would recommend to inspect HTML elements and find CSS rules which are responsible for the thickness of the borders, then override it.

This video demonstrates the technique which I am talking about.
CSS Change TabPanel Header Color - Ext.NET on Vimeo