Circle border for author image

Develop, Build & Integrate CMS Development
1

Hello all,

I’m currently working on this page, and i’d like to add a circle border to the author image (please see image 1) so that it looks like image 2 (this was created manually).

347×117 16.7 KB
image 1

286×111 6.09 KB
image 2

Any advice on this would be greatly appreciated :slightly_smiling_face:

Thanks,

Jamila

2

Hi Jamila,

Check the css class of your image or the div around depending on your code. For example in our blog there is an image wrapped in a div like this <div class=“sidebar-authorImage”><img…></div>

Then add this to your CSS:

.sidebar-authorImage {

border-radius: 100%;

border: 1px solid #ffffff;

}

Depending on the class you are using, you need to replace the “sidebar-authorImage” with your class. The border in this example is 1px and white. For sure, you can change width and color.

Hope this helps you.

Best ragards,

Jaqueline

3

Adding a CSS rule like this should do the trick:

.hs-author-avatar img {
border-radius: 50%;
border: 2px solid #000;
}

You can then adjust the width and color for the border declaration. Hope that helps!
--
Bryan Schneidewind
Manager of Web Development
Weidert Group