PDA

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



iansriley
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: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
Sep 05, 2014, 4:37 AM
I have read...

Can you link to where you read this?

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

http://docs.sencha.com/ext/5.0.0/apidocs/source/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
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:
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 (http://vimeo.com/10076549)