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 December 23rd 2015, 11:22 pm

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

Guardian-Angel
Forumember

Posts : 437
Reputation : 8
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on December 24th 2015, 1:54 pm

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 ?


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 December 24th 2015, 2:00 pm

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 December 24th 2015, 2:19 pm; edited 1 time in total

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on December 24th 2015, 2:11 pm

@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.

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 December 24th 2015, 2:20 pm

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

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Circle Avatar

Post by Kiyomizu on December 24th 2015, 2:31 pm

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.

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 December 24th 2015, 2:37 pm

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

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Circle Avatar

Post by Ange Tuteur on December 24th 2015, 2:45 pm

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on December 24th 2015, 2:55 pm

@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!

Guardian-Angel
Forumember

Posts : 437
Reputation : 8
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on December 24th 2015, 2:57 pm

@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.

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on December 24th 2015, 2:58 pm

@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!

Guardian-Angel
Forumember

Posts : 437
Reputation : 8
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by Zuke on December 24th 2015, 3:00 pm

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!

Zuke
Forumember

Male Posts : 379
Reputation : 20
Language : English
Location : United Kingdom

http://ocean.forums.fm

Back to top Go down

Solved Re: Circle Avatar

Post by Guardian-Angel on December 24th 2015, 4:25 pm

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

Topic solved. Smile

Guardian-Angel
Forumember

Posts : 437
Reputation : 8
Language : English

http://www.bachandbachettefans.net/forum

Back to top Go down

Solved Re: Circle Avatar

Post by SLGray on December 24th 2015, 6:42 pm

Topic solved and archived



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


SLGray
Administrator
Administrator

Male Posts : 36657
Reputation : 2443
Language : English
Location : United States

http://ztwds.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