Support for custom CSS variables

Resolved Anonymous User 20238576
(@anonymized-20238576)

3 years, 9 months ago

Hello,

I create my own CSS variables for colors, fluid typography and fluid spacing.

Is there a chance that you guys could provide a support to enter css variables right into theme customizer options?

So for example, if I would like to change the body text color throughout the whole website, I can choose body text color and type var(–color-p-500) which would mean that the body text color would be a shade 500 of primary color set in my own custom css.

The same goes for CSS variables inside spacing and typography options.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Eduard
(@cteduard)

3 years, 9 months ago

Hello @tomanuel

Sure, I’ll try to note this down in our feature requests list, but I’m not entirely sure how much this will benefit users.

In the end, we do have global controls for pretty much everything, accessible via the customiser and outputted via variables on the front end. If you’d take a few minutes to analyse the DOM, you’ll see that everything is pretty ok structured and you can replace the variables very easily using just a little bit of CSS. 🙂

Thanks again for the suggestion!
Thread Starter Anonymous User 20238576
(@anonymized-20238576)

3 years, 9 months ago
but I’m not entirely sure how much this will benefit users.

As a web designer, I often find that I need more than 10 color shades for a given color. The naming convention is easy to understand and looks as follows:
- Primary color: var(--p)
- var(--p-50)
- var(--p-75)
- var(--p-100)
- etc..
So, I give various elements various color shades. Every color shade (for example var(--p-75) is a variant from primary color. If I change primary color, the color shades are adjusted automatically.

Therefore, I only need to change the color in one place and all the other color shades are adjusted automatically, if that makes sense.

This is the reason I would like to have ability to input my own CSS variables inside theme customizer.
- This reply was modified 3 years, 9 months ago by Anonymous User 20238576.
- This reply was modified 3 years, 9 months ago by Anonymous User 20238576.
Eduard
(@cteduard)

3 years, 9 months ago

Oh, thank you very much for the explanation. I have passed it along to our development team.

Thanks again!

Thread Starter Anonymous User 20238576
(@anonymized-20238576)

3 years, 9 months ago

Thank you too!

Eduard
(@cteduard)

3 years, 9 months ago

By the way, @tomanuel

I don’t know if you’ve seen this, but for adding additional colours we do have a filter implemented — https://creativethemes.com/blocksy/docs/code-snippets/add-custom-colours-to-the-gutenberg-editor/

Have you given this a try? I hope it will be able to help you out.

Thanks!
Thread Starter Anonymous User 20238576
(@anonymized-20238576)

3 years, 9 months ago
Yes I have seen this, but this would still mean that I have to change color for every color shade manually. The way I set my CSS variable for color shades is as follows:
```
:root {
	
     /* Defining a primary shade */
     --p-h: 345;
     --p-s: 73%;
     --p-l: 50%;
	
    /* Defining a primary shade shades */
    --p: hsl(var(--p-h), var(--p-s), var(--p-l));
    --p-25: hsl(var(--p-h), var(--p-s), 98%);
    --p-50: hsl(var(--p-h), var(--p-s), 95%);

}
```
So as you can see, the colors shades are generated automatically by adjusting the lightness (from HSL).
- This reply was modified 3 years, 9 months ago by Anonymous User 20238576.
- This reply was modified 3 years, 9 months ago by Anonymous User 20238576.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Support for custom CSS variables’ is closed to new replies.