Develop Reference

Customizing css of Antd date picker

I am using antd library for date picker purposes.So far I was able to css the style the range part. but I am having some issues, can someone help?
I am getting this blue background between start , range and the end. I want that to be continous. (Image 1)
Also there is gap between selected rows, I want it to be purple itself. But here I see white between rows. (Image 1)
Is it possible to customize the range css, the dotted blue color when we do the range selection. Probably make that thing purple itself. (Image 2)
Also when I hover the range after the picker is closed and then opened, it should be purple. ( Image 3)
Help will be really really appreciated.
Sandbox: https://codesandbox.io/s/black-breeze-6gmz85?file=/src/styles.css
CSS
p.ant-picker-panels > *:first-child button.ant-picker-header-next-btn {
visibility: visible !important;
}
.ant-picker-panels > *:first-child button.ant-picker-header-super-next-btn {
visibility: visible !important;
}
.ant-picker-panel-container,
.ant-picker-footer {
width: 280px !important;
}
.ant-picker-footer-extra > div {
flex-wrap: wrap !important;
}
.ant-picker-active-bar {
display: none;
}
.ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner {
background-color: green !important;
border-top-left-radius: 32px !important;
border-bottom-left-radius: 32px !important;
}
.ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
background-color: green !important;
border-top-right-radius: 32px !important ;
border-bottom-right-radius: 32px !important;
}
.ant-picker-cell-in-view.ant-picker-cell-in-range::before {
background-color: purple;
}

For larger customisations you are possibly better served by creating a custom theme for the components - https://ant.design/docs/react/customize-theme
e.g.
import 'antd/dist/antd.variable.min.css';
import { ConfigProvider } from 'antd';
ConfigProvider.config({
theme: {
primaryColor: 'green',
},
});
If you take a look at https://ant.design/components/config-provider/
It gives all the possible options for the ConfigProvider

Removing a CSS rule that's applied to all elements

I have a problem with being unable to remove a rule that is applied to all elements. First of all, apologies but I could not upload a JSfiddle to this post - the page URL is: http://www.chessdroids.com/matches/long/test2.html
The problem is the CSS rule ‘* { text-align: center }’ is being used throughout the site and I cannot remove this, but it is making the chess board align incorrectly. Removing the rule works but destroys other areas of the site.
How can I remove this rule to the chess board only? I have tried using the not selector and canvas-board > * {display:none !important} but to no avail (note that I made the red canvas-board div wrap just to wrap the chess board). FYI I am using the canvas chess viewer: http://www.canvaschess.com/pgn_install.php.
Any help would be greatly appreciated here as I’m unsure how to fix this, thank you.

.canvaschesspgn .pgn_main_box {
text-align: left;
}

Change
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
outline: 0 none;
}
to
.chessboard {
border: 1px solid hsl(0, 0%, 33%);
display: block !important;
outline: 0 none;
}
So text-align does not apply only to the chessboard

try
.canvaschesspgn > * {
text-align: left;
}

If you want to reset anything you can use this
* {
text-align: unset;
}
that should do it, enjoy
and here are the css doc

ExtJS - How to customize buttons?

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'
}

Override a CSS Class

I have created a few classes in my javascript file that will be essentially referenced in the CSS file as "tr.Yes" "tr.No" and the new one "tr.override".
I want to override the values of tr.Yes and tr.No with tr.override due to a few added constraints in the JS file. Basically, how would I override them with tr.override that has a background of green?
Thanks guys.
My CSS so far looks as follows:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}

If you want the override class to override the yes and no classes define your overrideclass after the other ones in your CSS file and redefine the same rules with different values.
Like this
tr.Yes td.IndicatedDispatch {
background: red;
}
tr.Override td.IndicatedDispatch {
background: green; /* Redefine here*/
}

You can override CSS declarations by making them more specific. Go higher up the DOM.
tr.Yes td.IndicatedDispatch {
background: yellow;
}
becomes:
table tr.Yes td.IndicatedDispatch {
background: red;
}
Related article: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

If you're going to add the override class and leave the original classes, you create a combination rule like this:
tr.Yes td.IndicatedDispatch {
background: yellow;
}
tr.No td.IndicatedDispatch {
background: red;
}
tr.Yes.override td.IndicatedDispatch ,
tr.No.override td.IndicatedDispatch {
background: green;
}

CSS works from top to bottom, i.e selector1 css attributes will be overridden by selector1 css attributes defined at last(MORE SPECIFIC). For example
.myClass{
color: #000000;
}
/*
* Some other code
*
*/
.myClass{
color: #FFFFFF;
}
So at run time color:#FFF color will be picked up.

You could change your selectors to tr.Yes:not(.override) so that they do not take effect when the override class is in effect. Otherwise, both the tr.Yes and the tr.override styling will be merged, and anything from tr.Yes that is not overridden by tr.override will remain.

Change Textfield colour on focus ExtJs

I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You

You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}