Profile Card UI changes #5858

New Issue

2025-11-02T06:38:31-06:00

GiteaMirror commented

2025-11-02 06:38:31 -06:00

Originally created by @ghost on GitHub (Aug 17, 2020).

Description

Dear Gitea developers!

I highly appreciate your afforts in Gitea development and wanted to thank you for its creation. This platforms is wonderful and had finally provided me an alternative to most Git hosting platforms like GitHub, GitLab. It's highly configurable, lightweight and has easy to use UI.

Nevertheless, with upcoming 1.13 release(which I am really hyped about because of Kanbans), I'd like to suggest you some changes in general UI. This change includes a new profile card which is shown on the profile page of user.

I’ve played with CSS of this profile card and, as a result, got a cleaner look on it: removed these gray/white borders around the whole card, made background to match page’s background, put description right under the profile picture and nickname, made profile picture rounded and made nickname/name fonts bigger a little bit so other users wouldn’t be overwhelmed by profile picture’s sizes. Also I removed icon from profile description because I though it’d look cleaner without any icons, except the ones included in profile description itself.

Why had I done so? Well, to be honest, I can’t fully answer to this question. Not because I have something to hide or pursue my personal goals but because I did so just because I had a feeling of GitHub’s UI looking somewhat stylish and clean. Not going to lie, I really like how GitHub looks like. That’s why this profile card UI reminds GitHub’s so much - I made it with minimalism and informativeness in mind while being inspired by GitHub’s design decisions.

I don't want to say that the whole UI code should be refurbished. But there could be little changes made so Gitea's general look could be improved a bit, made more minimalist, clean and kept highly informative.

I am looking forward for your feedback and opinions on these changes. Thank you for paying attention.

Screenshots

This screenshots shows current profile card which is a default for Gitea(the screenshot was taken from Codeberg website:

This screenshot shows a new profile card which is used on my own Gitea instance:

This screenshot shows a profile card which is currently used on GitHub and from which I've taken my inspiration:

This screenshot shows a profile card which is used by GitLab:

Last two screenshots were provided as a comparison to the changes I've made.

Originally created by @ghost on GitHub (Aug 17, 2020).   ## Description Dear Gitea developers! I highly appreciate your afforts in Gitea development and wanted to thank you for its creation. This platforms is wonderful and had finally provided me an alternative to most Git hosting platforms like GitHub, GitLab. It's highly configurable, lightweight and has easy to use UI. Nevertheless, with upcoming 1.13 release(which I am really hyped about because of Kanbans), I'd like to suggest you some changes in general UI. This change includes a new profile card which is shown on the profile page of user. I’ve played with CSS of this profile card and, as a result, got a cleaner look on it: removed these gray/white borders around the whole card, made background to match page’s background, put description right under the profile picture and nickname, made profile picture rounded and made nickname/name fonts bigger a little bit so other users wouldn’t be overwhelmed by profile picture’s sizes. Also I removed icon from profile description because I though it’d look cleaner without any icons, except the ones included in profile description itself. Why had I done so? Well, to be honest, I can’t fully answer to this question. Not because I have something to hide or pursue my personal goals but because I did so just because I had a feeling of GitHub’s UI looking somewhat stylish and clean. Not going to lie, I really like how GitHub looks like. That’s why this profile card UI reminds GitHub’s so much - I made it with minimalism and informativeness in mind while being inspired by GitHub’s design decisions. I don't want to say that the whole UI code should be refurbished. But there could be little changes made so Gitea's general look could be improved a bit, made more minimalist, clean and kept highly informative. I am looking forward for your feedback and opinions on these changes. Thank you for paying attention. ## Screenshots  This screenshots shows current profile card which is a default for Gitea(the screenshot was taken from [Codeberg website](https://codeberg.org): ![Screenshot_2020-08-16 makkusu(1)](https://user-images.githubusercontent.com/68738973/90379969-22a89580-e084-11ea-92ac-d9731a5a6043.png) This screenshot shows a new profile card which is used on my own Gitea instance: ![Screenshot_2020-08-16 makkusu(2)](https://user-images.githubusercontent.com/68738973/90379976-263c1c80-e084-11ea-9a84-e49cd3d13f5c.png) This screenshot shows a profile card which is currently used on GitHub and from which I've taken my inspiration: ![image](https://user-images.githubusercontent.com/68738973/90380284-8c28a400-e084-11ea-8748-a9cb21f8e328.png) This screenshot shows a profile card which is used by GitLab: ![image](https://user-images.githubusercontent.com/68738973/90380474-c5611400-e084-11ea-929a-3d6733e7ba3f.png) Last two screenshots were provided as a comparison to the changes I've made.

GiteaMirror added the type/proposal topic/ui labels 2025-11-02 06:38:31 -06:00

GiteaMirror closed this issue

2025-11-02 06:38:31 -06:00

GiteaMirror commented

2025-11-02 06:38:32 -06:00

@ghost commented on GitHub (Aug 19, 2020):

There're also other variants which would distinguish Gitea from other platforms in terms of profile page layouts and design - by using tear drops:

These changes do look unique and stylish, in my humble opinion. Nevertheless, since circled profile pictures become a standard around the web, so we could keep working on circled profile picture and create cleaner, harmonic profile card.

@ghost commented on GitHub (Aug 19, 2020): There're also other variants which would distinguish Gitea from other platforms in terms of profile page layouts and design - by using tear drops: ![image](https://user-images.githubusercontent.com/68738973/90670841-74a41380-e25c-11ea-8d62-a8074af7f477.png) ![image](https://user-images.githubusercontent.com/68738973/90670862-82f22f80-e25c-11ea-9226-bf9090f22081.png) These changes do look unique and stylish, in my humble opinion. Nevertheless, since circled profile pictures become a standard around the web, so we could keep working on circled profile picture and create cleaner, harmonic profile card.

GiteaMirror commented

2025-11-02 06:38:33 -06:00

@lafriks commented on GitHub (Aug 21, 2020):

Imho circle looks best

@lafriks commented on GitHub (Aug 21, 2020): Imho circle looks best

GiteaMirror commented

2025-11-02 06:38:33 -06:00

@ghost commented on GitHub (Aug 25, 2020):

This is how the whole page would look like with arc-dark:

And this is the whole page with default gitea theme:

Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub?

@ghost commented on GitHub (Aug 25, 2020): This is how the whole page would look like with arc-dark: ![image](https://user-images.githubusercontent.com/70054539/91211297-394f8c00-e717-11ea-9164-5c2e494059f9.png) And this is the whole page with default gitea theme: ![image](https://user-images.githubusercontent.com/70054539/91211381-5dab6880-e717-11ea-9a86-55032d73c996.png) Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub?

GiteaMirror commented

2025-11-02 06:38:33 -06:00

@jolheiser commented on GitHub (Aug 25, 2020):

Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub?

It will need to override any semantic styles, as fomantic is pulled in directly.
Probably in _user.less.

The PR can be to here on GitHub, currently the repo on gitea.com is a mirror. 🙂

@jolheiser commented on GitHub (Aug 25, 2020): > Should I change semantic.min.css file in the Gitea repository for this and make a pull request? And where would it be better to do - gitea.com website or on GitHub? It will need to override any semantic styles, as fomantic is pulled in directly. Probably in [_user.less](https://github.com/go-gitea/gitea/blob/master/web_src/less/_user.less). The PR can be to here on GitHub, currently the repo on gitea.com is a mirror. 🙂

GiteaMirror commented

2025-11-02 06:38:33 -06:00

@Extarys commented on GitHub (Sep 4, 2020):

I personally like the teardrop. Could we use a instance-wide setting to control the shape of the profile picture?

@Extarys commented on GitHub (Sep 4, 2020): I personally like the teardrop. Could we use a instance-wide setting to control the shape of the profile picture?

GiteaMirror commented

2025-11-02 06:38:34 -06:00

@lafriks commented on GitHub (Sep 4, 2020):

@Extarys you can always add additional CSS to your deployment to customize your instance look

@lafriks commented on GitHub (Sep 4, 2020): @Extarys you can always add additional CSS to your deployment to customize your instance look

GiteaMirror commented

2025-11-02 06:38:34 -06:00

@Extarys commented on GitHub (Sep 4, 2020):

@lafriks Indeed, so in the end, the shape of the avatar shipped by Gitea doesn't really matter. CSS FTW

@Extarys commented on GitHub (Sep 4, 2020): @lafriks Indeed, so in the end, the shape of the avatar shipped by Gitea doesn't really matter. CSS FTW

GiteaMirror commented

2025-11-02 06:38:37 -06:00

@6543 commented on GitHub (Oct 24, 2020):

I like to stay square-shaped, if you like teardrops or circles, you can use gimp to modify your avatar. The other way around is mouch harder(you will get tiny images :( )

If liked I can provide some examples ...

@6543 commented on GitHub (Oct 24, 2020): I like to **stay** square-shaped, if you like teardrops or circles, you can use gimp to modify your avatar. The other way around is mouch harder(you will get tiny images :( ) If liked I can provide some examples ...

GiteaMirror commented

2025-11-02 06:38:37 -06:00

@6543 commented on GitHub (Oct 24, 2020):

I think https://codeberg.org/Codeberg/build-deploy-gitea/pulls/30#issuecomment-76507 got it the best ... let users deside themselve how they like to represent themselve

@unknownguydk just an idear: add a function to specify the shape on upload, may be an option to get all users happy?

@6543 commented on GitHub (Oct 24, 2020): I think https://codeberg.org/Codeberg/build-deploy-gitea/pulls/30#issuecomment-76507 got it the best ... let users deside themselve how they like to represent themselve @unknownguydk just an idear: add a function to specify the shape on upload, may be an option to get all users happy?

GiteaMirror commented

2025-11-02 06:38:37 -06:00

@ghost commented on GitHub (Dec 25, 2020):

I will be closing this issue for now because it has been inactive for nearly 3 months and I have nothing to add here. I highly appreciate your replies and suggestions, thank you for them! As far as I gain enough experience in web development, I will open a pull request with function in settings which would allow user to determine the shape of his profile card, therefore I would adopt @6543's suggestion.
Again, thank you and stay healthy 😄

@ghost commented on GitHub (Dec 25, 2020): I will be closing this issue for now because it has been inactive for nearly 3 months and I have nothing to add here. I highly appreciate your replies and suggestions, thank you for them! As far as I gain enough experience in web development, I will open a pull request with function in settings which would allow user to determine the shape of his profile card, therefore I would adopt @6543's suggestion. Again, thank you and stay healthy 😄

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#5858