Circle border for author image

SOLVE
Highlighted
Occasional Contributor

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).

 

image 1image 1

 

image 2image 2

 

Any advice on this would be greatly appreciated :cathappy:

 

Thanks,

 

Jamila 

CSS
Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Regular Contributor | Gold Partner

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

 


Jaqueline Hoppe
jhoppe@w-4.ch
Digital Marketing Consultant & HubSpot Specialist at W4 – Marketing meets IT
Highlighted
Top Contributor | Diamond Partner

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

2 Replies 2
Highlighted
Regular Contributor | Gold Partner

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

 


Jaqueline Hoppe
jhoppe@w-4.ch
Digital Marketing Consultant & HubSpot Specialist at W4 – Marketing meets IT
Highlighted
Top Contributor | Diamond Partner

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