Develop Reference

change standard background color

I have a calendar on my site where the user can select a time range. I'm using the react-advanced-datetimerange-picker library for this, but I'm changing the library's default styles and ran into a problem.
I would like to change the background color in the box that I marked with a red arrow in the photo below. I also took a screenshot of the developer panel so you can see the styles and markup.
It seems like an easy task, but I've tried many options with no success.
What do I need to write in my .css file so that I can change the background color?
https://codesandbox.io/s/hopeful-khorana-gbjuiz

Simply change the background from #FFFFFF to any color you want!
There are many methods to achieve that
As seen in the screenshot
The input has a class inputDate
First Method
**
Assuming u want to set the background color to orange.
.inputDate{
background: Orange;
}
Another method:
You can use inline styling by adding style="background: orange" to the input
<input style="background: orange" class="inputDate"..... />

WpDataTables conditional formatting

I'm trying to find a solution for this conditional formatting.
When the "INSTALLED" column is "YES" I wish cell "HARD DISK" turns green.
Some idea?
Thanks so much!
Example without conditional formatting:
Example with conditional formatting:

To get an idea how conditional formatting is implemented I suggest looking into assets/js/wpdatatables/wpdatatables.js
Basically it's not quite easy - that's a hint on what you would need to do:
Hook into either .draw() or .row() callback of the wpDataTables.table_1.api() object on the page (in an inline script or in a separate .js file):
Check for the value of the third column (yes/no);
Apply a CSS class for the second column based on the yes/no value (e.g. "green" or "red";
Add CSS rules for ".green" and ".red" classes - setting the background-color to red and to green.

A probable solution is to apply a row CSS rule if the value installed is yes and then a cell CSS rule if HD is not empty.
Then in CSS you could find an easy workaround.
.row-yourclass .cell-yourclass2 {
background-color: green;
}

Styling span textnode without styling child nodes

So I'm creating a theme plugin for a forum where users often enter text with custom coloring. This is implemented as an inline style on a span.
The forum by default has a dark color scheme so most of the text is light. If I create a theme with a light color scheme this text would be hard to see.
I thought of using a CSS5 color filter that targets text with inline colors:
.Comment span[style^=color] {
filter: hue-rotate(180deg) invert(100%);
-webkit-filter: hue-rotate(180deg) invert(100%);
}
By inverting and rotating the color spectrum this turns a light blue color into a dark blue and light red into dark red, preserving the hue but making it darker. This actually works but it has the side effect of also inverting the colors of images and other elements embedded in the text.
I thought of doing another color inversion on child elements but this leaves images looking like junk since apparently hue-rotate is not very accurate at all.
A solution would be to have the CSS only target the text node of the span and not any child elements but that does not seem possible? Unless I'm missing something I don't see any selectors for text nodes.
Is there something I can do in jQuery to perform this color inversion? I'd rather not have to destroy all the coloring on the page as that would upset the users.

this Solution only goes lighter does not solve the problem:
I mis-read the question... I tried to delete this because it did not solve the problem for light backgrounds but it still appeared.
This can be accomplished by making use of rgba
Tested and works:
$(window).load(function() {
var col = $('.Comment').css('color').replace(')', ', 0.20)').replace('rgb', 'rgba');
$('.Comment').css('color', col);
});
var col converts rgb to rgba allowing for color percentage

Here's a solution that uses the javascript library tinycolor. A pure CSS solution would be much preferred but it doesn't seem possible.
$.getScript('https://rawgit.com/bgrins/TinyColor/master/tinycolor.js').done( function() {
$('.Comment span[style^=color]').each(function() {
var color = tinycolor($(this).css('color')).toHsl();
color.l = 1 - color.l;
$(this).css({'color': tinycolor(color).toRgbString()});
});
});

Basic JavaScript Issue: Targeting a Specific Div in DOM and Changing Properties

I am not great with JavaScript, and I am thinking this is a fairly easy answer.
Link to project:
http://dl.dropbox.com/u/4132989/example02/example02/index.html
What I'm trying to do:
Make the draggable cell turn red, and the text turn white, when it's dropped to it's correct location.
When I drag the green or orange cell to their correct locations, I have inserted this as a test to make sure I am able to target only when the drag is correct.
document.body.style.background="red"
If you look at the code, on drop, the border changes on the cell from solid, to dotted. What I am trying to do is be able to change any property on drop. I want to make the background of the cell red on drop and I'd like the text to turn white. I tried this:
REDIPS.drag.style.background="red"
However, this did not work and it made everything non-draggable.
To download the code use this link:
http://dl.dropbox.com/u/4132989/example02.zip
Thanks in advance for any help.
*Oh, the change I made is in the file redips-drag-min.js

You're close, but the object you really want to change is rd.target_cell, the cell that just received the drop action. Add the following inside the if (rd.target_cell.className ... conditional (line 31 of script.js):
rd.target_cell.style.background= 'red';

Change background color on elements with the same color

I'm trying to create a simple theme system here. I have few elements with red background color. I also have a button that will change the elements background color to green.
I'm trying to code but I couldn't figure out how can I select and change the bg color of all red elements to green!
For example, I have 4 divs. Two of these have a red header, and when I click the button these headers background color must be changed to green. It's Ok here, but the problem is that the divs are dynamically generated, so do I have do loop all the page to find the red bg color? Could someone enlight me? =)
Thanks a lot! =)

I think the best solution would be to use different stylesheet for each theme and keep the current theme value in SESSION or COOKIE or just pass it as URL argument. But that would be a server side solution.
On Client side, you can just use different classes for each theme and toggle them on the button push event using .toggleClass()
$('.green').toggleClass('red green');

The easiest way to do this would be to have a specific CSS class for each background color you're using. ex:
.color-red{ background-color: #FF0000; }
.color-green{ background-color: #00FF00; }
Once you do that you can select on the CSS class as well as set the CSS class:
$('#button-togreen').click(function(){
$('.color-red').removeClass('color-red').addClass('color-green');
}
It's kind of a round-about way of doing it, however there is no easy way to select on a CSS attribute (to do that you'd have to select all elements of the page and then check each one of them for the background color attribute which would be scarily inefficient...)

I don't know what you mean by headers, but I think this should do what you want:
$('.myDivs').filter(function(index){
return $(this).css('color') == 'red';
}).css('color', 'green');