I want to override css style on bootstrap datetime picker control when selecting years from default blue to let's say red. How can I do that?
I tried with
.selectYear {
background-color:red!important;
}
but that doesn't work.
Update
I use
https://github.com/Eonasdan/bootstrap-datetimepicker/
It looks like 'selectYear' is a data attribute data-action="selectYear" and the class is 'year'
data-action="selectYear" class="year active"
The css is what's adding the background
.bootstrap-datetimepicker-widget table td span.active {
background-color: #337ab7;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
So either
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}
Or
.year {
background-color: red !important;
}
Hope this helps
I've searched in plugin code and I haven't found any class name like selectYear.
Assuming that you want to style only the year selector panel, try with the following css rule:
.bootstrap-datetimepicker-widget table td span.year.active {
background-color: red;
}
UPDATE:
Did not see an example. You use wring selector at all. .bootstrap-datetimepicker-widget table td span.active{background-color:red!important;}; selectYear - it`s a data action attribute value
Use
.ui-datepicker-year{
background-color: red;
}
Related
I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}
Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!
Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle
change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}
I'm currently using the Calendar Plugin (fullcalendar). I just couldn't find in its CSS file where I can customize the width/thickness of the eventBorderColor. Thanks!
Override the class .fc-event-inner:
.fc-event-inner {
border: 5px solid red;
}
Or you can use the 'className' option on your event objects and create that class. Be sure you add the !important property.
{
title : 'event01',
start : '2014-08-09',
className: 'moreBorder'
}
.moreBorder{
border: 5px solid red !important;
}
Seems like this should be an easy thing to do, but I'm not finding it. An ng-grid is zebra striped by default, how do I remove it?
Add this to your style to override the zebra css:
<style>
.ngRow.even {
background-color: rgb(255, 255, 255);
}
.ngRow.odd {
background-color: rgb(255, 255, 255);
}
</style>
This will make both rows white. Change it to whatever color you need.
If you are going to add the modifications in a stylesheet after the ngGrid stylesheet (ngGrid.css), you should do it this way for avoiding losing ngRow.selected class
.ngRow.even {
background-color: #ffffff;
}
.ngRow.odd {
background-color: #ffffff;
}
.ngRow.selected {
background-color: #BDD5FF;
}
It's much better to customize your theme and add:
odd-row-background-color: null
I want that some of my jquery dialogs, not all, have a different title bar color.
How can I acheive this?
I used the property dialogClass:"myClass" in desired dialogs but this doesen't change the title bar, just the dialog body.
Thank you!!
Specifying a dialogClass adds this class to the outermost div wrapping the entire dialog including the title bar, so you just have to make sure that you CSS rule is targeting the correct element. For instance:
.myDialogClass .ui-widget-header {
background: purple;
}
div.ui-widget-header {
border: 1px solid #3b678e;
background: #3b678e url("images/ui-bg_gloss-wave_35_3b678e_500x100.png") 50% 50% repeat-x;
color: #ffffff;
font-weight: bold;
}
You could do:
div#myDialog .ui-dialog-titlebar {
background-color: red;
}
The .ui-dialog-titlebar is what you are looking to apply your style to.