0

my tiles look like this:

enter image description here

I know how to change the darker background (from heading) but how can I change the background of the description (shows up when going with mouse over tile) and the surrounding of the heading?

Thanks!!

update: with the code .ms-tileview-tile-descriptionMedium { background-color: red; }

my tile looks like this:

enter image description here

3
  • Just the background of the actual description or the whole hover background? Apr 26, 2017 at 13:08
  • Use the F12 panel and check the CSS for the :hover state . You can select the element and force the hover state with the inspector. See: i.imgur.com/TUZM3gX.jpg Apr 26, 2017 at 13:09
  • the grey colour behind 'Organisation'. There is a dark grey (I can make it darker/lighter) and a light grey sorounds the darker grey (I do not know how to change that colour).
    – Kim
    Apr 27, 2017 at 11:47

2 Answers 2

0

Use ".ms-tileview-tile-detailsBox" class and you can change the backgroundcolor of description box.

refer the below screen to provide description for tile view,

enter image description here

4
  • Hi, thanks for your answer! Could you type in the complete code? Because I tried something similar before and it didn't work.
    – Kim
    Apr 27, 2017 at 11:44
  • Maybe like this: <script><style type="text/css">.ms-tileview-tile-detailsBox{background-color: rgba(0, 0, 0, 0.6);} <\style> <\script>
    – Kim
    Apr 27, 2017 at 11:46
  • use this for description background color change: <style> .ms-tileview-tile-descriptionMedium { background-color: red; } </style>
    – PGP
    Apr 27, 2017 at 11:56
  • Hi! I tried that code but now it looks like the picture above (with the red part on the picture) :/
    – Kim
    Apr 27, 2017 at 12:40
0

You can use below css and works for me

.ms-tileview-tile-root:hover .ms-tileview-tile-descriptionSmall, 
.ms-tileview-tile-root:hover .ms-tileview-tile-descriptionMedium, 
.ms-tileview-tile-root:hover .ms-tileview-tile-descriptionLarge {
   background-color: blue;
}
enter image description here

To change complete tile description and title background on hover

.ms-tileview-tile-root:hover .ms-tileview-tile-detailsListMedium {
    background-color: blue;
}

2
  • Hi! So first: thanks for your answer. But how can I change the whole background that is coming up when going over the tile with the mouse. So the grey background behind the blue part. In fact I just want to change the transparency to make the description text easier to read. But I think if there is a square before the rest this doesn't look as nice..
    – Kim
    Apr 27, 2017 at 13:35
  • For changing whole background on hover I have added second snippet below the image. Apr 27, 2017 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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