Changing a users chosen colour for text and borders

[mean02776]

Hey !
I just would like in a simple settings page on my site a user to pick there desired colour of their username for instance and for this to save to them, so it will remember on login.
Is a plugin the best solution for this?
I have a colour picker wheel but i cant figure out how to then save the colour to the unique user.
Im sorry if this seems really basic ive just hit a total brick wall here.

Any help would be very appreciated!

[peterjbrink]

Hey @mean02776

I think you will have to use some CSS to accomplish this, seeing as Bubble doesn’t allow us to set colours from dynamic variables. I am no CSS expert, but I did some experimenting and think I can solve your problem.

If you are just using this to display the colour of their username once-off, that should be fine, but if you are going to be using this colour for multiple text fields all over the place, I would consider creating a reusable component with the same implementation as I outline below.

So, first of all you will need to have a Colour text field on your user object in your database, and simply set that Colour text field to the hex value of the colour the user selects.

Then, when it comes to display the text field with that colour, this is where your CSS comes in.

First, make sure you have checked “Expose the option to add an ID attribute to HTML elements” in settings. You can find this in Settings → General → Scroll down to the bottom to Advanced Settings.

Next, add an ID Attribute to the text field in question. You can find this at the bottom of the appearance tab in the editor. It doesn’t really matter what you make this ID, something simple like “username-text” is fine.

Now, add an HTML element to the page. You can add it in anywhere and make it invisible so that it doesn’t affect your UI. Inside this HTML element, you need to paste the following:

<style>
div#username-text {
color: #0000FF!important;
}
</style>

You will not that the ID you put into your text field, ‘username-text’ is used here as well. If you used a different ID, be sure to change it in the code above too. I have set the colour in this example to blue, which has a hex value of #0000FF, but you of course will want to do this dynamically. So, instead of hardcoding in the colour hex value like I did, use the ‘insert dynamic data’ option in the editor to add your current user’s hex value from the database.

Hope this helps, and let me know if you have any questions!

[mean02776]

Thankyou so much! going to dive into this and see what i can do.
Ill keep you updated!

[Newed]

Like @peterjbrink said, you will need to give them the ability to select the desired color and save this in the database using a text field to save the HEX code.

But in fact you dont need custom CSS to perform this. You can use a dynamic expression in the element’s property that accept color (font color, background color, border, shadow, etc)… using that field stored in the database.

The only note here is that when you use a dynamic expression to these color properties, the color will not be visible at the editor level (because it is dynamic), so maybe because this some guys could think that this approach don’t worked.

[peterjbrink]

Wow, I totally overlooked that you can do that!

Well, you learn something new every day, and now @mean02776 you have two methods to implement this, although @Newed’s is much easier than mine!