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.
Get the Complete Bundle for Just $99
Access 3 courses, 390+ tutorials, and a vibrant community to support every step of your app-building journey.
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 390+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
Save over 70%!
Valued at $80
Valued at $85
Valued at $30
Valued at $110
Valued at $45
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
We're here to help you launch your no code SaaS. Reach out to the team and we'll double check our vast library for useful content. We'll advise you on how we'd tackle the same problem and there's a good chance we'll record the video to help the wider community.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.