I would like to change the background color of ONE tile on the promoted links page in SharePoint.
I saw this post using CSS:

<style type='text/css'>
  div.ms-tileview-tile-content {
    background-color: red;

This changed all of the tiles to red. I want to select a specific tile and determine the color. All of the tiles are currently navy blue and I want to change one of them to light blue.

  • maybe div.ms-tileview-tile-root:first-child {background-color:red;}? – Eric Alexander Nov 13 '15 at 20:42
  • Are you able to use jQuery, or are you stuck with only CSS? – Dylan Cristy Nov 13 '15 at 20:44

It looks like the background image area for the tile gets it's alt attribute set as the link item's title. So you can use the following to target a single specific tile:

.ms-promlink-body img[alt*="text from the title"] { background-color: red; }

where "text from the title" is some text that will uniquely identify the target tile based on it's title.


If you use :first: or eq(2) etc. and reorder the tile list, the colors will not follow suit. Another option is to identify the webpart ID and actual tile ID (using dev tools) on a page, and then use the following:

#Tile_WPQ3_4_2, #Tile_WPQ3_5_2, #Tile_WPQ3_6_2 {background-color: rgb(135, 178, 19);}
#Tile_WPQ2_12_2 {background-color: rgb(254, 191, 0);}
#Tile_WPQ2_15_2 {background-color: #006600;}

Line 1 - first 3 are set to all the same color, Line 2 & 3 - different colors. Tile is the list name, WPQ3 & WPQ2 is the webpart, _12 is the tile ID and _2 is the layer on the tile where the div/block background color is set.

This method is applied to the page the tiles are displayed on, not site-wide, and if you add more webparts to the page, you may need to tweak the WPQ #.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.