# Change the font/text color in a repeater or in a text element **URL:** \ **Category:** Ask the community\ **Tags:** question, code, wix-studio\ **Created:** [March 6, 2024, 6:33am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965 "2024-03-06T06:33:10Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 6, 2024, 6:33am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/1 "2024-03-06T06:33:10Z")
**Question:** I am looking for a code or guide to change the font/text color in a repeater. Or even in a text element. **Product:** Wix Studio Editor **What are you trying to achieve:** ![002](https://us1.discourse-cdn.com/wix/original/3X/2/6/26e52d68b95aa3ac7ced3e2c5cccc7fde852b9a8.png) **Additional information:** ---
**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\ **Post date:** [March 7, 2024, 7:26pm UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/2 "2024-03-07T19:26:45Z")
You can set custom HTML and styling of a Text element with: [html - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/text/html) ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:01am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/3 "2024-03-08T01:01:45Z")
Thanks Anthony! But if it have a condition of: if Status = Completed, it will turn to Dark Gray if Status = Ongoing, it is Green else = Light Gray I also use a repeater. ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:05am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/4 "2024-03-08T01:05:16Z")
```javascript import wixData from 'wix-data'; $w.onReady(function () { $w("#repeaterRemarks").onItemReady( ($w, itemData, index) => { if (itemData.availability === "Complete") { let value = $w("#textRemarks").text; $w("#textRemarks").html = "

" + value + "

"; } if (itemData.availability === "Ongoing") { let value = $w("#textRemarks").text; $w("#textRemarks").html = "

" + value + "

"; } else { let value = $w("#textRemarks").text; $w("#textRemarks").html = "

" + value + "

"; } } ); wixData.query("REMARKS") .find() .then( (results) => { let repeaterData = results.items $w("#repeaterRemarks").data = repeaterData } ); } ); ``` here is the code I tried ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:07am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/5 "2024-03-08T01:07:00Z")
![0308_output](https://us1.discourse-cdn.com/wix/original/3X/e/6/e6ae3ed4d79a3c210aaa083ba01d2b7a244af362.png) this is the output from the code above, but the “ongoing and -” didn’t turn to gray. ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:10am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/6 "2024-03-08T01:10:45Z")
![#repeaterStatus](https://us1.discourse-cdn.com/wix/original/3X/5/0/5017784c7e0b562354abd6103a265cdcc0029121.png) #repeaterStatus #textStatus ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:11am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/7 "2024-03-08T01:11:31Z")
![#repeaterTransactDT](https://us1.discourse-cdn.com/wix/original/3X/b/6/b6faf89f9237c80dcaea39aa9a44cd251cc0034b.png) #repeaterTransactDT #textTdat ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 1:12am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/8 "2024-03-08T01:12:07Z")
![#repeaterRemarks](https://us1.discourse-cdn.com/wix/original/3X/d/1/d1825fbf9167e7d57ed8b0861391895e9c6f8689.png) #repeaterRemarks #textRemarks ---
**Author:** ![Dan\_Suhr](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dan_suhr/32/94074_2.png) [@Dan\_Suhr](https://forum.wixstudio.com/u/Dan_Suhr)\ **Post date:** [March 8, 2024, 4:02am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/9 "2024-03-08T04:02:20Z")
I have used the below code before for something similar. It may work for you if adjusted. Please replace ‘status’ and ‘repeatedText’ with the actual field name and ID of your text element in the repeater, respectively ```javascript $w.onReady(function () { $w("#myRepeater").onItemReady(($item, itemData, index) => { let status = itemData.status; // assuming 'status' is the field name in your data let textColor; switch(status) { case 'Completed': textColor = 'DarkGray'; break; case 'Ongoing': textColor = 'Green'; break; default: textColor = 'LightGray'; } $item("#repeatedText").style.color = textColor; // assuming 'repeatedText' is the ID of your text element }); }); ``` ---
**Author:** ![Aplus\_Pack\_Web\_Manag](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aplus_pack_web_manag/32/89252_2.png) [@Aplus\_Pack\_Web\_Manag](https://forum.wixstudio.com/u/Aplus_Pack_Web_Manag)\ **Post date:** [March 8, 2024, 5:06am UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/10 "2024-03-08T05:06:20Z")
thank you I will try this one. ---
**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\ **Post date:** [March 8, 2024, 3:51pm UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/11 "2024-03-08T15:51:38Z")
Is the green text the default or already set in the UI? And if that’s the case is the field `itemData.availability` correct? And is “availability” a string and not some other type? I don’t really see anything incorrect with the code itself. One minor nit would be that `.onItemReady( ($w` should be something like `.onItemReady( ($item` to avoid confusion with the global `$w` but it shouldn’t be causing any actual issues with JS’s scope. ---
**Author:** ![codequeen](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/codequeen/32/88960_2.png) [@codequeen](https://forum.wixstudio.com/u/codequeen)\ **Post date:** [March 8, 2024, 3:54pm UTC](https://forum.wixstudio.com/t/change-the-font-text-color-in-a-repeater-or-in-a-text-element/56965/12 "2024-03-08T15:54:26Z")
It’s because in your code you used $w instead of $item (since it is in a repeater). So all of the text will turn the same color vs the individual item.