Transparent grid on dashboard when editing

Hi!
I have built a dashboard solution in perspective where the user has the possibility to add a background image to the dashboard. These are used as line overviews and widgets need to be placed in the correct place in regards to the background image. The background image is set on the actuall dashboard component som i'm not using the image component. The problem is that when the dashboard is in "editing mode" the grid covers the image almost completely, except for the gutters, which makes it really hard to place widgets correctly. Is there a way to make the grid slightly transparent without making the image transparent? see image below.

You'll probably have to find the appropriate selector with browser dev tools, then customize it with the advanced stylesheet. @victordcq :slight_smile:

Place this rule in the stylesheet.css resource. You can tune the .5 value as needed to determine opacity.

div.grid-cell{
	background-color: rgb(216,216,216,.5);
}

5 Likes

i suggest using opactity instead of assigning a transparent color to support (dark/light) themes. Although i guess it shouldnt matter to much with the static background image

also .ia_dashboardComponent__cell instead of .grid-cell as the grid-cell class name seems to generic it might be used somewhere else idk

div.ia_dashboardComponent__cell{
	opacity: 50%;
}

this worked prefectly! Thank you!

1 Like