Rocked: Change Post Type Images (Square) on Blog Roll

Hey guys, I’m loving the Rocked Theme!

I was just wondering how to change the small square images that appear to the left of blog posts? (in the blog roll or on the home page).

Is there a way for me to upload my own custom images for each post type?

Thanks in advance!

Hello there,

You can use CSS code to alter the default icon with your own image.

Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .hentry .post-format .fa {
      display: none;
    }

    .hentry .post-format {
      background-image: url('https://yoursite.com/path/to/image.png');
      background-size: 18px;
      background-repeat: no-repeat;
      background-position: center center;
    }

Replace https://yoursite.com/path/to/image.png with your image URL. You can upload an image to media library (Dashboard > Media) to get the URL.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hey, thank you very much for getting back to me so quick Kharis, I really appreciate it!

We are definitely heading in the right direction… but there are 2 things:

  1. The image is showing up super small… what size should I make the image, so it shows up the same size as the original?

  2. How can I replace the whole square, rather than just the icon? If there is a way!

If you wanna see the site I’m working on, it’s here: http://thecbdguy.co.uk/

Hello there,

Thank you for getting back to me.

As inspected, you can update the code to become:

    .hentry .post-format {
        background-image: url('http://thecbdguy.co.uk/wp-content/uploads/2020/06/weed-leaf-in-circle-png.png');
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: transparent;
    }

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

1 Like

You absolute legend!! Thank you very much Kharis, worked perfectly!
Have a good day!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support