Color module - usinig globally

Develop, Build & Integrate CMS Development
1

Hi,
I have a question about using the color module globally.
I created a module that currently collects 4 colors:

I would like to use this module globally and, depending on the template, use, for example, 2 colors from this module.
I have a templete page in other place and I would like to call a color from the global module:

Is it possible and how to do it?
Best regards,
Hanna

2

Hi @HPrzygoda,

technically you can do something like this - but you can’t put one module into another.

Therefore you have to implement all colors in every module.

If you want to try this you have to create an HTML file (not a module), set your variables and include this html file in the template/module.

I think a better approach would be your own custom theme or just a theme from the marketplace since themes give you exactly those functionalities.

Pro tipp:

You can do things like

{{ theme.colors.primary_color.color }}

in modules and templates.

Or just trigger CSS classes from a choice field to get the desired look like

<div class="card {{ module.css_class }}>
...
</div>

the coice field would look like this

Label Value
Red red
Green green
Blue blue

the theme-overwrite.css would look like this

.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}

.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}

.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}

or you can put it like this into the module HTML+Hubl area

{% require_css %}
<style>
.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}

.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}

.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}
</style>
{% end_require_css %}

or for a bit code saving like this

{% require_css %}
<style>
{% if module.css_class == "red" %}
.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}
{% elif module.css_class == "green" %}
.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}
{% elif module.css_class == "blue" %}
.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}
{% endif %}
</style>
{% end_require_css %}

hope this helps

best,

Anton