# 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 באוקטובר,‏ 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:** 2

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [4 בנובמבר,‏ 2014,‏ 9:31pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/25 "2014-11-04T21:31:48Z")

</div>

I just committed a couple of patches to master for this stuff, should be up soon.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [4 בנובמבר,‏ 2014,‏ 9:43pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/26 "2014-11-04T21:43:31Z")

</div>

we have a garbage problem.

 ![](https://global.discourse-cdn.com/meta/original/3X/a/0/a0cd0ee619e4fb9fea6ba2cdeb1745468a2b8a5e.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4 בנובמבר,‏ 2014,‏ 9:55pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/27 "2014-11-04T21:55:41Z")

</div>

~~We could just remove the Profile button, under the assumption that people know to click the name / avatar to get the full user page?~~

This is now done. Get to profile by clicking / tapping the big user avatar or name on the expanded card.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [4 בנובמבר,‏ 2014,‏ 11:47pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/28 "2014-11-04T23:47:22Z")

</div>

@eviltrout group info is not shown on the full user page, but should be.. somewhere. Maybe in the key/value pairs at the bottom of the about me? Just comma delimited list of groups maybe?

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [5 בנובמבר,‏ 2014,‏ 2:21am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/29 "2014-11-05T02:21:26Z")

</div>

> [@codinghorror](#):
>
> Note that you can put a badge image or glyph on your card, if you hold a badge that is capable.

How does one make a badge capable of doing this? I though it would be by enabling “Allow badge to be used as a title” but that didn’t work.

---

<div class="post-metadata">

### Author: ![wesochuck](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wesochuck/32/108706_2.png) [@wesochuck](https://meta.discourse.org/u/wesochuck)
#### Post date: [5 בנובמבר,‏ 2014,‏ 5:02am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/30 "2014-11-05T05:02:29Z")

</div>

> [@downey](#):
>
> How does one make a badge capable of doing this?

Look for the **User Card Badge** section in User Preferences. It is right below the space where you can enter in your web site URL.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [5 בנובמבר,‏ 2014,‏ 6:38am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/31 "2014-11-05T06:38:26Z")

</div>

> [@wesochuck](#):
>
> Look for the User Card Badge section in User Preferences. It is right below the space where you can enter in your web site URL.

Yes, I see that, but all I see is `<none>` in the drop-down list; no badges, which is why I asked my question about how to make a badge capable of appearing in this list.

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [5 בנובמבר,‏ 2014,‏ 6:56am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/32 "2014-11-05T06:56:34Z")

</div>

AFAIK not all Badges can be used as titles (go to their pages and look for the checkmark at the right next to allow as title)  
eg.

> **[@downey](https://meta.discourse.org/users/downey/badges)**
>
> Discourse old-timer. Open source programs at United Nations Development Programme (UNDP). Previously: United Nations Foundation OSPO, OpenMRS Director of Community. Past recipient of FSF Award for Projects of Social Benefit. Advis…

“regular” should be available to use  
[https://meta.discourse.org/badges/3/regular](https://meta.discourse.org/badges/3/regular)  
as is  
[https://meta.discourse.org/badges/114/bug-reporter](https://meta.discourse.org/badges/114/bug-reporter)

But in terms of the “User Badge Card” glyph, I’m not seeing those similar in my Preferences either  
A WIP or in need of clarification?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 11:03am UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/33 "2014-11-05T11:03:22Z")

</div>

You have to set the Badge Image property (on the Badge itself) for it to be enabled on the User Card.

---

<div class="post-metadata">

### Author: ![downey](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/downey/32/166878_2.png) [@downey](https://meta.discourse.org/u/downey)
#### Post date: [5 בנובמבר,‏ 2014,‏ 2:34pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/34 "2014-11-05T14:34:00Z")

</div>

> [@cpradio](#):
>
> You have to set the Badge Image property (on the Badge itself) for it to be enabled on the User Card.

Thanks, that worked.

Perhaps it’s a different topic, but that could use some clarification, as there’s no clarification in the UI about the difference between “Icon” and “Image” and what “Image” is used for (e.g., user card).

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [5 בנובמבר,‏ 2014,‏ 8:12pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/35 "2014-11-05T20:12:56Z")

</div>

Yeah, the admin UI for this needs improvement. “User card display image” maybe?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 8:15pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/36 "2014-11-05T20:15:00Z")

</div>

Still have image overlapping buttons (/latest page, click on eviltrout’s avatar)  
 ![](https://global.discourse-cdn.com/meta/original/3X/e/b/eb132f6aa2044673e425f65d3ed9cf3481c0f8cd.png)

Why does the badge image have to be that large? Twice the size of the badge icon seems fair to me… I’m not sure it needs to be 10 times the size.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5 בנובמבר,‏ 2014,‏ 8:22pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/37 "2014-11-05T20:22:12Z")

</div>

I am not sure about the size either. But it’s weird that the button appears so low. Shouldn’t it be at the top? Will look into that.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 8:25pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/38 "2014-11-05T20:25:28Z")

</div>

> [@eviltrout](#):
>
> I am not sure about the size either.

I don’t feel too strongly about it, as I don’t see our community using them, so consider it more curiosity than anything else (trying to see the other side’s point of view). I’m more looking for the motivation of having it larger than the badge icon, why doesn’t the icon get blown up too (more so than it is right now)?

> [@eviltrout](#):
>
> But it’s weird that the button appears so low. Shouldn’t it be at the top?

Agreed, keep in mind if there are any scenarios that show 3 buttons there, the issue will persist. ☹

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [5 בנובמבר,‏ 2014,‏ 8:38pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/39 "2014-11-05T20:38:49Z")

</div>

This is weird, I tried to reproduce it but the card looks like this to me:

![](https://global.discourse-cdn.com/meta/original/3X/b/7/b7489e826d78508317e473642527d813bd8d8748.png)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [5 בנובמבר,‏ 2014,‏ 9:06pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/40 "2014-11-05T21:06:26Z")

</div>

I looks OK for me using Firefox

 ![](https://global.discourse-cdn.com/meta/original/3X/6/6/668028a6a5f247eccb1fd8149b7dab7b0709be07.png) 

It looks like a “float left” issue in whatever browser @cpradio was using

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 9:47pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/41 "2014-11-05T21:47:14Z")

</div>

Chrome 38 on Windows 7 pro

---

<div class="post-metadata">

### Author: ![Sailsman63](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@Sailsman63](https://meta.discourse.org/u/Sailsman63)
#### Post date: [5 בנובמבר,‏ 2014,‏ 9:49pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/42 "2014-11-05T21:49:06Z")

</div>

On Chrome Version 38.0.2125.111 m, Win 7 pro, all “important” updates, I get this image:  
If I view with IE 11.0.9600.17358, Same system, things are where they are expected to be.

![](https://global.discourse-cdn.com/meta/original/3X/a/2/a21d4ec5b3b8fe8c6812227e6714941d338f937c.PNG)

@cpradio, @eviltrout: I actually kind of like the garbage bag flowing _over_ the buttons, as long as it does not make them unreadable.

And, of course, @cpradio is using the same browser I am. Awesome ninja skills!

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 9:56pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/43 "2014-11-05T21:56:21Z")

</div>

Happens on Chrome 38 on Windows 7 Home Premium too

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [5 בנובמבר,‏ 2014,‏ 9:58pm UTC](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660/44 "2014-11-05T21:58:49Z")

</div>

For whatever reason, the following is what is pushing it down, when I strike it out, it goes to the correct top position

```plaintext
ul, ol, dd { 
   margin: 0 0 9px 25px;
}

```

[Previous page](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660.md?page=1)

[Next page](https://meta.discourse.org/t/new-user-cards-and-user-profile-page-design-deployed/21660.md?page=3)
