Make Photos Display as Circle instead of Square

[DaeBo]

I am using a search and report DataPage to display a user's profile photo until landing on my Dashboard page. I would like the photo to appear as a circle (just like our profile photo for this forum in the upper-right corner). Any idea on how to do that? I also want the "Welcome, Myles" to be centered vertically to the image.

 

[Mathilda]

10 hours ago, DaeBo said:

I am using a search and report DataPage to display a user's profile photo until landing on my Dashboard page. I would like the photo to appear as a circle (just like our profile photo for this forum in the upper-right corner). Any idea on how to do that? I also want the "Welcome, Myles" to be centered vertically to the image.

 

As far as I can see, forum's profile photo has the following attribute, which you may try using: border-radius: 45px;

You need to define that for the img element.

Regarding placing text in the middle, the following attribute should do the trick:

vertical-align: middle;

[DaeBo]

Where do I enter that information? I figured it would be in the CSS for the style, but there doesn't seem to be a class with the word photo or image that stands out. Currently, the image field is set to display, so I am not using an HTML field to load the image. I am using the HTML field for the welcome message.

[DaeBo]

Solution: This code in the header.

 

<style>
span[class^='cbFormData'] img {
border-radius: 8px;
}
</style>

 

[MayMusic]

Thanks this worked for me in details page. How can we do it in report page? @DaeBo

 

[MayMusic]

I tried this in my header and added HTML Block to create my images and it worked like a charm.

 

<style>
  img {
  border-radius: 50%;
}
</style>

The style rule above is the shorthand for:

image{

  border-top-left-radius: 50% 50%;
  border-top-right-radius: 50% 50%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
}