template grid : selected tile color

1
I am using template grid to show options to user for selection however when the user selects any option, the color which shows the tile is selected is very light and hard to distinguish from not selected tiles. is there any way this can be changed? I tried applying background color but that is only being applied to the top bar of template grid.
asked
2 answers
0

Yes because the background color was not actually applied to the template grid item. If you open the HTML source, you can see that what element actually represent the items of template grid. And when user clicks, a selected class is applied to that element. So you need to change CSS of that HTML element when it is selected i.e., it has selected class active on it. 
Below is an example that works for me: 

 

.mx-name-templateGrid1 .mx-grid-content .mx-templategrid-content-wrapper .mx-templategrid-row .mx-templategrid-item.selected {
    background-color: #000FFF;
}

Replace the templateGrid1 with name of your template grid widget. 
And replace color hex value with color of your choice

Just add the above css in your custom.css file. If not existing create a file custom.css under theme folder theme/styles/web/css/custom.css
And in theme/settings.json: make sure to include custom.css file in your cssFiles list
 

"cssFiles": [
        "styles/web/css/main.css",
        "styles/web/css/custom/custom.css"
    ]

 

answered
0

Please install Calypso from Mendix for styling. Set it up to monitor your projects folder.

Then add the following from the _variables.scss file in your theme folder, to your _custom_variables.scss file to change this the proper way and for all you grids at once:

// Background Colors 

$grid-bg-selected:                      [YOURHEXVALUEHERE]; // mix($grid-border-color, #FFF, 30%) !default;

$grid-bg-selected-hover:          [YOURHEXVALUEHERE]; //mix($grid-border-color, #FFF, 50%) !default;

Calypso will detect the changes and compile your CSS and redeploy your project.

Be sure to correct this one to if you choose a dark shade..

// Text Color

$grid-selected-color:                   $font-color-default !default;

answered