OPINIONS WANTED: Member profile template redesign

[bai]

I am not finished yet but this is what I have so far:



Mind you I am figuring things out on my own as a fledgling coder since there doesn't seem to be any member profile template design tutorials lurking around the net. Anyway a big thanks and credit to Nathan Lecompte for the cover photo code. I've been a longtime user of that code and decided to give it - and the rest of the profile - quite a few tweaks.

Code to Nathan's cover photo code:

support.proboards.com/thread/528590/profile-cover-image-plugin-available

Other than the cover photo, user avatar/name/rank placement, and those of about two icons the rest of the tweaks are mine.

Edit: i first posted this in the wrong forum last night. i'm going to make some more tweaks today. 

Known Issues:

Follow button "malfunctions" in that when (1) you click it, it turns to the words "Unfollow" on another user's profile. This can be remedied according to Brian Ordonez through Javascript which I have absolutely NO experience in. (2) The follow button displays on your own personal profile too, which is something I will be looking into today.

I just now added the social media info to the More Information panel about 5 minutes max before this post, so I am still editing how that will look. It looks messy right now.

I plan on fixing issues with plural vs singular words (Likes, Posts, Warning Points, etc.). So that when there is only a value of one (1) for those info centers, the words will not be plural. I have been showed how to do this, I just didn't care to fix it last night.

Not an "issue", but I made the cover photo height larger (original 150 > 200 >250). For now I am happy with this size but if I do make it any bigger I probably won't go over 300 px.

[bai]

Updates

I'm still working on these! They are NOT finished!

Summary




Icons are being used in place of "Last Online", "Location", "Email", and "Latest Status" text. When your mouse pointer hovers over the images a tooltip describes what each is. I plan on putting the Latest status underneath the username and group/rank information soon.

The plural vs singularity code has been added.

Cover Photo by Nathan LeCompte is now 250 pixels high.

Following List and Activity



Only one, barely important thing has changed: I have transferred some code from the friends list (the bit that says "Friends are following each other, #online/#offline) to the following list because the table is prettier. Shoot me.

Friends List



I haven't changed anything here yet, but I plan on doing so. I noticed when my Test account is offline the full mini profile of the account doesn't display like it does below when a Friend is online.




Me no likey mini-mini(-mini?) profile so either I will do that tonight or whenever.

Issues Left to fix:

I've gotta beg someone on here to help me with the Follow button javascript for (1) buttons displaying on a user's own profile and (2) changing the 'Unfollow' text to an icon. The latter is not mandatory because I don't actually care about it that much, but it's an option.

Making the more info panel "prettier" is on the list. It's ugly as sin right now.

The friends list mini-profile vs mini-mini profile battle. That has to go. Too ug-mo for me. (edit: this literally took 2 seconds to change, wow.)

[bai]

Okay now I have more trash to worry about:

the status bar.

It's ugly!!!!!!!!!!!!!!!!



so what i have changed (AGAIN)

I put the latest status, email, and location right underneath the rank/group info; moved the personal website next to the pm/edit profile/follow user icons, and then we have that status....i will have to figure out the css because for whatever reason i cannot move the elements to the place i want them to be. i'm happier with the profile info being compiled into the cover photo area because the extra table with "more info" was too tacky.

haven't been able to figure out if i care to add the social media info back in or not. if i do i will have to figure out how to turn them into icons so i can add them in next to the personal website icon.

[bai]

The status bar saga continues.

Updates:

the More Info panel has been ditched completely. I have spread user info to the cover photo and other regions of the profile.

users with personal site urls will get a world symbol next to the pm/edit profile/follow buttons

issues left to fix:

the status bars from hell

social media icons (optional)

figuring out how to make the CSS and HTML sheets legible in case I put this code up for grabs.

add "last seen" info somewhere, maybe as an icon tooltip if possible