Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
msollami

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

Question

Posted (edited)

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

Edited by msollami
Clarifications

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 0

@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;
}


Share this post


Link to post
  • 0
Posted (edited)

@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);
    }




Edited by tuanphan
Initial Revision

Share this post


Link to post
  • 0

Almost there, the only issues left is that the images aspect ratios are changed:

alt text

And I'd like to avoid the restyling for the one timeline post above, where it is meant to be a full width image...

j.jpg.1bb53f1aaf3385c249612ac4d5426f69.jpg

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@tuanphan I tried removing the width:100% height:100% and inserting width:150px. But is there a way to avoid the overflow issue I'm showing below:

Share this post


Link to post
  • 0

/* 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;
 }


Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...