Colorize dhtmlxSidebar - sidebar

I have 2 dhtmlxSidebars like in a sample
here
How can I set a different background color to the nested one?
If I add css
.dhxsidebar_side {
background-color: # 427C9C !important;
}
it apply changes for both backgrounds…


In your case the main one will be first element [0] and nested - second [1]:
(i've set different blue colors)
document.getElementsByClassName("dhxsidebar_side")[0].style.backgroundColor = "#add8e6";
document.getElementsByClassName("dhxsidebar_side")[1].style.backgroundColor = "#d5f2fc";
Also you can apply simple and selected items bg color the next way:
.dhxsidebar_item {
background-color: #ffffff !important;
}
.dhxsidebar_item_selected {
background-color: #b5deff !important;
}

Related

How can I add border radius to the first and last elements with a specific class

I have a calendar and I'm using this library and I want to make sure these borders are filled in.
Tried something here but works only if I select both dates.
I want it to work in the hover state as well.
https://codepen.io/garine519/pen/XWVOePO?editors=1111
selected elements have .active class
items hovered within range have .hover-in-range class
when the end date is selected, .hover-in-range class turns into .in-range

You can try this.
.active:first-child {
border-radius: 50% 0 0 50%
}
.in-range:last-child {
border-radius: 0 50% 50% 0
}

You can get start active with:
td.cell:not(.in-range) + .active {
background: red;
}
and end active with:
td.cell.in-range + .active {
background: #2800ff;
}
I changed the background for example:

revealjs with Rmarkdown - setting fonts and drawing lines

I'm using the revealjs library in R to build a set of slides. I would like to:
customise font color
put a dotted border line that separates headers and footers
I've managed to set the colour of text that appears on a slide by adding the following into the CSS file:
#mycustom {
color: blue;
}
Then in the markdown document, I would use it loke so:
## Slide 2 {#mycustom}
XYZ
- a
- b
- c
This changes the colour of everything except for "Slide 2". I'd like to control the headers as well, and ideally I'd like to be able to set these colours in the CSS once.
As for my second issue, I've added the following to the CSS file:
.reveal .header {
padding: 1px;
border: 1px dashed orange;
}
Then I modified the revealjs template that can be found under <R_DIR/library/revealjs/rmarkdown/templates/revealjs_presentation/resources/default.html> and added <div class="header"></div> under <div class="slides"> but the result looks disappointing: I'm getting a small double dashed line as shown in the attached image.
If you have a suggestion on how to improve this, please let me know.
Many thanks!

As for your first problem, why not just use
<style>
#myCustom > h1, #myCustom > h2 {
color: #FF0000;
}
/* or if you want to change all h1: */
h1 {
color: #00FF00 !important;
}
</style>

ExtJS -- cell background color hides dirty flag

I have an editable grid. When a column is edited, I show the dirty flag and change the cells background-color. For this I have updated the CSS class:
.x-grid-dirty-cell {
background-image: url(../images/grid/dirty.gif) no-repeat 0 0 !important;
background-color:#ffff4d !important;
}
This works fine. However, when I change the background color for the whole row the dirty flag no longer shows:
,viewConfig: {
getRowClass: function(record_){
if(record_.COPIED){
return "row-highlight";
}
}
}
CSS:
.row-highlight .x-grid-cell{
background-color:#ffff4d !important;
}
So what attributes do I need to add to the row-highlight class so the dirty flag doesnt get hidden?
thanks

A couple of things
1 - background-image: url(../images/grid/dirty.gif) no-repeat 0 0 !important; is not a valid syntax, you are getting it confused with the background property.
2 - Do not add !important to .row-highlight .x-grid-cell this will make it impossible for less restrictive selectors to replace the cell background color.
Your CSS should look like
.row-highlight .x-grid-cell {
background-color: #ffff4d;
}
.x-grid-dirty-cell {
background: url(../images/grid/dirty.gif) no-repeat left center !important;
}
Check this fiddle: https://fiddle.sencha.com/#fiddle/1251
Edit the name "Bart" to see the dirty flag CSS

How do I change Foundation Zurb background?

I found out that html and body quote got basically a background:none.
How can i change that to apply a new background in one of my quote ?

For example, if you want a grey background for your body, put the following code :
body {
background-color: #CCCCCC !important;
}
The !important lets you override a property that has been defined in another CSS. In the case of Foundation, the background has probably been set before.
Hope that it will help you.

You have two background tags in both style sheets of Foundation 4:
Try to edit:
css/foudation.css
body {
background: white;
...
}
css/normalize.css
html{
background: #fff;
...
}

If using foundation with SASS add this to ./scss/app.scss :
body, html {
background-color: $white !important;
}
where $white - variable defined in ./scss/_settings.scss

primefaces datatable row coloring

I want to show datatable rows with different colors.
I am using rowStyleClass attribute.
But It is not changing the colors
My code in datatable is,
rowStyleClass="highlight";
and my css file is looks like this,
.highlight {
background: yellow !important ;
}

You should have like two classes with different colors and use, in the rowStyleClass attribute, inline if:
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
Where "rowIndex" you should set in the datatable rowIndexVar attribute
rowIndexVar="rowIndex"
That means that even rows will have row style class set as 'highlight1' and odd rows - 'highlight2'
See here more info

The easiest way is to implement .ui-datatable-odd and .ui-datatable-even style classes in your CSS, which are implemented by p:dataTable by default. Example:
.ui-datatable-odd {
background: #ffffff;
}
.ui-datatable-even {
background: #F2F5F9;
}
Ends up looking something like
It could be you need to use more specific selectors, read about css specificity for that

Try this...It is working in my case
.ui-widget-content .ui-datatable-even{
background: #F2F5F9;
}
.ui-widget-content .ui-datatable-odd{
background: red;
}

Tudor's answer is the correct way. In case you use treeTable you can do it this way:
.ui-treetable tbody tr:nth-child(odd) {
background-color: #edf2f6 !important;
}
.ui-treetable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}