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'
});
Related
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
i have accourdion panel and i want to change arrow color in accourdion .
i write this in this css but it not work :
.mat-expansion-panel {
.mat-expansion-indicator {
.mat-expansion-indicator::after{
color:red !important;
border-color: rgb(0, 0, 0) !important;
}
}
}
How can i change color of arrow ????
You have to use ::ng-deep along with material class to override default style.
:host ::ng-deep .mat-expansion-indicator::after {
color:red !important;
border-color: rgb(0, 0, 0) !important
}
Example
I'm trying to achieve the following effect:
I have a div with a background-image and a semi-transparent white background-color on top of it which acts as a filter.
Now, I want to add divs and some text which would basically "bypass" the filter so they are fully transparent. Is there a way to do this in css, or perhaps in Javascript or whatever?
I am using Bootstrap and jQuery, I'm also open to any libraries you might know that could help me here.
Edit:
Here's a fiddle I just made: https://jsfiddle.net/frbkLuoe/
html:
<div class="container">
<div class="filter">
<div class="transparent-block"></div>
</div>
</div>
css:
.container {
width:300px;
height:300px;
background-image:url(http://4.bp.blogspot.com/-RSAdi3NMMs8/VakWj_znRcI/AAAAAAAAAMI/lp19iktRyCw/s1600/Rent%2Broom%2Bstockholm.jpg);
background-size:cover;
}
.filter {
width:100%;
height:100%;
background-color:rgba(255, 255, 255, 0.7);
}
.transparent-block {
width:100px;
height:100px;
background-color:transparent;
}
I want the .transparent-block div to be transparent. The problem is it inherits the background of its parent, so even if I set background-color:transparent; or background:none; it's still semi-transparent white.
Try background-color CSS property, for semi transparent try rgba (red, green, blue, alfa)
.transparent{
background-color: transparent; //transparent
}
.semi-transparent{
background-color: rgba(255, 255, 255, 0.5); //semi-transparent white
}
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;
}