Change SharePoint List Gallery Button Color By URL

Question

I have a SharePoint list in gallery view that has links to different web pages. This list view is on each page of the navigation for training. I'd like to color code the buttons according to what page the user is on to visually indicate where they are, like a "you are here" type of navigation.

So, as an example if the user clicks the "Introduction" button in the list, it goes to Introduction.aspx and the button is purple but the other buttons don't change color. If the user clicks another button named "Web Governance" they're taken to page Governance.aspx and the color of that button changes to purple but the rest of the buttons don't change color, etc.

I've inserted an image of the list view that's on all the pages. I hope this makes sense, thanks!

Answer 1

Hi @Tracy Mason,

Per my research, we could only customize the button color in the gallery view of a SharePoint list. But we are unable to change the color based on the page. Here are steps:

1. Open the Gallery view in Microsoft Lists
2. Select on the name of the view displayed on the command bar > Select Format curret view
3. Select Edit card
4. Sort and show/hide content
5. Select Advance mode
6. Add the following code to the div containing the sp-card-subContainer class (between lines 24,25,26)

"style": { "background-color": "*** HTML color code or name ***" },

Reference:https://pnp.github.io/blog/post/how-to-change-the-background-color-of-cards-in-the-gallery-view/

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.