CMS Development

Stephanie-OG
Conseiller clé

How to use Opacity in the Custom Module Color Picker

Résolue

I was about to post this as a question as it took me a while to figure out (Smiley gêné).  Since I couldn't find any documentation I figure I'll share for anyone who might look for this in the future. 

 

EDIT: Opacity for a background element will apply to children as well so the below is great for text but not background colours... Any alternatives would be great!

 

EDIT NUMBER TWO: I've found the convert_rgb filter for HubL which answers my question: 

 

<div style="background: rgba({{ widget_data.my_color.color|convert_rgb }}, .5)"></div>

 

 

In custom modules you can use a "Color" field which allows users to pick a colour and opacity.

 

bgcolor.png

 

If this field is named background_color, for example, it gives you the following snippets: 

 

  • Colour: {{ module.background_colour.color }} with the output #c82929 
  • Opacity: {{ module.background_colour.opacity }} with the output 32

 

In CSS, opacity takes values from 0.0 - 1.0 so I wasn't sure how to fit in the "32" value (one it got to 0.100 it didn't like that at all) so I finally figured I could use calc and math to divide the number by 100. 

 

To use the above you can do the following:

 

.myClass {
 background-color: {{ module.background_colour.color }};
 opacity: calc({{ module.background_colour.opacity }} / 100);
}

And voilà!

 

Their own colour picker in a Rich Text module, for example, uses an RGBA output for opacity so it must work differently:

 

colorpicker.png

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation

Website | Contact

1 Solution acceptée
tjoyce
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to use Opacity in the Custom Module Color Picker

Résolue

@Stephanie-OG - I run into that dillema all the time, this is how I solve it - 

 

Instead of: 

<div class="wrapper">
  <div class="overlay">
    ..your content here
  </div>
</div>

I do this:

<div class="wrapper" style="position:relative">
  <div class="overlay" style="width:100%;height:100%;left:0;top:0;color:blue;opacity:0.5;"></div>
  <div class="my-content" style="width:100%;height:100%;left:0;top:0">
  ... my content here
  </div>  
</div>

Voir la solution dans l'envoi d'origine

0 Votes
8 Réponses
Jsum
Conseiller clé

How to use Opacity in the Custom Module Color Picker

Résolue
0 Votes
MrCapp
Contributeur

How to use Opacity in the Custom Module Color Picker

Résolue

I was stuggling with a similar issue and thanks to this post I ended up with a hybrid. I didn't want to add any code and wanted to change the background colour and have anoption for opacity. I found a way by combining a choice field with a number field.  Thought I would share in case someone else finds it helpful.

  • The choice field adds the hex code
  • Convert to hex to RGB
  • Set opacity to equal the number field
  • Number field maxes out @ 99

 

<div class="text-row-wrapper" style="background-color: rgba({{ module.bg_colour|convert_rgb }}, .{{ module.number_field }});">

colour.pngbg-opacity.pngScreen Shot 2019-03-05 at 2.57.03 PM.png

tjoyce
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to use Opacity in the Custom Module Color Picker

Résolue

@Stephanie-OG - Good find on the 'calc'!

I think these should work as well...

 

 
.myClass {     
      opacity: {{'0.'+bg if module.background_colour.opacity < 100 else '1'}};
      opacity: {{module.background_colour.opacity / 100}};
}

 

0 Votes
Stephanie-OG
Conseiller clé

How to use Opacity in the Custom Module Color Picker

Résolue

Thanks @tjoyce! Those both work too. The only problem now is that I want to use it for a background-color and using "opacity" dims the opacity for everything in my container (not just the background colour). 

 

So RGBA would be great... maybe it's an Ideas forum suggestion?

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation

Website | Contact

0 Votes
johnsardanas
Membre

How to use Opacity in the Custom Module Color Picker

Résolue

I know it's an old problem but here's what I did, I got the idea from calc CSS function that you used.

 

{% set opacity =  {{module.content_backround_color.color|convert_rgb }} / 100 %}


background-color: rgba({{module.content_backround_color.color|convert_rgb }}, {{opacity}});


0 Votes
tjoyce
Solution
Expert reconnu | Partenaire solutions Elite
Expert reconnu | Partenaire solutions Elite

How to use Opacity in the Custom Module Color Picker

Résolue

@Stephanie-OG - I run into that dillema all the time, this is how I solve it - 

 

Instead of: 

<div class="wrapper">
  <div class="overlay">
    ..your content here
  </div>
</div>

I do this:

<div class="wrapper" style="position:relative">
  <div class="overlay" style="width:100%;height:100%;left:0;top:0;color:blue;opacity:0.5;"></div>
  <div class="my-content" style="width:100%;height:100%;left:0;top:0">
  ... my content here
  </div>  
</div>
0 Votes
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

How to use Opacity in the Custom Module Color Picker

Résolue

not to ever contest @tjoyce, but you may need to add some z-index action to this and positions to the wrapper children 🙂

Stephanie-OG
Conseiller clé

How to use Opacity in the Custom Module Color Picker

Résolue

Thanks! 🙂

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation

Website | Contact

0 Votes