I am using ActiveAdmin Flat Skin as template and I want to highlight some rows of the index page depending on an attribute of the row. The index page shows even odd rows displaying even rows with a light gray. Depending on this available attribute I want to display them with a light red.
I got the following partially working:
index row_class: ->elem { 'red' unless elem.available } do |dog|
In my active_admin.scss I have the following
.red {
background-color: #f7b9b9 !important;
}
But the rows that have the light gray are not being displayed in red. Any ideas?
Here is how it looks right now. The ones that say "[NO EN ADOPCION]" should all be in red.
Even if I inspect the element and add an inline style="background-color: red !important" the background does not change.
Try changing the css to:
tr.odd, tr.even {
&.red {
background-color: #f7b9b9 !important;
}
}
Related
I have currently uploaded a course image to go along with the description and the title of the course however the image while it is 720x380p is displaying as a very small image. I Don't understand why.
Image for reference
That's a theme issue. You can customize the size by modifying the CSS.
If you are using Boost theme go to Site administration > Appearance > Themes > Boost > Advanced settings
Then paste in the Raw initial SCSS box the following:
.coursebox {
.content {
.courseimage {
img {
max-width: 200px !important;
max-height: initial !important;
}
}
}
}
To customize the size, change the numeric value in the max-width: 200px !important;, above.
Note, you'll be modifying images for all courses.
Also, take into consideration all screen sizes to not break your theme.
Whats the best way to style the row selection of the primeng datatable grid? I have a checkbox and when selected the row changes to a bootstrap blue. I want to lighten the color for the row selection.
How do I do this?
I'm not sure if you found your answer anywhere, but the CSS you're looking for is this:
body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight {
/*background-color handles the color of the highlighted row*/
/*color sets the color of the text*/
background-color: #0275d8;
color: #ffffff;
border-color: #0267bf;}
And:
body .ui-datatable .ui-datatable-data tr.ui-datatable-odd.ui-state-highlight {
background-color: #0275d8;
color: #ffffff;
border-color: #0267bf;}
Just paste that in your own CSS file and you can change the highlight color, border color and text color. I'm not sure if it's the best way of doing it, but I was doing it like this last week and that's how I got it working.
I want to change the cell/row colors of an angular-ui-grid. From the documentation it seems I should use the cellClass for this. I want two colors for a striped look and another color for the currently selected row.
In my columnDefs I use a function to determine the proper cellClass. This works perfect on first load.
$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
if (row.isSelected)
return 'my-grid-cell-selected';
if ((rowRenderIndex % 2) == 0) {
return 'my-grid-cell1';
}
else {
return 'my-grid-cell2';
}
}
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
columnDefs: [
{ field: 'EventDate', cellClass: $scope.getCellClass },
...
]
};
I don't know, however, how to update the cellClass of all cells of the selected row.
I have the following code that I thought would update the selected row but nothing happens although I can see that it is called.
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function(row){
//??????
gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
});
};
Without my cellClasses the selected row gets colored differently.
Any idea how to achieve a customized color for the selected row?
Here's the way to do it with CSS:
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
color: #fff;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
outline: 0;
background-color: blue;
}
.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
color: #fff;
background-color: blue;
}
The best and easiest way to do this in my opinion is use the provided ui-grid customizer!
Specifically what you're looking for to change the background color for odd vs even rows is to change the #rowcoloreven and #rowcolorodd fields.
To change the color of the currently selected row, update in the customizer the #focusedcell property and in addition follow this tutorial and/or look at the second controller in this plunker to extend your selection from a single cell to the entire row.
I have also created a new plunker which shows how to implement row selection as well as how to change the row color defaults. Yes I know it's truly garish coloring - I thought it would help to really get the point across :). You can see in custom.css what is actually different from the uncustomized ui-grid css is
.ui-grid-row:nth-child(odd) .ui-grid-cell {
background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
background-color: #ff22ff;
}
.ui-grid-cell-focus {
outline: 0;
background-color: #b3c4c7;
}
If you need more direction let me know :)
I have added filterable: true for kendo ui grid. The grid is getting filtered correctly.
What I want is when the filter icon is clicked the filter icon should be filled with some different color or may be the color should be changed for filter icon inidcating that the column filter icon is clicked.
Please tell how to this.
In my case the following css did it, easy and simple.
.k-grid-filter.k-state-active {
background-color: #d2691e;
}
Some of the themes do this, but at least the Metro one doesn't, if that's the one you're using too.
(with LESS)
.k-grid {
/* Also changes the group row background color */
.k-grouping-row > td {
background-color: #c5c5c5;
}
.k-grid-header {
.k-grid-filter.k-state-active {
background-color: #7ea700; /* Default metro active color */
/* White icon */
.k-icon.k-filter {
background-position: -48px -80px;
}
}
}
}
I grab the kendo.metro.less file, stick that (plus a few others) at the end.
This is supported out-of-the-box. Take a closer look at the demos when you filter change the theme if needed. Or modify the CSS of a particular theme to make it more clearly visible.
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!