Hi there, I have a repeater connected to a database, all good.
But I would like to change the color of the container as in the default one ( not published )
Otherwise the result is that all the boxes are yellow as the first one, see pictures here.
Thank you !
@insanittyskateboard The default container that is a part of a repeater cannot have a custom color applied to it in code. What you can do is add a box and drag it on top of the repeater item, sending the box behind the text and rating elements but keeping it above the built-in one. That kind of box can have code like the following applied to it. In this example, it sets the background color to the color value stored in a collection field called “background”.
export function repeater1_itemReady($item, itemData, index) {
$item("#box1").style.backgroundColor = itemData.background;
}
You can use this HTML Color Names reference to pick which colors to store for the various records in your collection. If you use the name of the color, put it in all lower case. The hexadecimal and RGB version can be used as well.
1 Like
Hi, and thank you.
But it doesn’t work, as soon as it’s inside the repeater, all the others gets the same color again.
Plus, I can’t see where to put the color in the code ?
Thanks tho
There’s a trick to it. The container that you drag onto the repeater needs to be attached to the item. When a little label appears on the repeater entitled “Attach to Item”, that’s when you drop it onto the repeater.
The field itemData.background stores the color in the above example. This is a literal color assignment:
exportfunction repeater1_itemReady($item, itemData, index){
$item("#box1").style.backgroundColor = "red";
}
Oh ok ok, got it… but then I won’t be able to use the repeater feature for the box then.
I’ll have to create a new one for each
You need only one box, but it needs to be correctly attached to the repeater so that it repeats, as mentioned above. It can be tricky. You need to drop it inside the repeater where there is no text element getting in the way.
I did that, the new box is attached to the repeater, but how can each boxes get different colors ? sorry im confused
Basically now the color does change, but for all the same
@insanittyskateboard The code example is above. Is there any logic governing what color box gets assigned to which testimonial? Or do you just want to assign randomly?
@tony-brunsman randomly is totally fine too, I thought using the dataset would do, but there is no option for colors, only images, just a bummer I would have to upload a square colored image for each testimonials
@insanittyskateboard Really, all you have to do is create a new field in the collection called “background”, key in various colors by name to that field in the different records, and use the code in the first example.
Good luck!
@tony-brunsman ahhhhhhhh ok ok , now that make sense, I’ll give it a go !
hi, me again…sorry.
What type of field should I chose ? and just type in color inside the field for each testimonials ?
This HTML Color Names reference has all of the allowable colors. Enter them in lower case into a text field.
@tony-brunsman yep got it, but what type of field ? there are so many
@insanittyskateboard Text