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.

Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

View previous topic View next topic Go down

Solved Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 10th 2016, 7:46 am

Hello! I'm the owner of WiiWareWave and I'd like to force avatars in all parts of my website to be circular like the ones here, and to create a great online offline indicator similar to "not the same" as the one on this website using CSS. My forum is PunBB btw. Wink

Thanks in advance!


Last edited by Rukiafan on February 18th 2016, 8:53 pm; edited 1 time in total
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by SarkZKalie on February 10th 2016, 11:55 am

Add this to your CSS
Code:
.lastpost-avatar img, .avatar-last img, .blog_comment-avatar img {
    border-radius: 100%;
    border: 1px solid gray;
}
avatar
SarkZKalie
Forumember

Male Posts : 595
Reputation : 87
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 10th 2016, 7:39 pm

That did nothing...:|

@Ange Tuteur do you know the Punbb code for the circle avatars?
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by SarkZKalie on February 11th 2016, 1:18 am

What browser are you using? Firefox or Chrome?
avatar
SarkZKalie
Forumember

Male Posts : 595
Reputation : 87
Language : English

http://rotavn.nstars.org/

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 11th 2016, 1:37 am

The Wii U browser, I used every browser option available via. the developers tool, including Chrome, Firefox, Opera, and Internet Explorer and it didn't work on any of them. :|

@SLGray do you know the CSS code that would work on PunBB?
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 17th 2016, 8:25 pm

@Ange Tuteur? Bump. :/
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Ange Tuteur on February 18th 2016, 1:22 pm

Hey,

Add this CSS to your stylesheet :
Code:
.user-basic-info > a:first-child, .lastpost-avatar, td.avatar-mini img, .avatar, .blog_comment-avatar {
  background:#FFF;
  border-radius:100px;
  box-shadow:0px 2px 3px rgba(0, 0, 0, 0.3), 0px -1px 1px rgba(0, 0, 0, 0.3);
  display:inline-block;
  height:100px;
  width:100px;
  padding:3px;
  margin:10px 0;
  overflow:hidden;
}

/* avatar */
.user-basic-info > a:first-child > img, .lastpost-avatar img, td.avatar-mini img, .avatar img, .blog_comment-avatar img {
  border-radius:100px !important;
  height:100px;
  width:100px;
}

.user-basic-info > a:first-child > img, .blog_comment-avatar img {
  border:none;
  box-shadow:none;
  margin:0;
  padding:0;
}

.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
  height:34px;
  width:34px;
}

.friend-block { width:65px }
.friend-block .avatar { margin:0 10px }
.avatar, .avatar img {
  height:40px;
  width:40px;
}

.lastpost-avatar {
  padding:2px !important;
  margin:0px 5px 0px 0px;
}

td.avatar-mini img, .avatar {
  padding:1px;
  margin:0;
}

.avatar { margin-top:2px !important }

.lastpost-avatar, .avatar, td.avatar-mini img {
  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3);
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13179
Reputation : 2884
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 18th 2016, 8:13 pm

@Ange Tuteur That code did absolutely nothing anywhere on my forum including pages that have the default PunBB template...:/
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Vanityy on February 18th 2016, 8:17 pm

What's your forum link?
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 18th 2016, 8:18 pm

avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Vanityy on February 18th 2016, 8:26 pm

Try this:
Code:
.user-basic-infoaimg{
background:#FFF;
height:100px;
width:100px;
border-radius:100px;
box-shadow:02px3pxrgba(0,0,0,0.5),0-1px1pxrgba(0,0,0,0.1);
padding:3px;
}
.mini_avaimg,.lastpost-avatarimg{
background:#FFF;
border-radius:100px;
box-shadow:02px3pxrgba(0,0,0,0.5),0-1px1pxrgba(0,0,0,0.1);
padding:3px;
}
avatar
Vanityy
Helper
Helper

Male Posts : 2336
Reputation : 323
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Ange Tuteur on February 18th 2016, 8:31 pm

I checked your CSS via the devtools and there are some bizarre characters near the indentation :


What browser are you using to copy and paste the code ? Try pasting the minified version instead :
Code:
.avatar,.blog_comment-avatar,.lastpost-avatar,.user-basic-info>a:first-child,td.avatar-mini img{background:#FFF;border-radius:100px;box-shadow:0 2px 3px rgba(0,0,0,.3),0 -1px 1px rgba(0,0,0,.3);display:inline-block;height:100px;width:100px;padding:3px;margin:10px 0;overflow:hidden}.avatar img,.blog_comment-avatar img,.lastpost-avatar img,.user-basic-info>a:first-child>img,td.avatar-mini img{border-radius:100px!important;height:100px;width:100px}.blog_comment-avatar img,.user-basic-info>a:first-child>img{border:none;box-shadow:none;margin:0;padding:0}.lastpost-avatar,.lastpost-avatar img,td.avatar-mini img{height:34px;width:34px}.friend-block{width:65px}.friend-block .avatar{margin:0 10px}.avatar,.avatar img{height:40px;width:40px}.lastpost-avatar{padding:2px!important;margin:0 5px 0 0}.avatar,td.avatar-mini img{padding:1px;margin:0}.avatar{margin-top:2px!important}.avatar,.lastpost-avatar,td.avatar-mini img{box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 1px rgba(0,0,0,.3)}
avatar
Ange Tuteur
Forumaster

Male Posts : 13179
Reputation : 2884
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 18th 2016, 8:42 pm

The Wii U browser...sadly it can't copy the entire code because of limitations... I'll try the new code. Wink
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by Rukiafan on February 18th 2016, 8:52 pm

@Ange Tuteur It worked!!! But now the staff badge code that you made is broken... Embarassed

Anyways as for this topic, it's solved! Wink
avatar
Rukiafan
Forumember

Posts : 293
Reputation : 9
Language : English

Back to top Go down

Solved Re: Circular Avatars In The Blog And Forums And A Snazy Online Status Indicator Like The One On This Forum?

Post by SLGray on February 18th 2016, 11:07 pm

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 : 41158
Reputation : 2812
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