Jump to content
  • 0

Round Profile Photo for Users

Leon13

Asked by Leon13,

 Share

Question

Leon13 Explorer

Leon13

Posted
Posted (edited)

Greetings all,

I located the code below in a post on this forum some time ago (can't locate it at this time.)

The issue I am trying to fix is the large orange ring that is displayed for a second when the page loads:  https://www.zwoft.com/photo.html  (Username: test Password: test)

Please let me know of any suggestions that might remove this large ring, or perhaps could suggest similar functionality to create a round profile pic.

Thank you!

Leon

Header:

<!-- RoundPic Starts-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  border-radius: 50%;
  border:2px solid orange;
}
</style>
</head>
<!-- RoundPic End-->

Edited by Leon13
Added creds to see pic
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
autonumber Community Regular

autonumber

Posted
Posted

Hi @Leon13 - there might be objects that are being affected by this style. Have you tried to add a class on the image so the style will only be applied to that class/image?  

<style>
.profile {
  border-radius: 50%;
  border: 2px solid orange;
}
</style>

<img class="profile" src="img_avatar.png" alt="Avatar" style="width:200px">

 

Link to comment
Share on other sites
  • 0
Leon13 Explorer

Leon13

Posted
  • Author
Posted
On 3/2/2023 at 12:36 PM, autonumber said:

Hi @Leon13 - there might be objects that are being affected by this style. Have you tried to add a class on the image so the style will only be applied to that class/image?  

<style>
.profile {
  border-radius: 50%;
  border: 2px solid orange;
}
</style>

<img class="profile" src="img_avatar.png" alt="Avatar" style="width:200px">

 

Thank you so much @autonumber! 
Your suggestion had me try the below which works perfectly.

 


 <style>
  /* CSS to create a round profile image */
  .round-image {
   border-radius: 50%;
   width: 60px;
   height: 60px;
   background-size: cover;
   background-position: center;
   margin-right: 0px;
   float: left;
   border: 3px solid orange;
   box-sizing: border-box;
  }
 </style>
 <div class="round-image" style="background-image: url('[@field:Profile_Photo/]');"></div>


 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...