Apr 19 2018 01:01 PM - edited Apr 22 2018 04:59 AM
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.
Apr 22 2018 04:41 PM
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?
Apr 22 2018 04:48 PM
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.
Apr 22 2018 04:51 PM
Here is some code I used a while back. I want to say if you set ul.ms-tileview-tile-detailsListMedium to 0px in the below, it will do what you are looking for. I dropped all of the code in case you want other ideas/ notes, especially the text centering. Promoted links has a lot of layers to it.
<style type="text/css">
.ms-promlink-header {DISPLAY: none !important}
/* tile row height */
div.ms-promlink-body {
height: 100px;
}
/* tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
width: 110px !important;
height: 110px !important;
}
/* tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
width: 100px !important;
height: 100px !important;
background-color: rgb(63,68,68);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
/* tile background image dimensions */
div.ms-tileview-tile-content > a > div > img {
max-width: 50%;
width: 50% !important;
position: relative;
top:9px;
margin:auto;
}
/* title and description text */
ul.ms-tileview-tile-detailsListMedium {
height: 100px;
font-size: 11px;
line-height: 100%;
text-align: center;
margin:auto;
}
/* description text class */
li.ms-tileview-tile-descriptionMedium {
padding-top: 10px;
font-size: 11px;
}
/* title text when description not shown */
div.ms-tileview-tile-titleTextMediumCollapsed {
background-color: rgba(0, 0, 0, 0.6);
width: 86px;
height: 29px;
position: absolute;
top: -33px;
left: 0px;
padding: 4px 7px 0px;
font-size: 11px;
line-height: 13px;
}
.ms-tileview-tile-titleMedium,
.ms-tileview-tile-titleMediumCollapsed,
.ms-tileview-tile-titleMediumExpanded,
.ms-tileview-tile-titleSmall,
.ms-tileview-tile-titleSmallCollapsed,
.ms-tileview-tile-titleSmallExpanded,
.ms-tileview-tile-descriptionMedium {
display: block;
text-align: center;
}
</style>
Apr 22 2018 05:59 PM
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:
Apr 22 2018 06:10 PM
Apr 24 2018 04:24 AM
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>
Apr 24 2018 05:48 AM
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;
}
Jun 18 2018 09:24 AM
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>