PDA

View Full Version : [CLOSED] CSS Class for "selected button"



rthiney
Oct 15, 2013, 8:55 PM
How can I change the color of a button that has been "tabbed" too...the difference is very hard to see, I'd like to make it more obvious...what CSS class can I add to override the existing?

Baidaly
Oct 15, 2013, 10:45 PM
Hello!

Try to use the following:



.x-btn-default-small-focus {
background-color: red !important;
background-image: none !important;
}

rthiney
Oct 16, 2013, 2:00 AM
Hello!

Try to use the following:



.x-btn-default-small-focus {
background-color: red !important;
background-image: none !important;
}


Thanks! That worked great. Now, what if the button is in a toolbar?
I tried
.x-btn-default-toolbar-small-focus { background-color: #6897c1 !important;
background-image: none !important;
}

but that doesn't seem to work?
Also, when I inspected the element I found: hidefocus="on" unselectable="on" ...could that be the reason when I try to tab too it it doesn't show it when focued?



<a class="x-btn x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left x-over x-btn-over x-btn-default-toolbar-small-over" role="button" hidefocus="on" unselectable="on" tabindex="0" id="ContentPlaceHolder1_btnAdd" style="right: auto; left: 0px; top: 0px; margin: 0px;"><span id="ContentPlaceHolder1_btnAdd-btnWrap" class="x-btn-wrap" unselectable="on"><span id="ContentPlaceHolder1_btnAdd-btnEl" class="x-btn-button"><span id="ContentPlaceHolder1_btnAdd-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Add New Metric</span><span role="img" id="ContentPlaceHolder1_btnAdd-btnIconEl" class="x-btn-icon-el icon-add " unselectable="on" style="">&nbsp;</span></span></span></a>

rthiney
Oct 16, 2013, 2:22 AM
Thanks! That worked great. Now, what if the button is in a toolbar?
I tried
.x-btn-default-toolbar-small-focus { background-color: #6897c1 !important;
background-image: none !important;
}

but that doesn't seem to work?
Also, when I inspected the element I found: hidefocus="on" unselectable="on" ...could that be the reason when I try to tab too it it doesn't show it when focued?



<a class="x-btn x-unselectable x-btn-toolbar x-box-item x-toolbar-item x-btn-default-toolbar-small x-icon-text-left x-btn-icon-text-left x-btn-default-toolbar-small-icon-text-left x-over x-btn-over x-btn-default-toolbar-small-over" role="button" hidefocus="on" unselectable="on" tabindex="0" id="ContentPlaceHolder1_btnAdd" style="right: auto; left: 0px; top: 0px; margin: 0px;"><span id="ContentPlaceHolder1_btnAdd-btnWrap" class="x-btn-wrap" unselectable="on"><span id="ContentPlaceHolder1_btnAdd-btnEl" class="x-btn-button"><span id="ContentPlaceHolder1_btnAdd-btnInnerEl" class="x-btn-inner x-btn-inner-center" unselectable="on">Add New Metric</span><span role="img" id="ContentPlaceHolder1_btnAdd-btnIconEl" class="x-btn-icon-el icon-add " unselectable="on" style="">&nbsp;</span></span></span></a>




Needed to set ClassicButtonStyle in the toolbar. All set.

Daniil
Oct 16, 2013, 4:33 AM
Please clarify do you need any assistance more in this thread?