How do I customize a section background color along with background image?

[marquizzo]

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.

[Anton · Accepted solution]

Hi @marquizzo,

in my opinion you got several ways you can go:

1. Create your whole section/row as a custom module since this will give you better control over the settings. You'll lose the drag&drop functionality but you could create it very specific, what would make the life of your content creators easier since you can predefine everything in the module and they have to put the content into it. 
2. create a "configuration" module. By doing this you'll keep all the drag&drop functionality

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

[LMeert · Accepted solution]

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

[Anton · Accepted solution]

Hi @marquizzo,

in my opinion you got several ways you can go:

1. Create your whole section/row as a custom module since this will give you better control over the settings. You'll lose the drag&drop functionality but you could create it very specific, what would make the life of your content creators easier since you can predefine everything in the module and they have to put the content into it. 
2. create a "configuration" module. By doing this you'll keep all the drag&drop functionality

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

[marquizzo]

Thank you for the thorough answer! I cannot believe that such a simple CSS rule needs such a complicated workaround in Hubspot.

[squatchcreative]

welcome to Hubspot! 🤣