Jump to content

In the Five theme, how to change css of blogpost thumbnails?

Recommended Posts

In my blog post excerpts, all the thumbnails are squares:

alt text

I'd like to tweak them in the following ways:

  1. Change these into circles
  2. Give them drop shadows

So the css is something like this:


img {
 border-radius: 50%;
 width: 150px;
 -webkit-filter: drop-shadow(5px 5px 5px #222);
 filter: drop-shadow(5px 5px 5px #222);
}

I just don't know the proper selector to give so that it will only affect the blog thumbnails and not all images.

Also, if possible... is there any way to make them smaller and scale better with page resizes? They're kind of clunky at the moment, e.g. sometimes thumbnails are way too big for the text at a certain zoom!

screen-shot-2019-08-03-at-21739-pm.png.3bb9da33561435f53d8885896feeeb90.png

Link to comment
  • Replies 8
  • Views 1.1k
  • Created
  • Last Reply

@msollami try this code. If it doesn't work, please share url to check exact code.


.collection-type-blog.view-list article img {
      border-radius: 50%;
      width: 150px;
      -webkit-filter: drop-shadow(5px 5px 5px #222);
      filter: drop-shadow(5px 5px 5px #222);
    }




Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@msollami


.collection-type-blog.view-list article img {
   border-radius: 50%;
   -webkit-filter: drop-shadow(5px 5px 5px #222);
   filter: drop-shadow(5px 5px 5px #222);
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
}
.view-list article .excerpt-thumb .intrinsic .excerpt-image {
   display: block;
   height: 100%;
   overflow: unset !important;
}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Ok, @tuanphan but using this code:


/* CUSTOM CSS */
.collection-type-blog.view-list article img {
    border-radius: 50%;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    left: 0 !important;
    height:150px;
    width:150px;
}
.view-list article .excerpt-thumb .intrinsic .excerpt-image {
    display: block;
    width:150px;
    height:150px;
    overflow: unset !important;
}

Still gives these overflow issues:

alt text

k.jpg.a476ca248eec5c1e09ff3dd22df10dba.jpg

Link to comment

/* CUSTOM CSS */
.collection-type-blog.view-list article img {
     border-radius: 50%;
     -webkit-filter: drop-shadow(5px 5px 5px #222);
     filter: drop-shadow(5px 5px 5px #222);
     left: 0 !important;
     height:100% !important;
     width:100% !important;
}
 .view-list article .excerpt-thumb .intrinsic .excerpt-image {
     display: block;
     width:150px;
     height:150px;
     overflow: unset !important;
 }


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.