The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Online icon for Invision

3 posters

Go down

Solved Online icon for Invision

Post by runawayhorses August 18th 2012, 1:42 pm

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

Online icon for Invision Avataronline


Last edited by runawayhorses on August 20th 2012, 8:13 am; edited 1 time in total
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by runawayhorses August 19th 2012, 5:10 pm

Bump

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

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by LGforum August 19th 2012, 9:09 pm

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.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Online icon for Invision

Post by runawayhorses August 19th 2012, 10:51 pm

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?

Online icon for Invision Onliness
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by LGforum August 20th 2012, 2:59 am

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

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Solved Re: Online icon for Invision

Post by runawayhorses August 20th 2012, 8:08 am

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.

Online icon for Invision Profileblock
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by Sanket August 20th 2012, 8:42 am

Topic Solved & Locked
Sanket
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai

Back to top Go down

Back to top

- Similar topics

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