Sep 30, 2022 1:41 AM - edited Sep 30, 2022 1:42 AM
I'm in the page editor, and am finding it very difficult to add a `background-image` at the same time as a `background-color` to my current section. My desired CSS output would look something like this:
background-image: url("path-to-image.svg");
background-color: #ff9900;
but the page editor only lets me choose either a color or an image, but not both.
How can I declare both color and image in the same section so it can be used with transparency?
I was looking at making my own custom section template, but when looking at the documentation, I see that it says:
Please note: you can only use one background parameter per dnd_section tag.
So how can I let my users customize `background-color` and `background-image` simultaneously? Surely it can't be too hard, it's practically trivial to do this via CSS. I must just not be finding it.
Solved! Go to Solution.
Sep 30, 2022 3:07 AM - edited Sep 30, 2022 3:08 AM
Hi @marquizzo,
in my opinion you got several ways you can go:
Here some examples
section module:
- add all of your wanted functions like rich-text, images ... as functions
- for the background add an image function in the top part or an background image in the style-tab in the right sidebar
Your HTML+Hubl section should look like this
{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
section.customSection.{{ name }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}
{# start module #}
<section class="customSection {{ name }}"> {# adding {{ name }} will add the modules name as class which will give you individual style settings per module if you're placing it several times on a single page #}
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
{{ module.rich_text }}
</div>
<div class="col-12 col-md-6">
<img src="{{ module.image.src }}" alt="{{ module.image.alt}}" class="customSectionImage">
</div>
</div>
</div>
</section>
{# end module #}
configuration module
basically the same as above with a small difference: If you want to have a bit more flexibility and use this module for several sections - you need only a simple text(not rich-text) for your given class
{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
.{{ module.css_class }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}
How to work with the configuration module?
When you set a class somewhere, you'll write it in the text element of the configuration module and it will apply the styling to this class
hope this helps
best,
Anton
Sep 30, 2022 6:01 AM
Hi @marquizzo,
What @Anton suggested sure works, but I also wanted to point out another way of doing this that we are currently using for our own website : using theme sections.
You can use hubl to create dnd sections and add a custom class to each of them.
Then simply create a css file and style your sections using regular CSS.
On the screenshot above, you can see a quite lengthy list of sections that we have predefined so our users can vary the flow of the pages.
Here's how adding a theme section to a page looks like :
One other cool thing you can do with this method is automatically style the content of your modules based on the background color by preceding all your relevant css selectors with the section custom classes you create.
You can find here a video showcasing moving modules around having the text color adjust to the section background color.
Hope this helps !
If it does, please consider marking this answer as a solution 🙂
Best,
Ludwig
![]() | CTO @ Mi4 Hubspot Platinum Partner and Integration Expert Passionate human, very curious about everything data and automation. Any problem with Hubspot you need help solving ? Let me know ! |
Sep 30, 2022 6:01 AM
Hi @marquizzo,
What @Anton suggested sure works, but I also wanted to point out another way of doing this that we are currently using for our own website : using theme sections.
You can use hubl to create dnd sections and add a custom class to each of them.
Then simply create a css file and style your sections using regular CSS.
On the screenshot above, you can see a quite lengthy list of sections that we have predefined so our users can vary the flow of the pages.
Here's how adding a theme section to a page looks like :
One other cool thing you can do with this method is automatically style the content of your modules based on the background color by preceding all your relevant css selectors with the section custom classes you create.
You can find here a video showcasing moving modules around having the text color adjust to the section background color.
Hope this helps !
If it does, please consider marking this answer as a solution 🙂
Best,
Ludwig
![]() | CTO @ Mi4 Hubspot Platinum Partner and Integration Expert Passionate human, very curious about everything data and automation. Any problem with Hubspot you need help solving ? Let me know ! |
Sep 30, 2022 3:07 AM - edited Sep 30, 2022 3:08 AM
Hi @marquizzo,
in my opinion you got several ways you can go:
Here some examples
section module:
- add all of your wanted functions like rich-text, images ... as functions
- for the background add an image function in the top part or an background image in the style-tab in the right sidebar
Your HTML+Hubl section should look like this
{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
section.customSection.{{ name }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}
{# start module #}
<section class="customSection {{ name }}"> {# adding {{ name }} will add the modules name as class which will give you individual style settings per module if you're placing it several times on a single page #}
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
{{ module.rich_text }}
</div>
<div class="col-12 col-md-6">
<img src="{{ module.image.src }}" alt="{{ module.image.alt}}" class="customSectionImage">
</div>
</div>
</div>
</section>
{# end module #}
configuration module
basically the same as above with a small difference: If you want to have a bit more flexibility and use this module for several sections - you need only a simple text(not rich-text) for your given class
{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
.{{ module.css_class }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}
How to work with the configuration module?
When you set a class somewhere, you'll write it in the text element of the configuration module and it will apply the styling to this class
hope this helps
best,
Anton
Sep 30, 2022 2:51 PM
Thank you for the thorough answer! I cannot believe that such a simple CSS rule needs such a complicated workaround in Hubspot.
Oct 29, 2022 4:45 PM
welcome to Hubspot! 🤣