Profile page stats in line

[Paul B]

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:

/* 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...

 

[Mutt]

thanks

 

[Jeremy]

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:

 

[Paul B]

I wouldn't bother messing with it too much

 

[Jeremy]

I wouldn't bother messing with it too much

Subtle hint that its going to be formatted this way in a future release?

I added in a margin-top: 5px; and got it spaced out more (not my intention, but it works), but it looks aligned now:


Edit: Removing the margin-top: 5px; from .profilePage .infoBlock dt works to fix it without sacrificing vertical space:

 

[masterchief]

how to widen sidebar to 246px .. ????

 

[Paul B]

Style Properties -> Member Profile Page

 

[ibaker]

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:


Any suggestions?

 

[Paul B]

Make the sidebar wider?

 

[ibaker]

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

 

[Paul B]

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.

 

[ibaker]

But it wraps automatically...it just won't start on the same line as the title

 

[Jeremy]

But it wraps automatically...it just won't start on the same line as the title

That's the nature of floating content.

 

[Paul B]

OK, try this.

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

Change the 100px to suit.

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


But it does at least wrap.

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

 

[ibaker]

LOL...I knew you would come through Brogan...as always, thank you very much

 

[ibaker]

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

 

[Teapot]

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

You tease!

 

[aiman.h.kallaf]

it is great to increase the side bar but that would make the profile picture look bad

 

[Paul B]

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

 

[aiman.h.kallaf]

worked like a charm