# Add to CSS Variables

**URL:** <https://forum.pinegrow.com/t/add-to-css-variables/5535>\
**Category:** Styling (CSS)\
**Tags:** css\
**Created:** [August 10, 2021, 9:27pm UTC](https://forum.pinegrow.com/t/add-to-css-variables/5535 "2021-08-10T21:27:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonroc](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jonroc/32/2805_2.png) [@jonroc](https://forum.pinegrow.com/u/jonroc)\
**Post date:** [August 10, 2021, 9:27pm UTC](https://forum.pinegrow.com/t/add-to-css-variables/5535/1 "2021-08-10T21:27:22Z")

</div>

Hello, how do I add to the new CSS Variables available in the new exclamation point UX button?:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/67860ebd9b8f1d3fc4c2e44434d6a3d6231d499b.png)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 11, 2021, 9:15am UTC](https://forum.pinegrow.com/t/add-to-css-variables/5535/2 "2021-08-11T09:15:55Z")

</div>

Hi @jonroc,  
The CSS variables item in the new exclamation point context menu is for accessing any variables defined in your stylesheets. So, I believe the list that you are seeing is coming from a modified Bootstrap project. To add additional items to the list you need to place any new variables onto your stylesheet with the code editor. For example:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6f3fbc61882fd00b42ae4ce4e925363f9ee6237b.png)  
With the code editor I added a new variable to the `:root` element. Now it is available to select in the context menu.  
Hope this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![BonoBoos](https://avatars.discourse-cdn.com/v4/letter/b/b77776/32.png) [@BonoBoos](https://forum.pinegrow.com/u/BonoBoos)\
**Post date:** [September 1, 2021, 7:39pm UTC](https://forum.pinegrow.com/t/add-to-css-variables/5535/3 "2021-09-01T19:39:32Z")

</div>

> [@RobM](#):
>
> new exclamation point context menu

Quick question: what is this exlemation context menu you’re talking about? And where/how do I access this feature? I googled it, couldn’t find anything

---

<div class="post-metadata">

**Author:** ![jonroc](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jonroc/32/2805_2.png) [@jonroc](https://forum.pinegrow.com/u/jonroc)\
**Post date:** [September 1, 2021, 8:05pm UTC](https://forum.pinegrow.com/t/add-to-css-variables/5535/4 "2021-09-01T20:05:34Z")

</div>

Hi, it’s in the newer version of PG in the CSS style UI on the far right of each element.

 ![0087](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b773433a4c99d4e6457b316dc635732aa1ff8964.jpeg)

I was confused b/c I was adding SCSS variables but for the custom colors to show up you have to add CSS variables.