How to set color hex code opacity in Bubble.io
In this Bubble tutorial video we share a quick color opacity trick at that came up in a Bubble Coaching call. Learn how you can make your hex code colors semi-transparent in this video.
Unlock the power of icons: Learn how to store and display Font Awesome icons in option sets with this quick Bubble trick!
Master hex code opacity: Discover how to create semi-transparent background colors using hex codes in your custom CSS for stunning Bubble designs.
Elevate your Bubble app's UI: Combine icon storage, option sets, and hex code opacity for a polished dashboard look.
Introduction to Dynamic Icons with Option Sets
In this Bubble tutorial video, I want to share with you a quick trick that I worked out with a Bubble coaching client a few days ago. This picks up from the last video we published, which was about Option sets and icons.
Storing Icons as Text Expressions
As a quick recap, what I'm doing here is storing an icon as an Expression. Let me show you. Here's my dashboard, and I'm storing an icon as a text expression. I've taken this from the Font Awesome version 3 version 4 library, in fact, and that allows me to store icons in option sets. You could, of course, store an image and use that as an icon or maybe an SVG, I'm not sure, but anyway, this is enabling me to use the Font Awesome library, which is the built-in icon pack in Bubble.
Using BBCode for Icon Display
I'm expressing it through a text Label element just like this by using the BBCode Square brackets FA close square brackets and then the text label for the icon. What I want to draw your attention to, though, is that I've got a color for the icon and then I've got a semi-transparent color or a reduced opacity color for the background color.
Using Hex Codes for Opacity
You can do that using hex codes. This is what I found out with the Bubble coaching client. Your hex code has got six digits to it, but you can add two more digits to the end, and that sets a transparency. I just searched for "hex opacity table" and found this guy's website. Effectively, if I want 20% opacity, I add 33 to the end.
Implementing Opacity in Bubble.io
That's allowed me in Data again, go on to dashboard. Here's my dashboard icon color, and here it is with 33 added to the end. I've gone through and I've done that on all of my colors, and that results in me having a design like this.
Conclusion and Call to Action
So, it's quite a niche aspect, quite a niche thing, but I thought this was quite a cool implementation of something that I covered in the previous video. If you like our previous videos, and if you like this one, please like and subscribe. Also, we've got even more videos than you can find anywhere else, not even on our YouTube channel. We have more videos at planetnocode.com. It's really well worth your time getting a membership there if you are learning Bubble and joining our no code Bubble app builder community there. If there's anything else you'd like to see done with option sets or icons, please leave a comment below and like.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
3 ways we support solopreneurs
Our team is here to help, with a combined 30+ years working for internet startips.
Learn Bubble
Explore our library of 300+ Bubble and no code tutorial videos. Watched by over 800k no coders on YouTube.
Bubble Coaching
Troubleshoot your Bubble app and build new no code features with our in house Bubble expert.
Mastery
Ready to take your SaaS idea to the next level? Join our exclusive Mastery program for personalised content & mentoring.