Is there a way to format the colour of a card when you have a list in gallery view?

%3CLINGO-SUB%20id%3D%22lingo-sub-2965274%22%20slang%3D%22en-US%22%3EIs%20there%20a%20way%20to%20format%20the%20colour%20of%20a%20card%20when%20you%20have%20a%20list%20in%20gallery%20view%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2965274%22%20slang%3D%22en-US%22%3E%3CP%3EI%20currently%20have%20my%20COSHH%20list%20set%20so%20that%20when%20an%20item%20is%20overdue%20the%20item%20is%20highlighted%20in%20red.%20When%20you%20move%20over%20to%20the%20galley%20view%20it%20loses%20this%20format%20and%20on%20would%20logically%20assume%20that%20the%20card%20will%20be%20highlighted%20in%20the%20same%20way.%20Is%20there%20a%20feature%20that%20does%20this%20already%20or%20should%20it%20be%20submitted%20as%20an%20idea%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2965274%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EMicrosoft%20Lists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2969591%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20format%20the%20colour%20of%20a%20card%20when%20you%20have%20a%20list%20in%20gallery%20view%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2969591%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1120094%22%20target%3D%22_blank%22%3E%40LukeJSmith%3C%2FA%3E%26nbsp%3BYou%20can%20color%20the%20tiles%20in%20gallery%20view%20using%20JSON%20view%20formatting.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20need%20to%20add%20%3CSTRONG%3Ebackground-color%26nbsp%3B%3C%2FSTRONG%3Estyle%20to%20your%20tile%20(div%20element).%20Example%3A%26nbsp%3B%3CA%20title%3D%22techan_k%20twitter%20post%22%20href%3D%22https%3A%2F%2Ftwitter.com%2Ftechan_k%2Fstatus%2F1457664410042785802%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Etechan_k%20twitter%20post%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EDocumentation%3C%2FSTRONG%3E%3A%26nbsp%3B%3CA%20title%3D%22Gallery%20layout%20customizations%22%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fview-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EGallery%20layout%20customizations%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3CP%3EPlease%20click%26nbsp%3B%3CSTRONG%3EMark%20as%20Best%20Response%3C%2FSTRONG%3E%26nbsp%3B%26amp%3B%20%3CSTRONG%3ELike%3C%2FSTRONG%3E%20if%20my%20post%20helped%20you%20to%20solve%20your%20issue.%20This%20will%20help%20others%20to%20find%20the%20correct%20solution%20easily.%20It%20also%20closes%20the%20item.%20If%20the%20post%20was%20useful%20in%20other%20ways%2C%20please%20consider%20giving%20it%20%3CSTRONG%3ELike%3C%2FSTRONG%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

I currently have my COSHH list set so that when an item is overdue the item is highlighted in red. When you move over to the galley view it loses this format and on would logically assume that the card will be highlighted in the same way. Is there a feature that does this already or should it be submitted as an idea?

 

Thanks,

2 Replies

@LukeJSmith You can color the tiles in gallery view using JSON view formatting.

 

You need to add background-color style to your tile (div element). Example: techan_k twitter post 

 

DocumentationGallery layout customizations 


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

@ganeshsanap so currently this is how the background of the card is handled.. 

 

"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-black sp-card-borderHighlight sp-card-subContainer"
 
How would i go about changing this to red when the due date is passed