# New user cards and user profile page design deployed
**URL:** https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660
**Category:** Feature
**Created:** [30 Ottobre 2014, 12:42am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660 "2014-10-30T00:42:25Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [30 Ottobre 2014, 12:42am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/1 "2014-10-30T00:42:25Z")
Looking great, thanks to the hard work of @awesomerobot.
Check it out and see what you think – both the full user profile, and the pop up cards.
Note that you can put a badge image or glyph on your card, if you hold a badge that is capable.
More tweaks to come, but initial feedback is good at this point.
---
### Author:  [@naiqus](https://meta.discourse.org/u/naiqus)
#### Post date: [30 Ottobre 2014, 12:50am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/2 "2014-10-30T00:50:15Z")
This is just kind of like… Wooooow!!! Just can’t wait for the update of my site!
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [30 Ottobre 2014, 1:01am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/3 "2014-10-30T01:01:11Z")
cool!
one nitpick: on Windows Chrome, many usercards I’ve looked at now have this scrollbar, which I find a little annoying / out of place…
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [30 Ottobre 2014, 1:47am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/4 "2014-10-30T01:47:15Z")
User cards do need to show join date and last post date. Location would also be nice, but maybe could be dropped. But I use last post date and join date to quickly tell if I am dealing with a newbie or lurker.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2 Novembre 2014, 3:05am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/8 "2014-11-02T03:05:26Z")
Just added join/last post/groups to usercard
[https://github.com/discourse/discourse/pull/2939](https://github.com/discourse/discourse/pull/2939)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2 Novembre 2014, 4:32am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/9 "2014-11-02T04:32:56Z")
- ~~buttons (invites, logout, preferences) on full profile page not appearing properly in IE11~~ seems OK to me now
- group membership is not visible on full profile page any more, but should be (somewhere)
- ~~you open a User Card (the thing that pops up when you click on a username) and they have the icon for a badge selected to show then you get slightly different results if you middle click it or left click it. It looks like the badge coloring class in the CSS isn’t being filled in fully in one of the cases (“badge-type-” instead of “badge-type-[color]”).~~ we can’t repro this?
---
### Author:  [@TechnoBear](https://meta.discourse.org/u/TechnoBear)
#### Post date: [2 Novembre 2014, 10:52am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/10 "2014-11-02T10:52:37Z")
> [@mcwumbly](#):
>
> on Windows Chrome, many usercards I’ve looked at now have this scrollbar
Firefox 33 on Ubuntu Gnome - no scroll bar, resulting in missing text.
I usually view the site with text zoomed to 110%:
but even at 100% there is still an issue:
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2 Novembre 2014, 10:58am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/11 "2014-11-02T10:58:15Z")
Maybe a “more” ellipsis for those with longer content would be easy?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2 Novembre 2014, 7:06pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/12 "2014-11-02T19:06:20Z")
Yeah, right now long profiles are hidden with CSS, which has been causing a few problems… seems like it should definitely have a character limit where it’s truncated with JS and an ellipsis gets added.
It’s easy to truncate single-line text with CSS and `text-overflow: ellipsis;` but it just doesn’t work on multiline text.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2 Novembre 2014, 8:21pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/13 "2014-11-02T20:21:45Z")
Suspended users also cause layout problems on the user card
---
### Author:  [@PJH](https://meta.discourse.org/u/PJH)
#### Post date: [3 Novembre 2014, 1:02pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/14 "2014-11-03T13:02:49Z")
@mentions need some CSS I think. Profile page:
User card:
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [3 Novembre 2014, 5:06pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/15 "2014-11-03T17:06:15Z")
Do you have a custom CSS for mentions? I can’t seem to reproduce this locally. The class is applied to the HTML but I don’t get a grey background.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [3 Novembre 2014, 5:06pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/16 "2014-11-03T17:06:43Z")
I’ve added a little helper to display multiple lines of text with an ellpisis.
[https://github.com/discourse/discourse/commit/bab4f48eebbcfa975ea3b0eb83b659ac994dab3a](https://github.com/discourse/discourse/commit/bab4f48eebbcfa975ea3b0eb83b659ac994dab3a)
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [3 Novembre 2014, 9:38pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/17 "2014-11-03T21:38:21Z")
I find the way it load is a bit startling.
Perhaps something like this
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [3 Novembre 2014, 9:45pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/18 "2014-11-03T21:45:37Z")
I’m gonna see what I can do to make the loading / popping in less jarring Tomorrow.
---
### Author:  [@PJH](https://meta.discourse.org/u/PJH)
#### Post date: [3 Novembre 2014, 9:47pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/19 "2014-11-03T21:47:32Z")
> [@eviltrout](#):
>
> Do you have a custom CSS for mentions?
Ick - keep meaning to remove that before reporting CSS stuff - yes we do - to underline proper links, but needed extra to not underline @mentions or faux-links - I’ll have a poke around with it.
However, forcing removal of site-local CSS doesn’t seem to help: [http://what.thedailywtf.com/users/pjhh/activity?preview-style=default](http://what.thedailywtf.com/users/pjhh/activity?preview-style=default)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [3 Novembre 2014, 9:49pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/20 "2014-11-03T21:49:04Z")
- ~~remove glyphs from the “Last post” metadata line, use dark/light coloring there to distinguish key and value pairs ala the regular user page. (These metadata glyphs fight visually with the badge glyphs)~~
- ~~remove groups info, this is too much detail to show on the user card~~
- try to do a “fade” effect on the last line of the user about me if it has the ellipsis like so [Text Fade Out / Read More Link | CSS-Tricks](http://css-tricks.com/text-fade-read-more/)
---
### Author:  [@PJH](https://meta.discourse.org/u/PJH)
#### Post date: [3 Novembre 2014, 9:49pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/21 "2014-11-03T21:49:30Z")
Reproducible here:
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [4 Novembre 2014, 7:26pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/23 "2014-11-04T19:26:10Z")
Thanks, I was dumb when I tried to reproduce it and didn’t mention an actual person on the site. I’ve got a fix in master:
[https://github.com/discourse/discourse/commit/74e2b8f6746afbb3404fade83cd157327daa8a51](https://github.com/discourse/discourse/commit/74e2b8f6746afbb3404fade83cd157327daa8a51)
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4 Novembre 2014, 8:35pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/24 "2014-11-04T20:35:07Z")
Few other changes..
### Suppress post count button when in filtered view
### If the badge has an image vs an icon, use a larger space for the badge image
I think we should **make the card a bit wider** when the user has a badge image as well.
[Pagina seguente](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660.md?page=2)