Profile page stats in line

Profile page stats in line

Paul B

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...
 
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.webp
 
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.webp

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.webp
 
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.webp

Any suggestions?
 
Not the type of answer I was hoping for Brogan but thanks anyway...some of my users get a bit flamboyant with these fields
 
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.
 
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.webp

But it does at least wrap.

Honestly though, I wouldn't worry about it too much for reasons which shall become obvious later.
 
oops, spoke too soon...screws up the top info box that has Last Activity, Joined etc...will just have to wait...thanks anyway
 
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 Bottom