![]() |
![]() ![]() |
![]() |
Jeckcoeler |
![]()
Post
#1
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
On my website [howtoplaystation.com], the images of the popular posts on the right side are too small, blurred and surrounded by black borders. Can someone help me fix this?
I tried some CSS codes, but didn't help. I'm looking for css code that removes the black borders, blurring and makes the images bigger. .PopularPosts .item-thumbnail { width: initial; height: 70px; } .PopularPosts ul li img{ object-fit: fill!important; } I tried this code, but didn't seem to fix the problem Thank you in advance. |
Darin McGrew |
![]()
Post
#2
|
WDG Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 ![]() |
Well, if you want them to display a different size, then change the
.PopularPosts .item-thumbnail img {...} rule that sets the images to 60x60. |
pandy |
![]()
Post
#3
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
Yeah, change or remove is what your want rather than add to the CSS.
Anyway, I don't see any black border. Fixed it already? |
Jeckcoeler |
![]()
Post
#4
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
|
Jeckcoeler |
![]()
Post
#5
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
|
pandy |
![]()
Post
#6
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
I don't see a black border in your screen cap either. Do you mean WHITE border? Or maybe the faint shadow?
|
Jeckcoeler |
![]()
Post
#7
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
|
Darin McGrew |
![]()
Post
#8
|
WDG Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 ![]() |
You need to find the existing CSS rule, and change the height and width properties to whatever it is you want them to be.
|
pandy |
![]()
Post
#9
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image.
https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu |
Jeckcoeler |
![]()
Post
#10
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image. https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu I can crop the image with Photoshop, but how can I change it in the HTML? |
Darin McGrew |
![]()
Post
#11
|
WDG Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 ![]() |
You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image. https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu I can crop the image with Photoshop, but how can I change it in the HTML? If you're using Photoshop, then you can create real thumbnail images and use them, rather than resizing large image into dumbnails. |
Jeckcoeler |
![]()
Post
#12
|
Novice ![]() ![]() Group: Members Posts: 22 Joined: 14-July 19 Member No.: 26,933 ![]() |
You mean the little black half-moon that shows on top and bottom WITHIN the circle? It's in the image itself. Crop the image. https://lh4.googleusercontent.com/proxy/Y4U...-h600-n-k-no-nu I can crop the image with Photoshop, but how can I change it in the HTML? If you're using Photoshop, then you can create real thumbnail images and use them, rather than resizing large image into dumbnails. Thank you. I'm using Blogger. This is the HTML code of that widget: <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:widget-settings> <b:widget-setting name='numItemsToShow'>3</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='showSnippets'>true</b:widget-setting> <b:widget-setting name='timeRange'>LAST_MONTH</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div style='clear: both;'/> </b:if> </li> </b:loop> </ul> What do I have to change? Thank you in advance. |
pandy |
![]()
Post
#13
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 ![]() |
That's mostly Blogger's proprietary template language.
There is a CSS property called clip. Only it's deprecated now, but I think browsers still support it, those that did before. I never played around with it much, but if you google "CSS clip" I think you'll find enough to understand how it works. https://drafts.fxtf.org/css-masking-1/#propdef-clip I'd just fix the images though. |
Ivy Crawford |
![]()
Post
#14
|
Newbie ![]() Group: Members Posts: 10 Joined: 4-November 19 Member No.: 27,030 ![]() |
Here I would do as pandy suggests, just fix the images and you'll be fine.
|
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 26th April 2024 - 09:11 AM |