[CLOSED] Custom Colors

**rnachman** · Oct 01, 2012, 5:12 PM

How do we modify the colors of the buttons and tabs using CSS

**Daniil** · Oct 01, 2012, 5:44 PM

Hi @rnachman,

You can apply custom CSS rules to override the default ones.

**rnachman** · Oct 01, 2012, 6:06 PM

Originally Posted by Daniil

Hi @rnachman,

You can apply custom CSS rules to override the default ones.

Thanks -- Also I need to be able to add a custom fill color inside of the border around the button groups. Please provide sample Code / CSS to make this possible

Click image for larger version.

Name: 10-1-2012 1-21-33 PM.png
Views: 204
Size: 28.9 KB
ID: 4856

**geoffrey.mcgill** · Oct 01, 2012, 6:17 PM

Please post a very simplified .aspx code sample demonstrating how you currently have your custom CSS configured and applied to the component.

You can inspect the html and css applied to the components by using a tool such as Firefox + Firebug.

**rnachman** · Oct 04, 2012, 9:52 PM

Originally Posted by geoffrey.mcgill

Please post a very simplified .aspx code sample demonstrating how you currently have your custom CSS configured and applied to the component.

You can inspect the html and css applied to the components by using a tool such as Firefox + Firebug.

We are using the exact CSS that is currently used in your button grouping example. We have not changed anything. We need to know how to add a custom fill color inside of the border around the button/s - Please see attached

It would be appreciated if you could provide an example of how to accomplish this.

Click image for larger version.

Name: 10-4-2012 5-04-00 PM.jpg
Views: 171
Size: 49.8 KB
ID: 4890

**Daniil** · Oct 05, 2012, 4:53 AM

Please review this comment:

Originally Posted by geoffrey.mcgill

You can inspect the html and css applied to the components by using a tool such as Firefox + Firebug.

I think it needs to apply this CSS rule:

background-color: green;

It might be also required to hide the background image:

background-image: none;

**geoffrey.mcgill** · Oct 05, 2012, 6:20 AM

Maybe this can help, see

http://vimeo.com/10076549

The same technique can be applied to any elements that require css modification.

**rnachman** · Oct 06, 2012, 7:58 PM

Hi Geoffrey,

I have identified correct css for those group buttons and changed the background color while mouse out and mouse in, but I didn't find anything to change group button corners to change to show rounded corners. I have tried by implementing "background-image:none", but no use. Please check the css where I need to change.

Click image for larger version.

Name: ButtonGroupStyle.PNG
Views: 133
Size: 35.0 KB
ID: 4894

apsx page...


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/btnStyles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .my-toolbar .x-toolbar  .x-toolbar-ct
    {
        margin-top: 4px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="resMngr" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:Panel ID="pnlTops" runat="server" Height="37" Border="false" BodyStyle="background-color:#424E5A">
                <Items>
                    <ext:Toolbar ID="tb" runat="server" Cls="my-toolbar" Flat="true">
                        <Items>
                            <ext:ButtonGroup ID="buttonGrpColorTest" runat="server" Cls="my-group-button" OverCls="my-group-over-button">
                                <Items>
                                    <ext:Button ID="btnColorTest" runat="server" Text="Back Color Test" Icon="Accept" OverCls="my-over-btnStyle" ToggleGroup="tg1" EnableToggle="true" Pressed="true">
                                    </ext:Button>
                                </Items>
                            </ext:ButtonGroup>
                            <ext:ToolbarSeparator />
                            <ext:ButtonGroup ID="ButtonGroup1" runat="server">
                                <Items>
                                    <ext:Button ID="Button1" runat="server" Text="Test 2" ToggleGroup="tg1" EnableToggle="true">
                                    </ext:Button>
                                </Items>
                            </ext:ButtonGroup>
                            <ext:ToolbarFill />
                        </Items>
                    </ext:Toolbar>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

CSS for that file


.my-group-button .x-btn-group {
    padding:1px;
}

.my-group-button .x-btn-group-header {
    padding:2px;
    text-align:center;
}

.my-group-button .x-btn-group-tc {
	background: #FFFFCC repeat-x 0 0;
	overflow:hidden;
}

/*
.my-group-button .x-btn-group-tl {
	background: transparent no-repeat 0 0;
	padding-left:3px;
    zoom:1;
}

.my-group-button .x-btn-group-tr {
	background: transparent no-repeat right 0;
	zoom:1;
    padding-right:3px;
}
*/

.my-group-button .x-btn-group-bc {
	background: #FFFFCC repeat-x 0 bottom;
    zoom:1;
}

.my-group-button .x-btn-group-bc .x-panel-footer {
    zoom:1;
}

/*
.my-group-button .x-btn-group-bl {
	background: transparent no-repeat 0 bottom;
	padding-left:3px;
    zoom:1;
}

.my-group-button .x-btn-group-br {
	background: transparent no-repeat right bottom;
	padding-right:3px;
    zoom:1;
}

*/

.my-group-button .x-btn-group-mc {
    border:0 none;
    padding:1px 0 0 0;
    margin:0;
}

.my-group-button .x-btn-group-mc .x-btn-group-body {
    background-color:#FFFFCC;
    border: 0 none;
}

.my-group-button .x-btn-group-ml {
	background: #FFFFCC repeat-y 0 0;
	padding-left:3px;
    zoom:1;
}

.my-group-button .x-btn-group-mr {
	background: #FFFFCC repeat-y right 0;
	padding-right:3px;
    zoom:1;
}

.my-group-button .x-btn-group-bc .x-btn-group-footer {
    padding-bottom:6px;
}

.my-group-button .x-panel-nofooter .x-btn-group-bc {
	height:3px;
    font-size:0;
    line-height:0;
}

.my-group-button .x-btn-group-bwrap {
    overflow:hidden;
    zoom:1;
}

.my-group-button .x-btn-group-body {
    overflow:hidden;
    zoom:1;
}

.my-group-button .x-btn-group-notitle .x-btn-group-tc {
	background: transparent repeat-x 0 0;
	overflow:hidden;
    height:2px;
}


.my-group-button .x-btn-text {
    cursor:pointer;
	white-space: nowrap;
    padding:0;
    height:16px
}

.my-group-button .x-btn-icon .x-btn-text{
    background-position: center;
	background-repeat: no-repeat;
}

.my-group-button .x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
    background-position: 0 center;
	background-repeat: no-repeat;
    padding-left:18px;
    height:16px;
}

.my-group-button .x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
    background-position: center 0;
	background-repeat: no-repeat;
    padding-top:18px;
}

.my-group-button .x-btn-text-icon .x-btn-icon-small-right .x-btn-text{
    background-position: right center;
	background-repeat: no-repeat;
    padding-right:18px;
    height:16px;
}

.my-group-button .x-btn-text-icon .x-btn-icon-small-bottom .x-btn-text{
    background-position: center bottom;
	background-repeat: no-repeat;
    padding-bottom:18px;
}


.my-group-over-button .x-btn-group {
    padding:1px;
}

.my-group-over-button .x-btn-group-header {
    padding:2px;
    text-align:center;
}

.my-group-over-button .x-btn-group-tc {
	background: #333333 repeat-x 0 0;
	overflow:hidden;
}


.my-group-over-button .x-btn-group-tl 
{    
	background: #333333 no-repeat 0 0;
	padding-left:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-tr 
{
    
	background: #333333 no-repeat right 0;
	zoom:1;
    padding-right:3px;
}


.my-group-over-button .x-btn-group-bl {
	background: #333333 no-repeat 0 bottom;
	padding-left:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-br {
	background: #333333 no-repeat right bottom;
	padding-right:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-bc {
	background: #333333 repeat-x 0 bottom;
    zoom:1;
}

.my-group-over-button .x-btn-group-bc .x-panel-footer {
    zoom:1;
}

/*
.my-group-over-button .x-btn-group-bl {
	background: transparent no-repeat 0 bottom;
	padding-left:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-br {
	background: transparent no-repeat right bottom;
	padding-right:3px;
    zoom:1;
}

*/

.my-group-over-button .x-btn-group-mc {
    border:0 none;
    padding:1px 0 0 0;
    margin:0;
}

.my-group-over-button .x-btn-group-mc .x-btn-group-body {
    background-color:#333333;
    border: 0 none;
}

.my-group-over-button .x-btn-group-ml {
	background: #333333 repeat-y 0 0;
	padding-left:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-mr {
	background: #333333 repeat-y right 0;
	padding-right:3px;
    zoom:1;
}

.my-group-over-button .x-btn-group-bc .x-btn-group-footer {
    padding-bottom:6px;
}

.my-group-over-button .x-panel-nofooter .x-btn-group-bc {
	height:3px;
    font-size:0;
    line-height:0;
}

.my-group-over-button .x-btn-group-bwrap {
    overflow:hidden;
    zoom:1;
}

.my-group-over-button .x-btn-group-body {
    overflow:hidden;
    zoom:1;
}

.my-group-over-button .x-btn-group-notitle .x-btn-group-tc {
	background: transparent repeat-x 0 0;
	overflow:hidden;
    height:2px;
}


.my-group-over-button .x-btn-text {
    cursor:pointer;
	white-space: nowrap;
    padding:0;
    height:16px;
    color:white
}

.my-group-over-button .x-btn-icon .x-btn-text{
    background-position: center;
	background-repeat: no-repeat;
}

.my-group-over-button .x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
    background-position: 0 center;
	background-repeat: no-repeat;
    padding-left:18px;
    height:16px;
}

.my-group-over-button .x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
    background-position: center 0;
	background-repeat: no-repeat;
    padding-top:18px;
}

.my-group-over-button .x-btn-text-icon .x-btn-icon-small-right .x-btn-text{
    background-position: right center;
	background-repeat: no-repeat;
    padding-right:18px;
    height:16px;
}

.my-group-over-button .x-btn-text-icon .x-btn-icon-small-bottom .x-btn-text{
    background-position: center bottom;
	background-repeat: no-repeat;
    padding-bottom:18px;
}

.my-group-over-button .x-btn-over .x-btn-tl{
	background-position: -6px 0;
}

.my-group-over-button .x-btn-over .x-btn-tr{
	background-position: -9px 0;
}

.my-group-over-button .x-btn-over .x-btn-tc{
	background-position: 0 -9px;
}

.my-group-over-button .x-btn-over .x-btn-ml{
	background-position: -6px -24px;
}

.my-group-over-button .x-btn-over .x-btn-mr{
	background-position: -9px -24px;
}

.my-group-over-button .x-btn-over .x-btn-mc{
	background-position: 0 -2168px;
}

.my-group-over-button .x-btn-over .x-btn-bl{
	background-position: -6px -3px;
}

.my-group-over-button .x-btn-over .x-btn-br{
	background-position: -9px -3px;
}

.my-group-over-button .x-btn-over .x-btn-bc{
	background-position: 0 -18px;
}





.my-btnStyle .x-btn{
	cursor:pointer;
	white-space: nowrap;
}

.my-btnStyle .x-btn button{
    border:0 none;
    background-color:transparent;
    padding-left:3px;
    padding-right:3px;
    cursor:pointer;
    margin:0;
    overflow:visible;
    width:auto;
    -moz-outline:0 none;
    outline:0 none;
}

.my-btnStyle .x-btn-br{
	width:3px;
	height:3px;
	background:no-repeat -3px -3px;
}

.my-btnStyle .x-btn-bl{
	width:3px;
	height:3px;
	background:no-repeat 0 -3px;
}

.my-btnStyle .x-btn-tl{
	width:3px;
	height:3px;
	background:no-repeat 0 0;
}

.my-btnStyle .x-btn-tr{
	width:3px;
	height:3px;
	background:no-repeat -3px 0;
}


.my-over-btnStyle .x-btn-br{
	width:3px;
	height:3px;
	background:no-repeat -3px -3px;
	background-color:#333333
}

.my-over-btnStyle .x-btn-bl{
	width:3px;
	height:3px;
	background:no-repeat 0 -3px;
	background-color:#333333
}

.my-over-btnStyle .x-btn-tl{
	width:3px;
	height:3px;
	background:no-repeat 0 0;
	background-color:#333333
}

.my-over-btnStyle .x-btn-tr{
	width:3px;
	height:3px;
	background:no-repeat -3px 0;
	background-color:#333333
}

.my-over-btnStyle .x-btn-mr {
background-color: #333333;
background-image: none;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: -3px -24px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}

.my-over-btnStyle .x-btn-ml {
    width: 3px;
    background-color: #333333;
    background-image: none;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0px -24px;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

.my-over-btnStyle .x-btn-mc {
    background-color: #333333;
    background-image: none;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px -1096px;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    vertical-align: middle;
    text-align: center;
    padding: 0px 5px;
    cursor: pointer;
    white-space: nowrap;
}

.my-over-btnStyle .x-btn-bc 
{
    height: 3px;
    background-color: #333333;
    background-image: none;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px -15px;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

.my-over-btnStyle .x-btn-tc {
    height: 3px;    
    background-color: transparent;
    background-image: none;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0px -6px;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
}

Originally Posted by geoffrey.mcgill

Maybe this can help, see

http://vimeo.com/10076549

The same technique can be applied to any elements that require css modification.

**geoffrey.mcgill** · Oct 06, 2012, 8:28 PM

You're on the right path. To get the custom styles you want, you just have to investigate the structure of the html elements and play with the css. There's no other tricks.

**rnachman** · Oct 08, 2012, 8:40 PM

Originally Posted by geoffrey.mcgill

You're on the right path. To get the custom styles you want, you just have to investigate the structure of the html elements and play with the css. There's no other tricks.

So we finally figured out how to apply a custom color to the button group however the corners are not rounded the same on top versus bottom. See my attachment.

It does not look good in our application. Please let us know what we should do about this.

Thread: [CLOSED] Custom Colors

Thread Tools

Search Thread

Display

[CLOSED] Custom Colors

Similar Threads

[CLOSED] How to set button colors on toolbar

How to set the colors for ext.net Combobox to each items

ColorPalette custom colors

GridView with different row colors

GridPanel line colors

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Custom Colors

[CLOSED] Custom Colors

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us