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.

Online icon for Invision

View previous topic View next topic Go down

Solved Online icon for Invision

Post by runawayhorses on 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



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

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

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

Bump

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

runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by LGforum on 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
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Online icon for Invision

Post by runawayhorses on 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?


runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

Post by LGforum on 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
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Online icon for Invision

Post by runawayhorses on 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.


runawayhorses
Hyperactive

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

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Online icon for Invision

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

Topic Solved & Locked

Sanket
ForumGuru

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

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