Online icon for Invision

As you can see from this screenshot the online icon is to the left of my name "runawayhorses' the first name on top of this screenshot, its the little round blue icon. I would like to put a wider online icon above the names so the width of the online icon doesn't push the names farther to the right. So my question is how do you make it so the users online status icon appears above there name and avatar? I'm using Invision. thanks

Bump

Anyway to put the online icon above the avatar and name for Invision?

Yes, posts are given the classname 'online' when the user is online.

Code:


.post.online .postprofile .popmenubutton a:before {
  content: 'Online';
}


Add colors, and such things to your liking.

Here is what it looks like when I added that code. It doesn't break into a second line above the users name, and it positions itself to the left side of the online icon. I like this code for the text "online" and will use it as opposed to a icon if I can get it to position above the users name in the center. So how can I position this code above the users name, centered?

Just give it a display property of 'block'

Code:

.post.online .postprofile .popmenubutton a:before {
  content: 'Online';
  display: block;
}


As long as you've got the actual text within that box centered it should give you what you want.

If the text in that box isn't centered then this will center it:

Code:

.post .postprofile .popmenubutton {
  text-align: center;
}


Ok thanks LG. When I added the "block" it pushed the user name down too far and as a result the name ran into the avatar. Also you can see there is a little arrow to the right of the user name that when clicked displays profile options (i.e. send PM, view profile, etc) and that could not be closed again because the box it displays when opened covers the arrow to close it. So I decided to put the online "inline" like you see in this screenshot below. What I did was created a transparent 10x10 icon to give a space between the online text and the user name which goes in AP>>Display>>Pic Management. Since the icon in pic management is already coded to be placed next to the user name it was the obvious place to add a spacer between the text "0nline" and the user name.

Thanks again, this is solved.