Forum Discussion
SharePoint Online Classic - Increase size of promoted link tiles to 275px using CSS
Hi Folks,
I am in a SharePoint Online Classic environment. I wanted to increase the size of the Promoted Links tiles to 275px. I am close.
Revised - 4/22/2018
I have tweaked my code, so now I just need to adjust the initial top position of ms-tileview-tile-detailsBox with CSS. The initial position is 1/3 below top of tile and I would like it not to be visible until triggered by hover.
Here is my code:
<style type="text/css">
/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}
/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}
/* tile overlay dimensions */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
}
/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
}
/* tile background image dimensions */
.ms-tileview-tile-content > a > img {
width: 275px !important;
height: 100% !important;
}
/* title and description text */
.ms-tileview-tile-detailsListMedium {
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
top: 40px !important;
}
/* description text class */
.ms-tileview-tile-descriptionMedium {
padding-top: 15px;
font-size: 14px;
}
/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
background-color: rgba(0, 0, 0, 0.6);
width: 275px;
height: 40px;
position: absolute;
top: 130px;
left: 0px;
padding: 4px 7px;
font-size: 14px;
line-height: 17px;
}
.ms-tileview-tile-titleMediumCollapsed {
height: 200px;
overflow: hidden;
vertical-align: bottom;
top: 200px !important;
}
.ms-tileview-tile-content img {
width:275px!important;
height:275px!important;
}
</style>
Thanks.
My code has evolved, now the problem is that the description does show when hovering over the image. It only shows when hovering over the tile title.
Hover over image - description stops and shows partially
Hover over tile title - complete description shows
My script:
<style type="text/css">
/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}
/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}
/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
background-color:#0072c6 !important;
}
/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
right:0px !important;
}
/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
top:200px !important;
}
div.ms-tileview-tile-detailsBox:hover{
width: 275px !important;
height: 275px !important;
top:0px !important;
}
/* title and description text */
.ms-tileview-tile-detailsListMedium {
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
}
.ms-tileview-tile-titleMediumCollapsed {
height: 275px;
overflow: hidden;
vertical-align: bottom;
top: 275px !important;
}
/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
width: 275px;
position: absolute !important;
top: 10px;
left: 0px;
padding: 0px 7px 4px 4px;
/* font-size: 14px; */
font-size: 16px;
line-height: 19px;
}
</style>- You have background color specified twice get rid of both of them and it will be 100% clear or keep one of them.
Promoted links are challenging. Removing one of the color codes made no difference. My problem seems to be with the div.ms-tileview-tile-detailsBox element. If I could get this to be transparent when at rest, my code would be "perfect" and yes, I tried setting background-color:transparent.
Here is my current code and any help is appreciated:
<style type="text/css">
/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}/* tile overlay dimensions - the standard blue background */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
}/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
}/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
}
/* title and description text */
.ms-tileview-tile-detailsListMedium {
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
}.ms-tileview-tile-titleMediumCollapsed {
height: 275px;
overflow: hidden;
vertical-align: bottom;
top: 275px !important;
}/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
width: 275px;
height: 40px;
position: absolute;
top: 130px;
left: 0px;
padding: 4px 7px;
font-size: 14px;
line-height: 17px;
background-color: rgba(0, 0, 0, 0.3);
}</style>
Hopefully one of these gets the job done. Not sure if the 'important' is needed or not but I threw it in there out of laziness.
/*Clears larger colored box*/
div.ms-tileview-tile-detailsBox {
background-color: rgba(0, 0, 0, 0.0)!important;
}
/*Clears smaller colored box*/
.ms-tileview-tile-titleTextMediumCollapsed {
background-color: rgba(0, 0, 0, 0.0)!important;
}
Hi Vanessa are you referring to not showing the title and title box at all until the user hovers over the title so you only see the icon? Or something else?
Hi Joel,
That's it exactly. I am still learning the right terminology.
If you are viewing the tile, you see the title only.
If you hover over the tile, you then see the title and description.
Thanks.
My latest attempt:
<style type="text/css">
/* tile row height */
.ms-promlink-body {
height: 285px;
width: 870px;
}/* tile dimensions, including space between tiles */
.ms-tileview-tile-root {
width: 285px !important;
height: 285px !important;
}/* tile overlay dimensions */
.ms-tileview-tile-content {
width: 275px !important;
height: 275px !important;
}/* title and description overlay dimensions */
div.ms-tileview-tile-detailsBox {
width: 275px !important;
height: 275px !important;
}/* tile background image dimensions */
.ms-tileview-tile-content > a > img {
width: 275px !important;
height: 275px !important;
}/* image dimensions */
.ms-tileview-tile-content img {
width:275px !important;
height:275px !important;
}/* title and description text */
.ms-tileview-tile-detailsListMedium {
background-color: rgba(0, 0, 0, 0.3);
height: 275px;
padding: 4px 7px 7px;
font-size: 14px;
line-height: 17px;
top: 40px !important;
}/* description text class */
.ms-tileview-tile-descriptionMedium {
padding-top: 15px;
font-size: 14px;
}/* title text when description not shown */
.ms-tileview-tile-titleTextMediumCollapsed {
background-color: rgba(0, 0, 0, 0.3);
width: 275px;
height: 40px;
position: absolute;
top: 130px;
left: 0px;
padding: 4px 7px;
font-size: 14px;
line-height: 17px;
}.ms-tileview-tile-titleMediumCollapsed {
height: 200px;
overflow: hidden;
vertical-align: bottom;
top: 200px !important;
}</style>
Yields an additional background/layer between the title and the image when just viewing the tile:
