Login to follow this  
DaeBo

Make Photos Display as Circle instead of Square

6 posts in this topic

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.

 

Screenshot (143).png

Share this post


Link to post
Share on other sites
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.

 

Screenshot (143).png

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;

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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%;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Login to follow this