Category Widget Icon to Image CSS
For a while there, category widgets - seen on the Featured Categories Pocket and Tiled Category Layout pages were using the category setting "Photo" when you selected Image from the display settings in either the pocket or the theme.
This was not intended behavior. The image setting should use the banner image in category settings. The icon view is intended to use the photo setting in category. But that shrinks the photo down to fit an icon size, which many customers find less than ideal.
If your customer wants to use different images for category banners and category widgets, the following CSS will help.
- Set the category widgets/featured category pocket to icon view.
- Paste the following CSS into a Custom HTML Pocket, placed after the Head location.
<style>
div[class*="homeWidgetItem-iconContainer"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
--border-type: shadow;
--has-background: false;
--has-full-outline: true;
list-style: none;
overflow-wrap: break-word;
word-break: break-word;
line-height: inherit;
color: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
max-height: 250px;
overflow: hidden;
outline: 0;
}
div[class*="homeWidgetItem-iconWrap"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
--border-type: shadow;
--has-background: false;
--has-full-outline: true;
list-style: none;
overflow-wrap: break-word;
word-break: break-word;
line-height: inherit;
color: inherit ;
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: inherit;
width: 100%;
padding-top: 50%;
position: relative;
outline: 0;
border-radius: 9px 9px 0px 0px;
}
img[class*="homeWidgetItem-icon"] {
--reach-combobox: 1;
visibility: visible;
cursor: pointer;
--content-type: title-description-image;
--border-type: shadow;
--has-background: false;
--has-full-outline: true;
list-style: none;
overflow-wrap: break-word;
word-break: break-word;
line-height: inherit;
color: inherit;
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
outline: 0 !important;
max-height: 100%;
}
div[class*="homeWidgetItem-content"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
list-style: none;
overflow-wrap: break-word;
word-break: break-word;
line-height: inherit;
color: inherit;
box-sizing: inherit;
margin: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
flex: 1 1 0%;
display: flex;
flex-direction: column;
--border-type: shadow;
--has-background: true;
--has-full-outline: true;
padding: 16px !important;
outline: 0;
text-align: left;
}
h3[class*="homeWidgetItem-name"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
list-style: none;
--border-type: shadow;
--has-background: true;
--has-full-outline: true;
text-align: left;
overflow-wrap: break-word;
word-break: break-word;
box-sizing: inherit;
border: 0;
font-style: inherit;
vertical-align: baseline;
font-family: inherit;
display: block;
margin: 0px;
padding: 0px;
line-height: 1.25;
width: 100%;
color: inherit;
font-size: 16px;
font-weight: 600;
text-decoration: none;
outline: 0;
}
div[class*="homeWidgetItem-description"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
list-style: none;
--border-type: shadow;
--has-background: true;
--has-full-outline: true;
text-align: left;
overflow-wrap: break-word;
word-break: break-word;
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 8px;
padding-top: 0px;
padding-bottom: 0px;
color: inherit;
line-height: 1.5;
outline: 0;
}
div[class*="Metas-styles"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
list-style: none;
--border-type: shadow;
--has-background: true;
--has-full-outline: true;
text-align: left !important;
overflow-wrap: break-word;
word-break: break-word;
box-sizing: inherit;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
vertical-align: baseline;
color: inherit;
font-size: 12px;
line-height: 1.5;
display: inline-block;
margin: 2px 4px;
max-height: 18px;
outline: 0;
}
span[class*="numberFormatter"] {
--reach-combobox: 1;
visibility: visible !important;
cursor: pointer;
--content-type: title-description-image;
list-style: none;
--border-type: shadow;
--has-background: true;
--has-full-outline: true;
text-align: left !important;
overflow-wrap: break-word;
word-break: break-word;
color: inherit;
box-sizing: inherit;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
line-height: inherit;
padding: 0;
margin: 0;
text-decoration: inherit;
outline: 0;
}
</style>
2
Comments
-
Here's the CSS in a file, as that'll likely be easier to copy and paste.
0 -
I've applied this to Waters: https://waters.vanillastaging.com/
And my test site: https://branwyn.mormorhaxa.com/
0