The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Circle Avatar

View previous topic View next topic Go down

Solved Circle Avatar

Post by Guardian-Angel on Thu Dec 24 2015, 00:22

Hello

I've been admiring the circle avitars on this forum. Is it limited only to this forum, or is there a way to change it on our forums?

TYIA
avatar
Guardian-Angel
Forumember

Posts : 501
Reputation : 12
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on Thu Dec 24 2015, 14:54

Hello !

You can use the "border-radius". Put that in your CSS.  
Code:
div.postprofile > dl > dt > img {
border-radius: 100px;  
height: 120px;    
width: 120px; }

Is that what you wanted ?

avatar
Kiyomizu
Forumember

Male Posts : 201
Reputation : 30
Language : French and English
Location : France

http://forum.sosblog.fr/

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on Thu Dec 24 2015, 15:00

I've checked your forum and as it's PhpBB 2, here is the code I'd recommend using.

Code:
img {
    border-width: 0;
    border-radius: 50%;
}


Last edited by Zuke on Thu Dec 24 2015, 15:19; edited 1 time in total
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on Thu Dec 24 2015, 15:11

Zuke wrote:I've checked your forum and as it's PunBB 2, here is the code I'd recommend using.

Code:
img {
    border-width: 0;
    border-radius: 50%;
}

Hello,

That code can't worked because this code work for ALL images... He just want to change the avatars.
avatar
Kiyomizu
Forumember

Male Posts : 201
Reputation : 30
Language : French and English
Location : France

http://forum.sosblog.fr/

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on Thu Dec 24 2015, 15:20

If you want the last post avatar, you can use this code. This will give a circular effect. Preview: http://prntscr.com/9i1r5m

Code:
.lastpost-avatar img {
    -moz-border-radius: 50%;;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 38px;
    width: 38px;
}
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on Thu Dec 24 2015, 15:31

Missed !
This code is just for the "bodyline", and don't worked for PhpBB2 i think !

I recommended to for, to use the tool of inspector of Chrome or Firefox.
avatar
Kiyomizu
Forumember

Male Posts : 201
Reputation : 30
Language : French and English
Location : France

http://forum.sosblog.fr/

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on Thu Dec 24 2015, 15:37

I'd recommend playing around with inspect element to find the right code, but I'm going to tag Ange in this discussion as I think she'd be able to help with this sort of issue.

@Ange Tuteur
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Circle Avatar

Post by Ange Tuteur on Thu Dec 24 2015, 15:45

Hi,

Use this CSS code :
Code:
#main-content > .post .postprofile dt img {
  background:#FFF;
  height:100px;
  width:100px;
  border-radius:100px;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.1);
  padding:3px;
}

There's also a number of topics on this :
http://help.forumotion.com/search?search_keywords=circle
avatar
Ange Tuteur
Forumaster

Male Posts : 13176
Reputation : 2879
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on Thu Dec 24 2015, 15:55

Kiyomizu wrote:Hello !

You can use the "border-radius". Put that in your CSS.  
Code:
div.postprofile > dl > dt > img {
border-radius: 100px;  
height: 120px;    
width: 120px; }

Is that what you wanted ?


This one changes all images, not just the avatars.

Zuke wrote:I've checked your forum and as it's PhpBB 2, here is the code I'd recommend using.

Code:
img {
    border-width: 0;
    border-radius: 50%;
}

This one doesn't make any changes.

If anyone has more, I'd be glad to test them out. Thanks!
avatar
Guardian-Angel
Forumember

Posts : 501
Reputation : 12
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on Thu Dec 24 2015, 15:57

Guardian-Angel wrote:
Kiyomizu wrote:Hello !

You can use the "border-radius". Put that in your CSS.  
Code:
div.postprofile > dl > dt > img {
border-radius: 100px;  
height: 120px;    
width: 120px; }

Is that what you wanted ?


This one changes all images, not just the avatars.

Zuke wrote:I've checked your forum and as it's PhpBB 2, here is the code I'd recommend using.

Code:
img {
    border-width: 0;
    border-radius: 50%;
}

This one doesn't make any changes.

If anyone has more, I'd be glad to test them out. Thanks!

Check Ange's reply above, that should work.
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on Thu Dec 24 2015, 15:58

Ange Tuteur wrote:Hi,

Use this CSS code :
Code:
#main-content > .post .postprofile dt img {
  background:#FFF;
  height:100px;
  width:100px;
  border-radius:100px;
  box-shadow:0 2px 3px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.1);
  padding:3px;
}

There's also a number of topics on this :
http://help.forumotion.com/search?search_keywords=circle

We posted at the same time! Yes this works perfectly. Thanks!

Merry Christmas to all, and thanks to everyone who works so hard around here!
avatar
Guardian-Angel
Forumember

Posts : 501
Reputation : 12
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on Thu Dec 24 2015, 16:00

No problem! Make sure to edit this post and mark it as . It makes the work of a staff member much easier! Smile Glad we could help!
avatar
Zuke
Forumember

Male Posts : 385
Reputation : 21
Language : English
Location : United Kingdom

http://droplet.your-talk.com

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on Thu Dec 24 2015, 17:25

FYI I changed the size to 130px and it looks even better!

Topic solved. Smile
avatar
Guardian-Angel
Forumember

Posts : 501
Reputation : 12
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by SLGray on Thu Dec 24 2015, 19:42

Topic solved and archived



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40497
Reputation : 2732
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum