View Full Version : [CLOSED] Neptune Theme - Panel Frame Border Style

Sep 04, 2014, 7:00 PM
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:Viewport ID="Viewport1" runat="server">
<ext:Panel ID="Panel2" runat="server" Header="false" Title="" Border="false" Frame="true">
<ext:Parameter Name="margins" Value="5 0 5 0" Mode="Value" />
<ext:VBoxLayoutConfig Align="Center" />
<ext:TagLabel ID="TagLabel1" runat="server" Stacked="true" Width="180" MaxLength="100">
<ext:Tag Text="Calendar" Icon="Calendar" Style="padding-right: 25px !important; background-position: right 5px center !important;">

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;}

Sep 05, 2014, 4:37 AM
I have read...

Can you link to where you read this?

Sep 08, 2014, 6:23 PM
I found this when reading through some documentation here:


* 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.

Sep 09, 2014, 1:11 PM
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:

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 (http://vimeo.com/10076549)