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

Rukiafan
Forumember

Posts : 258
Reputation : 8
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;
}

SarkZKalie
Forumember

Male Posts : 419
Reputation : 73
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?

Rukiafan
Forumember

Posts : 258
Reputation : 8
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?

SarkZKalie
Forumember

Male Posts : 419
Reputation : 73
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?

Rukiafan
Forumember

Posts : 258
Reputation : 8
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. :/

Rukiafan
Forumember

Posts : 258
Reputation : 8
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);
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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

Rukiafan
Forumember

Posts : 258
Reputation : 8
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 Genesis on February 18th 2016, 8:17 pm

What's your forum link?

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
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


Rukiafan
Forumember

Posts : 258
Reputation : 8
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 Genesis 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;
}

Genesis
Forum Reviewer
Forum Reviewer

Male Posts : 2331
Reputation : 322
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)}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

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

Rukiafan
Forumember

Posts : 258
Reputation : 8
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

Rukiafan
Forumember

Posts : 258
Reputation : 8
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.


SLGray
Administrator
Administrator

Male Posts : 35641
Reputation : 2374
Language : English
Location : United States

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