# Transparent grid on dashboard when editing

**URL:** <https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 14, 2024, 6:55am UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314 "2024-03-14T06:55:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jonathan\_Axelsson](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Jonathan\_Axelsson](https://forum.inductiveautomation.com/u/Jonathan_Axelsson)\
**Post date:** [March 14, 2024, 6:55am UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314/1 "2024-03-14T06:55:36Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/b/cbe9b5c22c298d84c9d3ca969e24ebb0ff3b8d48.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 15, 2024, 4:42pm UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314/2 "2024-03-15T16:42:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [March 15, 2024, 6:51pm UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314/3 "2024-03-15T18:51:28Z")

</div>

Place this rule in the [stylesheet.css resource](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet). You can tune the `.5` value as needed to determine opacity.

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

```

 ![Screenshot 2024-03-15 at 11.51.42 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5f8b2e24dfc6b61613b05c9c55c64c54622f9c0.jpeg)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 18, 2024, 7:53am UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314/4 "2024-03-18T07:53:25Z")

</div>

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

```auto
div.ia_dashboardComponent__cell{
	opacity: 50%;
}

```

---

<div class="post-metadata">

**Author:** ![Jonathan\_Axelsson](https://avatars.discourse-cdn.com/v4/letter/j/a698b9/32.png) [@Jonathan\_Axelsson](https://forum.inductiveautomation.com/u/Jonathan_Axelsson)\
**Post date:** [March 18, 2024, 8:40am UTC](https://forum.inductiveautomation.com/t/transparent-grid-on-dashboard-when-editing/87314/5 "2024-03-18T08:40:41Z")

</div>

this worked prefectly! Thank you!