Share via

Change SharePoint List Gallery Button Color By URL

Tracy Mason 0 Reputation points
2024-12-18T16:37:40.2966667+00:00

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!

link-nav

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
11,004 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
3,158 questions
SharePoint Workflow
SharePoint Workflow
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Workflow: An orchestrated and repeatable pattern of business activity, enabling data transformation, service provision, and information retrieval.
613 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. RaytheonXie_MSFT 37,151 Reputation points Microsoft Vendor
    2024-12-19T07:30:53.2766667+00:00

    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 steps to open 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.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.