Change List & Board View Background Colors Easily
Mar 23, 2024 3:00 PM

Change List & Board View Background Colors Easily

by HubSite 365 about Ami Diamond [MVP]

SharePoint Online / Microsoft Teams /Microsoft 365/ Expert at P.Z Projects

Pro UserListsSharePoint OnlineLearning Selection

Revolutionize Your Microsoft Lists with Custom Card Colors!

Key insights


  • Changing the background color of cards in Microsoft Lists' Gallery View can significantly enhance visual item distinction and work efficiency through color-coding.
  • To change the background color, access the Gallery view, select the view name on the command bar, choose "Format current view," and then select "Edit card."
  • Use Advanced mode to insert a specific code for background color change in the sp-card-subContainer class, with options for uniform color, conditional color based on column values, or alternating colors.
  • The process is completed by previewing the change to ensure the desired outcome and then selecting "Save" to apply the new background color settings.
  • Column values used as conditions for color changes do not need to be visible on the card but must be included in the view; the column's internal name, found in the URL of the Edit Column screen, is used in the condition.
  • Download the Code form GitHub

Enhancing User Experience in Microsoft Lists with Custom Background Colors

Microsoft Lists offers a visually dynamic way to organize and present items through its Gallery View, using cards to represent individual list items. This approach not only makes the information more accessible but also allows for a more intuitive interaction. However, when working with extensive lists, distinguishing between different items or categories can become a challenge. Customizing the background color of these cards based on categories, priorities, or other conditions can vastly improve this aspect. By employing simple coding in the Advanced mode, users can tailor the appearance of their lists to reflect their personal or organizational needs better




Ami Diamond [MVP] shares a helpful guide on enhancing the visual organization of Microsoft Lists by changing card background colors in Gallery and Board views. This method, credit to @tetsuyakawahara4150, is showcased in a helpful video clip.

Using the Gallery View in Microsoft Lists allows for a visually appealing card format for listing items. Ami explains that customizing the background color of these cards can greatly improve item distinction, aiding in quicker identification by color-coding based on categories or priorities.

The tutorial walks through the steps to edit the background color in an advanced coding format. Starting with opening the Gallery view in Microsoft Lists, the process involves selecting the view name from the command bar, editing the card, and then moving to the Advanced mode to input the required code.

Ami provides practical coding examples for a variety of needs: setting a uniform color for all cards, changing colors based on priority levels, and alternating card colors. The conditions use HTML color codes or names within the 'style' attribute.

Enhancing Workflow Efficiency through Visual Customizations in Microsoft Lists

Microsoft Lists offers a powerful platform for organizing and managing data across various business processes. Visual customizations, such as changing card background colors in Gallery and Board views, represent a practical approach to enhancing user experience and workflow efficiency. By implementing visual cues, users can categorize, prioritize, and access information more intuitively.

This customization capability not only improves aesthetic appeal but also contributes to quicker decision-making and task completion. Such visual enhancements align with broader trends in software design that emphasize user-centric and adaptable interfaces. As users continue to seek more personalized and efficient ways to interact with digital tools, customization options like those offered in Microsoft Lists become increasingly valuable. This shift towards more visually organized and customizable platforms reflects a deeper understanding of diverse user needs and the role of design in productivity tools.




People also ask

How do I change the background color in Microsoft lists?

Answer: To individualize your Microsoft lists, navigate to the "customize" option by selecting the three dots in the top right corner of your interface. Here, you have the liberty to pick a specific color or even an image to set as your list's background. Adding an emoji at the beginning of your list's name is an extra creative touch, as it then appears as the icon for your list in the sidebar.

How do I change the background color in SharePoint?

Answer: Alter the palette of your SharePoint site by implementing a theme that changes its colors.

How do I change the background color of a layer in Illustrator?

Answer: Adjusting a canvas's background color in Illustrator can be done through a series of defined steps.

How do you change the color of the board in notion?

Answer: You can modify the board color in Notion by heading to the layout settings. Here, you'll find a toggle for color columns; activating this will enable colored columns.



change background color, List Board views, customize card background, update board background, change card color, board customization, modify List Board color, personalize card background