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

  • Just the background of the actual description or the whole hover background? – Christoffer Apr 26 '17 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 – Danny '365CSI' Engelman Apr 26 '17 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 '17 at 11:47
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

  • 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 '17 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 '17 at 11:46
  • use this for description background color change: <style> .ms-tileview-tile-descriptionMedium { background-color: red; } </style> – PGP Apr 27 '17 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 '17 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;
}

  • 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 '17 at 13:35
  • For changing whole background on hover I have added second snippet below the image. – Venkat Konjeti Apr 27 '17 at 13:40

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.