Tech Talk Live Blog

SharePoint Promoted Links: Different Color for Each Tile Using CSS3

Margie Morales

In a recent project I worked on creating an internal SharePoint site that would serve as an informational website for staff. The goal was to implement a design that would have buttons for navigating to informational resources. Basically, the site needed to be dressed up a bit without a lot of custom development.

I decided to add some flair to the pages by using the Promoted Links web part as the top menu of each page. The team I was working with asked if each tile could have a different color to correspond to the colors of a process chart they had created.

This is the final result:

Tiles with Image and Color

For our requirements we had an image for each tile, and only needed to change the color of the details box, which is the lower portion of the tile that expands to the height of the full tile when hovering over it. The CSS (Cascading Style Sheets) below includes changing the color for the entire box by using both .ms-tileview-tile-content and .ms-tileview-tile-detailsBox classes. Because yellow was the color of the second tile, I changed the font color to black for readability. To change the description as well, use the class provided in the comment for Tile 2.

Tiles CSS

In smaller projects like this one, I often avoid activating the publishing infrastructure because that is more than I need to make a few small style changes. I also like to avoid putting CSS directly into a content editor web part on each page because if several pages are using the same CSS, I like to be able to edit the style files from one location and ideally from one single file. This allows me to refresh the pages when the style files are changed to be able to see the changes right away similar to what one would do on a publishing site using the Style Library. To do this, I add a text file that will serve as my CSS file to the site assets library. The CSS in the text file must be wrapped in a Style element. If you are worried about the file getting accidently deleted, unique permissions could be set on it. A good idea is to also enable versioning on the library for reverting to previous versions, if necessary.

Each page gets a content editor web part with a link to the text file using the Content Link field as shown in the first highlighted field below. To hide the web part, select “None” for the Chrome Type. If you have to add this web part to many pages, you may want to create one web part, export it, then upload it to the web part gallery so it will already be configured with the link and chrome settings when you add it to a page.

Content Editor Showing Content Link Field

Tech Talk Live Blog Comment Guidelines:

One of our main goals at Tech Talk Live is to build a community. It is our hope that this blog can be a forum for discussion around our content. We see commenting as an integral part of this community. It allows everyone to participate, contribute, connect, and share relevant personal experience that adds value to the conversation. Respect counts. We believe you can disagree without being disagreeable. Please refrain from personal attacks, name calling, libel/defamation, hate speech, discriminatory or obscene/profane language, etc. Comments should keep to the topic at hand, and not be promotional or commercial in nature. Please do not link to personal blog posts, websites, or social media accounts that are irrelevant to the conversation. This is considered self-promotion. We welcome links that help further the conversation and reserve the right to delete those we deem unnecessary. The appearance of external links on this site does not constitute official endorsement on behalf of Tech Talk Live or Lancaster-Lebanon Intermediate Unit 13. You are solely responsible for the content that you post – please use your best judgment. We reserve the right to remove posts that do not follow these guidelines.

One thought on "SharePoint Promoted Links: Different Color for Each Tile Using CSS3"

  1. Slawek says:

    Hi, the code from the link can be pasted onto the page through ’embed code’ feature.
    It works perfectly and changes colours, however, if I have two rows of tiles on a page, it changes them all respectively so for instance both second tiles of each row are yellow. I don’t know coding but is there any way to specify the tile name to be altered? As in the example – yellow for “Stage 2 – Concept Generation”?

Leave a Reply

Your email address will not be published. Required fields are marked *


Tech Talk Live is the only conference of its kind in the region specifically designed for IT pros in education.


1020 New Holland Avenue
Lancaster, PA 17601

(717) 606-1770