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
Related
Please I need an element on my page to slide-in automatically 3 seconds after page is opened, and then slide-out after user chooses their preferred choice from the dropdown menu (which is the Element). I want the slide-in/slide-out effect to be from the right-hand side of the page.
The dropdown menu particularly is the 'Google Translate Element', which I have styled to my desired appearance, and I want this to slide in 4 seconds upon page lunch and after user chooses desired language, it slides out.
Below is the code for the styled Element
/*google translate Dropdown */
#google_translate_element select{
background: rgba(246,237,253,0.92) !important;
border: none !important;
color: rgba(54,58,173) !important;
width: 115px !important;
border-radius: 5px !important;
padding: 5px 5px !important;
font-size: 11.8px !important;
position: absolute !important;
margin-top: 84px !important;
margin-left: 232px !important;
}
.vl {
position: absolute !important;
border-left: 3.7px solid green !important;
border-radius: 2px !important;
height: 30px !important;
margin-top: 67px !important;
margin-left:351px !important;
}
/*google translate link | logo */
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
display:none!important;
}
.goog-te-gadget{
color:transparent!important;
font-size:0;
}
/* google translate banner-frame */
.goog-te-banner-frame{
display:none !important;
}
#goog-gt-tt, .goog-te-balloon-frame{
display: none !important;
}
.goog-text-highlight {
background: none !important;
box-shadow: none !important;
}
<div id="google_translate_element"></div>
<div class="vl"></div>
To hide the element to the right you can:
Give it a css property right of less than zero and position absolute. This will hide the element to the right of the page. Be sure to make it position:absolute, and how much of it is hidden by the right property depends on the width of the element. If width is 2 px, don't set right to 50px, play with it till its correct.
To make it appear:
change it's right css property to 0 or more link, that will put it back on the page.
To make it appear after n seconds since the user selects an option:
put an event listener on every selectable element in the dropdown (either individually or from it's parent element), this would presumably be a onclick listener.
When the event is triggered, set a setTimeout function with JS (link) for whatever time you want to, with a callback to a function that updates the hidden element right property to more than 0, thus making it appear from the right
it would end up kind of like:
/*css*/
element {
right: -15px;
}
/*js to show after 4 seconds*/
const showElement = () => {
/*update css `right` property*/
}
let startTimeout = setTimeout(showElement(), 4000)
element.addEventListener('click', startTimeout())
I have a React component where I use a react datepicker input, and I have to set background-color for a react datepicker selected month in a different color, based on a condition. This is how the calendar looksenter image description here
I have to repeat this code multiple times but with a different background-color
background-color: red !important;
color: white !important;
}
.blue react-datepicker__month-text {
background-color: blue !important;
color: white !important;
}
.green react-datepicker__month-text {
background-color: green !important;
color: white !important;
}
Is it possible to set background -colour dynamically?
I have tried with
#function set-color($type) {
#if($type == 'type 1 '){
#return red ;
}
#if($type == 'type 2'){
#return green ;
}
}
#mixin dc($color) {
background-color: $color;
}
.react-datepicker__month-text {
#include dc($type);
color: white !important;
}
But then i don't know how to update $type value with a value from the component.
I'm using dygraphs on a dark background and can't seem to get the background on the legends/values to be transparent.
CSS I've tried:
.dygraph-legend {
background:none;
}
and
.dygraph-legend {
background-color: transparent;
}
I can't find a way to make this transparent.
Link to an image of the problem: here
dygraphs sets some inline styles on the legend <div>. To override them, you need to use !important:
.dygraph-legend {
background: transparent !important;
}
Add another div right after the dyGraphs div and tell the graph to use this div for labels and style the labels div with the !important annotation. E.g.:
CSS:
.dyStatsLegend {
color: silver !important;
background: rgba( 255, 255, 255, 0.1 ) !important;
}
HTML:
<div id="dyGraphHumTemp" class="dyStatsDiv"></div>
<div id="dyGraphHumTempLabels" class="dyStatsLegend"></div>
JavaScript:
var g1 = new Dygraph(
document.getElementById("dyGraphHumTemp"),
data,{
labelsDiv: 'dyGraphHumTempLabels'
});
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'
}
I am trying to use select2 on a webpage I am creating. However the combobox background seems to be transparent but I need to change it to another color. I tried modifying the select2.css file but nothing seems to work. Any Ideas ?
If you are trying to target the combo box wrapper use
.select2-search { background-color: #00f; }
If you are trying to target the input use
.select2-search input { background-color: #00f; }
And if you are trying to target the results wrapper use
.select2-results { background-color: #00f; }
Hope this helps!
It's a little late to help the OP, but I'll leave this answer in the hope it might help somebody.
I don't know about other versions, but using select2-rails 3.5.9.3 (which according to their github page means the version of select2 being used is 3.5) I was only able to change the background color as follows:
.select2-choice { background-color: #00f !important; }
The selector mentioned by Matthew for the results works, though.
Anyway, I didn't try it using "vanilla select2," so I don't know if there is any difference in this case.
For combo box
.select2-container--default .select2-selection--single{
background-color: #000;
}
For options search box
.select2-search--dropdown{
background-color: #000;
}
.select2-search__field{
background-color: #000;
}
and for options list
.select2-results {
background-color: #000;
}
A few more snippets below where I overrided the CSS in order to change the appearence of the Select2 dropdown select to suit my custom dark theme. (I'm using Bootstrap 5)
https://apalfrey.github.io/select2-bootstrap-5-theme/getting-started/basic-usage/
I accessed the non minified css file through the CDN to find what bits i needed to override and through trial and error, i came up with the below:
/* ------------------------------------- */
/* ---------- Select2 Library ---------- */
/* ------------------------------------- */
/* See https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-5-theme/1.2.0/select2-bootstrap-5-theme.css */
/* Change the appearence of the bakground colour surrounding the search input field */
.select2-search {
background-color: #343A40 !important;
}
/* Change the appearence of the search input field */
.select2-search input {
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the appearence of the search results container */
.select2-results {
background-color: #343A40 !important;
}
/* Change the appearence of the dropdown select container */
.select2-container--bootstrap-5 .select2-selection {
border-color: #6c757d !important;
color: #ffffff !important;
background-color: #343A40 !important;
}
/* Change the caret down arrow symbol to white */
.select2-container--bootstrap-5 .select2-selection--single {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
/* Change the color of the default selected item i.e. the first option */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
color: #ffffff !important;
}
Tested and worked for me with disabled Select2 4.1.0 :
.select2-container .select2-selection--single .select2-selection__rendered{
background-color: #fff;
}
.select2-container--default.select2-container--disabled .select2-selection--single{
background-color: #fff;
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
border: none;
}
.select2-selection
{
background-color: #f5f5f5 !important;
}