PDA

View Full Version : Custom appearance for Buttons and Menus



ranajyotic
29 Nov 2013, 9:18 AM
I am trying to give a custom appearance to some of the buttons and menus similar to the toolbar that you have in this site on the top. I am trying to use baseCls and overCls for this purpose. baseCls is working for buttons, but not for menu or menu items and overCls is not working for anything. What am I doing wrong. Below is the CSS


.button-url .x-btn-inner {
background:transparent;
border:none;
color: blue;
text-decoration:underline;
}
.x-toolbar-app {
border-color: black;
border-width: 1px;
background-color: black;
}
.x-button-tb {
background:black;
border:none;
color:white;
font-size:18px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
text-align:center;
}


.x-button-tb-over {
background:rgb(20,20,250,0.5);
border:none;
color:white;
font-size:18px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
text-align:center;
}


.x-menu-tb {
background:rgb(0,0,0);
}


.x-menu-item-tb .x-menu-list-item-active {
background:rgba(0,0,0);
color:white;
font-size:18px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
text-align:center;
}




.x-button-tb-login {
background:black;
border:solid 1px black;
color:white;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
}
.x-window-app {
background-color:white;
background-image:none;
border:solid 1px black;
font-family:Verdana, Geneva, sans-serif;
}

existdissolve
29 Nov 2013, 9:50 PM
Do you have a live demo or a screenshot of what's not working? Without seeing it in action or at least seeing a screenshot of what you'd like to have happen (and what's not happening), it's difficult to suggest specific fixes for your styles.

ranajyotic
17 Dec 2013, 6:52 AM
To update, I finally found out it is near impossible, if not impossible to customize an ExtJS button. It is way easier to use Img and add a click listener to it.

antarctica77
7 Feb 2014, 11:00 AM
http://www.sencha.com/forum/showthread.php?139537-Button-text-styling