Flair

beer-671988_741d6_hd.jpeg


 
Mavric said:
I had a terrible time finding a decent pic of Walters.  If anyone has a better one, I'm open to it.

Or if anyone has a different idea other than the pics of coaches, open to that as well.
Click to expand...




I think hypothetically the coaches pictures would be fine but make them tiny and make everything much more horizontally laid out. 

The flair, the avatar, and donor status for some is making posts much taller than they need to be and looks extremely cluttered. If flair and donor bits were wide and super short it would clean the space up a lot. Something along the lines of this:

Eo3TH0j.jpg


 
Landlord said:
I think hypothetically the coaches pictures would be fine but make them tiny and make everything much more horizontally laid out. 

The flair, the avatar, and donor status for some is making posts much taller than they need to be and looks extremely cluttered. If flair and donor bits were wide and super short it would clean the space up a lot. Something along the lines of this:
Click to expand...


I agree that does look a lot better.  But I don't think I can change the layout like that.  I'm pretty sure it's built into the board software.

I could shrink the pics more.  I wasn't sure where the line was between conserving space and having them recognizable.

 
Mavric said:
I agree that does look a lot better.  But I don't think I can change the layout like that.  I'm pretty sure it's built into the board software.
Click to expand...


tvHTydu.gif


I could give you some CSS to change the layout if you want. It would just need to be copied & pasted in. Just as a quick & dirty test in my browser, this is what I came up with. If you're interested, I could polish it up a little more.

1humcrB.png


Code: 
/* user info container */
.cAuthorPane_info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 170px;
}

.cAuthorPane_info li {
  order: 20;
}

/* user title icon container */
.cAuthorPane_info li:nth-child(2) {
  order: 0;
}

/* user title icon */
.cAuthorPane_info li:nth-child(2) img {
  width: 20px;
}

/* user title text */
.cAuthorPane_info li:nth-child(1) {
  /*! width: 100px; */
  flex: 0 0 150px;
  text-align: left;
  order: 1;
  box-sizing: border-box;
  padding-left: 1em;
}

/* user group text (members/donors/mods/admins) */
.cAuthorPane_info li:nth-child(4) {
  flex: 0 0 150px;
  text-align: left;
  order: 3;
  box-sizing: border-box;
  padding-left: 1em;
}

/* user group icon container */
.cAuthorPane_info li:nth-child(5) {
  order: 2;
}

/* user group icon */
.cAuthorGroupIcon {
  width: 20px;
}

/* avatar container */
.cAuthorPane_photo {
  flex: 0 0 100%;
  order: 10;
}
 
@knapplc Sure, rearranging things would mostly just be a matter of changing the order attributes above, and this would make avatars square:

Code: 
.cAuthorPane_photo img {
	border-radius: 0;
}
 
Back
Top