Profile page stats in line

Profile page stats in line

Brogan

XenForo moderator
Staff member
Brogan submitted a new resource:

Profile page stats in line - Save some vertical space and fill up the empty space to the right

This really only works if the sidebar is wider than the default, otherwise there isn't enough horizontal width.

Mine has been increased to 246px to enable YouTube videos to be displayed correctly.

Simply add the following to EXTRA.css:
Code:
/* Member profile page stats in line */
.profilePage .infoBlock dt {
float: left;
clear: both;
}
 
.profilePage .infoBlock dd {
float: right;
display: block;
}

The result is as follows:

View attachment 44958

Here's how it looks in...

Read more about this resource...
 

Jeremy

in memoriam 1991-2020
Looks a lot better, but its slightly off on the vertical align... I'll mess with it later to see if I can get it to align better:
Screen Shot 2013-04-22 at 11.22.03 AM.png
 

Jeremy

in memoriam 1991-2020
I wouldn't bother messing with it too much ;)
Subtle hint that its going to be formatted this way in a future release? :cautious:

I added in a margin-top: 5px; and got it spaced out more (not my intention, but it works), but it looks aligned now:
Screen Shot 2013-04-22 at 11.27.47 AM.png

Edit: Removing the margin-top: 5px; from .profilePage .infoBlock dt works to fix it without sacrificing vertical space:
Screen Shot 2013-04-22 at 11.32.25 AM.png
 

ibaker

Well-known member
Thanks Brogan

I have one issue where the fields of Location and Occupation (mine says Aircraft) doesn't place the first words that will fit on the line:
1.jpg

Any suggestions?
 

ibaker

Well-known member
Not the type of answer I was hoping for Brogan but thanks anyway...some of my users get a bit flamboyant with these fields
 

Brogan

XenForo moderator
Staff member
Well there's not a lot that can be done for content which is too wide for the container.

Not sure what type of answer you were expecting.
 

Brogan

XenForo moderator
Staff member
OK, try this.

Code:
.profilePage .infoBlock dd {
float: right;
display: block;
width: 100px;
}

Change the 100px to suit.

That will actually change how the text aligns, like so:
stats.PNG

But it does at least wrap.

Honestly though, I wouldn't worry about it too much for reasons which shall become obvious later.
 

ibaker

Well-known member
oops, spoke too soon...screws up the top info box that has Last Activity, Joined etc...will just have to wait...thanks anyway
 

Brogan

XenForo moderator
Staff member
Code:
.profilePage .avatarScaler img {
max-width: 246px;
}
Change the size to suit.

You will need to upload an avatar wide enough to take advantage of the increased width.
 
Top