Stratos Template - CSS Variables - var() Function - Forum | JoomShaper
Staff replied SP Page Builder

Stratos Template - CSS Variables - var() Function

Asked by Hans 1 year ago Last activity 1 year ago

The Stratos template uses CSS Variables declared in template.css:

--gradient-color-1: #ff00fb;

--gradient-color-2: #802bff}

How can I change the values of these variables in user.css without changing template.css?

I managed to change the color values at a specific location without any problems by using user.css.

However, these color values occur in many different places. I would therefore like to change the value of the variable itself so that I can change all occurring color values with a single entry in user.css.

How can I manage this?

5 replies

Oldest first Newest first Most helpful
Ziaul Kabir Staff
1 year ago

Hello,

Thanks for reaching out to us.

Please, check screenshot, You need to do that via custom code -> css. Change your code here.

:root {
    --gradient-color-1: #60b00b;
    --gradient-color-2: #802bff;
}

Thanks

Hans Asked this
1 year ago

Thanks a lot. That works.

Ziaul Kabir Staff
1 year ago

It’s great to hear that your issue has been resolved.
If everything is working fine now, please mark the question as complete by accepting any of our answers.

Thank you!

Hans Asked this
1 year ago

Yes, this problem has been solved.

But there is a side effect. After adding this code, the color of the text of one menu item changes from color in a gradient. See this post:

https://www.joomshaper.com/forum/question/41707

Not yet resolved.

There still seem to be a couple of (hopefully) minor issues with this template.

Ziaul Kabir Staff
1 year ago

Please, follow the regarding post and wait for our agent response.

Best regards,

Log in to reply.