How to change the colour of an object using Data?

Ask the community
, ,
1

Hey!

Is it possible to change the colour of an item like a box, button or background of a strip to a colour code that’s stored in the database?

So an item named colourBox has a value of #FFFFFF. So on that particular dynamic page, the box needs to be displayed white. But on another dynamic page, the value is #000000 so it needs to be displayed in black. Is this possible?

Thanks in advance!

2

Hi Quin,

You can change any element that has the style API like buttons, you can change their properties like this:

$w('#button').style.foregroundColor = "#FFFFFF";
$w('#button').style.backgroundColor = "#FFFFFF";
$w('#button').style.color = "#00000";

If the element doesn’t have the style API, you still probably can change them by using the .html. like any html element elsewhere.

3

Hey, thanks for your response.

Actually this is not what I meant. I’ll give you an example of what I am trying to accomplish.

So, in a database, there’s an item named ColorBox1. In row one, the value of this item is by example #ff0000 (red). On the dynamic page of row one, I want the box to appear red. And on row two the value is #00ff00 (green). So on the dynamic page of the second row, I want the same box to appear green.

I hope this is a clear explanation.

4

Hi Quin, you can do it directly without code, just click on the element that you want to apply the background to (Not all of them are supported), then click on the database icon from the appeared toolbar, click on the background and connect it to a dataset.

5

Hi Quin, how did you solve this? Same boat here.

6

Hi Rakesh,

Using Velo you can retrieve the data from the collection and translate it to the style attribute of the box.

$w("#myRepeater").onItemReady( ($item, itemData, index) => {
  $item("#myRepeatedBox").style.backgroundColor = itemData.textField;
} );

In green the id of the repeater, in blue the id of the box, and in orange the id of the field in the collection holding the color value.

I hope I informed you enough to solve your problem. If not, don’t hesitate to ask me for more help.

Have a great day!

7

d

8

Hello everyone, is it possible to change just one tittle colour from the menu? currently it is possible change only all elements but could I change just one using code? I’ll leave a screenshot to make it clear. thanks

1268×1716 101 KB

9

Hello everyone, is it possible to change just one tittle colour from the menu? currently it is possible change only all elements but could I change just one using code? I’ll leave a screenshot to make it clear. thanks

1268×1716 101 KB

10

@mantasgdesign Unfortunately, this isn’t possible. You can make your custom menu using buttons and change then the button color.

11

@mantasgdesign Unfortunately, this isn’t possible. You can make your custom menu using buttons and change then the button color.

12

Thank you very much

13

hey, I have another issue. I need to place a button and navigation on the left side of my page, however as i noticed that is not possible as element should be in middle grid area. is there a way to work around it? thanks

1630×1518 235 KB

14

@mantasgdesign Wix doesn’t have a function to care about the tablet breakpoint. If you want a fully responsive website you can use Editor X. But in Wix this is not possible.

15

thank you

16

how do i find the id of the field in the collection, Quin