Is there a way to have a dynamic color for shapes or text in the same way the dynamic calendar event color works where we specify a dedicated text field with the hex #?
Not yet, but you can use conditional formatting for this.
Thanks. Would really love to be able to save hex codes in the database rather than on an element’s conditional (I have over 50), but you’re right this does work.
2 Likes
Here is an example. Note: This is a complete hack / workaround that probably goes against the very nature of Bubble and No-coding. I would only recommend trying this if you are familiar with HTML, Web Dev Tools, etc. Also, only use this to replace single elements without any embedded elements (the background color of a text element, for example). It won’t work for changing the background of a group which contains other elements in it, in other words. Use this hack at your own peril.
Example: I have the following colors in my system, let’s say
I want to show those in a repeating group:
Like so:
Except I want the colors to show up:
So I inspect with Chrome:
And I’m trying to copy the snippet that contains the least amount of HTML for this (the Text element and):
Need to copy that snippet
Now I delete my text element that I had there before and put in an HTML element and paste the snippet into it’s content:
Now use dynamic content to replace the background-color value (be careful not to delete the semicolon - just replace rgb(123,123,123). Also, notice we replaced the string content (the second blue value)
This gives us:
5 Likes
Hey guys – any progress on this? Making appearance dynamic is important for me and really opens up another category of application possible on Bubble – builders/editors. For example, I plan on offering a customer-facing page where they can customize the look of their application. However, with the conditional styles approach, you’re essentially limited to creating a a set of pre-configured templates that they can choose from .
Initially, colors, position, and size of elements would be great to make dynamic and would open up a lot of possibilities.
1 Like
We have implemented limited “branding” of pages by allowing users to upload images of their brand colours (essentially just squares of colour) which are then used on buttons etc as “dynamic image” rather than colours.
With some brand images, and wording, it is a fair step in the right direction.
As a note, using the “default” colour option on the button isn’t great with this option (we kept it white) as it tends to flash up the default colour before changing the image. If you think you might not able to load a dynamic image, it is best to trap this and set a default image, rather than rely on the default colour.
1 Like