How to get data from the customizer to the css?

Retired Boards Appdev Partners Discussion
1

It’s becoming a trend I need to capture a piece of data from a custom customizer section, like color, and use that in the CSS files.

How do I pass the data from a section schema to css?

2

@BWid55 May this help you. Click Here.

1 Like
3

Thank you, but the css I am trying to apply cannot be applied through the html. I am trying to access background-color on an ::after pseudo class in a css file - so I need to pass a color to that file.

I see references in the css file to items not in the css file - so I know it’s possible - but I don’t know how.

4

Hi @BWid55 ,

I am not sure if I really understand your request. You would like to pass a color for example to the section but using this color to apply to the pseudo element. You can use var(). You can read the MDN documentation here.

See the code for reference. You use the “–” before the name of your variable as you can see in the --custom-color.

The –custom-color does not apply directly to the section but save it as a variable for later use.


{% schema %}
    {
        "name": "Section Name",
        "settings": [
            {
                "type": "color",
                "id": "custom_color",
                "label": "Custom Color",
                "default": "#E20437"
            }
        ]
    }
{% endschema %}

To call the variable in your CSS

.mySection::after {
content: '';
color: var(--custom-color);
}
1 Like
5

I think that’s what I’m looking for. I need be be able to create and define a variable through liquid section (through the customizer schema) and then reference that variable in a separate, unrelated file (the css file).

6

Hi @BWid55 ,

Oh yes. You use the HTML style in the div to input the variable that you get from the color schema.

style="--custom-color: {{ section.settings.custom_color}}"
1 Like
7

That’s awesome - thank you!

1 Like