Global Color in css using ID, but adding opacity

Support
#1

I know it is possible to use global colors in the css portion of a page or globally, by using twig {{global.color({id:“YOUR_ID”})}}; or dynamic content with {{dc:global:color id=“YOUR_ID”}}.

If my global color has full opacity, is there any way to add opacity to it in the css file? I know it is possible with the color picker, by selecting the color and then dragging the slider, but can it be done in css?

Thanks!

#2

Hi Jeff,

Thanks for reaching out.
If you are adding the color using Dynamic Content tag like {{dc:global:color id=“7KFC4ZsZ6FTmMDKLHx”}} this, and the CSS code looks like the following.

#ID {
    background-color: {{dc:global:color id="7KFC4ZsZ6FTmMDKLHx"}};
}

You can add the opacity just under the background-color attribute. And code will look like the following.

#ID {
    background-color: {{dc:global:color id="7KFC4ZsZ6FTmMDKLHx"}};
    opacity: <value>;
}

If that is not what you are trying to achieve, please explain a bit more for further assistance.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

#3

Thank you for the reply.

I would actually like to add the opacity or alpha to the color itself. If I add an opacity to the class it will make everything in that container and all its children opaque.

The best way to explain is with scss, you can define a color like so:

$color: #ff0000;

#ID{
  background-color: rgba($color, .5);
}

This keeps the defined color , but then adds alpha to it. If I later change $color, it will be updated in #ID as well.

I also noticed in cornerstone if I select a global color and use the alpha slider, it will keep the global color’s name and have the opacity value next to it. Then if I later change the global color, it will be changed with the alpha as well.

color-alpha

This leads me to believe that it may be possible in css as well, but am not sure.

Let me know if this is possible, or is something that maybe can be added in the future.

Thanks!

#4

Hi Jeff,

If you are adding the color with hex values, can’t be added in the rgba function. You need to pass the RGB value, like following:

$color: rgb(183, 229, 162);
#ID{
    background-color: rgba($color, .5);
}

Hope it helps.
Thanks

#5

Thank you, but I wanted to know how to do this in Cornerstone, which does not allow scss, so unfortunately the solution above will not work. I do believe you can use a hex value in scss though.

I figured out a way yo do it, if anyone else is interested.

  1. Enable Twig
  2. You need to define the global color in RGB as I don’t think the twig filter hex_to_css_rgb works.
  3. In Cornerstone css I define variables, but you can also just use the twig reference in the property:

Option 1

:root{
  --global-color: {{global.color({id:"YOUR_COLOR_ID"})|trim('rgb()') }};
}

.change-opacity-using-var{
  background-color: rgba(var(--global-color), .3);
}

Option 2

.change-opacity-using-inline{
  background-color: rgba({{global.color({id:"YOUR_COLOR_ID"})|trim('rgb()') }}, .3);
}

Twig was a great addition to the platform, thanks for a great product!

#6

Hi Jeff,

Glad that you are able to figure it out and share the solution with others.

Thanks