CMS Development

Jamila-lawal
Participant

Circle border for author image

SOLVE

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 🙂

 

Thanks,

 

Jamila 

0 Upvotes
2 Accepted solutions
Jaqueline
Solution
Contributor | Platinum Partner
Contributor | Platinum Partner

Circle border for author image

SOLVE

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.com
Digital Marketing Consultant, HubSpot Specialist & HubSpot Certified Trainer

W4 – Marketing meets IT
Zurich // Basel // Dresden // Bratislava // Beijing // Gujranwala
www.w-4.com

View solution in original post

Solution
Anonymous
Not applicable

Circle border for author image

SOLVE

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

View solution in original post

2 Replies 2
Solution
Anonymous
Not applicable

Circle border for author image

SOLVE

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

Jaqueline
Solution
Contributor | Platinum Partner
Contributor | Platinum Partner

Circle border for author image

SOLVE

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.com
Digital Marketing Consultant, HubSpot Specialist & HubSpot Certified Trainer

W4 – Marketing meets IT
Zurich // Basel // Dresden // Bratislava // Beijing // Gujranwala
www.w-4.com