Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Round Recent Posts Images On Home Page

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

On YouTube someone asked for the option to have circle images on the recent blog list and I wanted to post it in case anyone could find it useful to their site.

Custom CSS For Round Images

NOTE: For a Circle, The Width and Height need to be the same pixel size if you change them to keep them at the same value.

.article-card.horizontal .image-container {
    width: 250px;
    height: 250px;
    border-radius: 125px;
    margin: 0 auto 20px;
}

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

4 thoughts on “Round Recent Posts Images On Home Page

  1. Hi Josh,

    Thanks for these tips!

    I’m finding an odd thing happening on my site, though, and I can’t figure it out. I have included the codes you’ve provided to do the following:

    1. Customize my “Read Post” buttons, which works great for me.
    2. Change the colors of the home page section dividers. (Recent Articles, About Me, Legal). It worked for awhile, but now the colors are back to the default black. Any thoughts?
    3. Change to a circular recent post image. I can’t get this to work on my site at all. Any thoughts?

    Should the codes be in a certain order?

    Here is the code I currently have in the Acabado Custom CCS section:

    a.button.reverse {
    position: center;
    visibility: hidden;
    }

    a.button.reverse::before {
    content: “Continue Reading…”;
    visibility: visible;
    border: 1px solid;
    border-radius: 3px;
    position: absolute;
    width: 200px;
    background: #ffffff;
    color: #696969 !important;
    display: block;
    font-family: “Roboto Condensed”, “Arial Narrow”, Arial, Helvetica, sans-serif;
    background: #ffffff;
    line-height: 1.5;
    padding: 1px 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    font-weight: light;
    letter-spacing: 1.5px;
    font-size: 16px;
    font-style: normal;

    body.home .articles-wrapper>h2{
    background: #696969;
    }

    .featured-categories-wrapper .category-card h2:before{
    background: #696969;
    }

    .widget-title{
    background: #696969;
    }

    article-card.horizontal .image-container {
    width: 250px;
    height: 250px;
    border-radius: 125px;
    margin: 0 auto 20px;
    }

    Here is my site link in case it helps to see what I may have messed up: https://theschnauzercollective.com/

    Thanks for any ideas šŸ™‚

    1. missing period

      .article-card.horizontal .image-container {
      width: 250px;
      height: 250px;
      border-radius: 125px;
      margin: 0 auto 20px;
      }

  2. Hi Josh,

    Thank you! Works great now.

    In case you haven’t noticed already, the period is missing in your original post above…which is why it wasn’t in my CSS code.

    For another site I’m working on, is there CSS code for making the recent post image and the corresponding title/description stack vertically and take up the entire width of the “recent posts” column (instead of displaying side-by-side)? Or would that be a major change to the theme itself? (Which I’m probably not interested in messing with.)

    Thanks

    1. Thats a large change, I have been looking at ways to customize the look more but it is cludgy and not helpful still.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content