• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Profile page stats in line

Profile page stats in line

Save some vertical space and fill up the empty space to the right

Brogan

XenForo moderator
Staff member
#1
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

Well-known member
#3
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

Well-known member
#5
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
#8
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
#10
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
#11
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
#14
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
#16
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
#19
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.