How to change container color based on tag


I’m trying to learn how to construct the code required to change the background colour on a container within a repeater depending on the tag that has been assigned to it.

I am currently connecting the repeater using the standard wix connector so not sure if I will need to build the repeater completely using code to make this work.

I understand that I need to create variable so for example, if the tag = “headline” the background colour = “pink” and then apply it to the container element but i’m not sure how to phrase it.

Can someone help please?

Thank you!

Yes you will have to CODE all of it. I don’t think you will be able to do that without any code.

In this example you will see how to do it with → onMouseOver-event

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#myRepeater").onItemReady( ($item, itemData, index) => {
        $item("#TITLE").text = itemData.title;

        $item("#CONTAINER").onMouseIn ((event) => {
            $item('#BOX').style.backgroundColor = "rgb(155,155,155)";

        $item("#CONTAINER").onMouseOut ((event) => {
            $item('#BOX').style.backgroundColor = "rgb(255,255,255)";

You will have to change the code by your own needs, but you already have some basic code :wink:

Thanks for getting back to me but I think I explained what i want to do badly.

I have a collection that is for concerts, each concert has been tagged with a specific type, I want to assign a colour to each of the tags without having to manually type in the colour option. Does that make sense?

Can you give me a screenshot, so i can imagine better what you have in front of your eyes? Yes i can imagine the Concerts-DB and probably you will have a “tags-collection-field” in your DB, right? Where do you have your colors stored?

You better should just show your DATABASE (screenshot), that would do my thinking much easier.

@russian-dima Hi, I haven’t got the database fully set up yet as I’m trying to work out how to achieve what I am trying to do/there are a lot more elements to it including reference fields etc that I haven’t sorted yet. But I will have a tag field to specify genre of concert.

Do I need to create another DB with the colours stored and attached to the tags or can I put it in as a piece of code on the specific page that I need it.

I thought it might be something like

if item.genre = [Jazz] {
$item ( ‘#BOX’ ). style . backgroundColor = “#00000” ;

and then repeat that for the different genres…

Would that work?

You can do both ways. The hard-coded one (which will not be so flexible) or use a database for colors (which would be more comfortable on my opinion).

Yes this could work, but you will have to modify/correct the code.

if item.genre = [Jazz] {
$item('#BOX').style.backgroundColor = "#00000";

Perhaps this can help you too…

You can do it without any code.
Check my website → go to catagories
just added some fast data to 2 databases.

Kind regards,

Thanks for the reply, I’m confused as to how you achieved that. Please can you explain some more? Thank you.

Go check again, i added some information under it.

@volkaertskristof Thank you. I think that will help. :slight_smile:

No problem,
Let me know if you need more help with it.

Btw, the collours are images made with paint :stuck_out_tongue:

1 Like