Howto: Make the user profile layout compact (with css only)
Screen Shots:
Before: http://img205.imageshack.us/img205/899/beforedw4.png
After: http://img164.imageshack.us/img164/2630/aftergv7.png
To make the view of the 'user profile' page compact, add the following CSS to the end of your theme's .css file. This is generally better than modifying the profile.css or user.css (or drupal.css in 4.7) directly.
.profile h2.title {
margin-top:13px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.profile dd {
min-height:10px;
margin:5px;
margin-top:13px;
margin-left:180px;
margin-bottom:0px;
padding:0px;
width:200px;
height:auto;
position: relative;
}
.profile dt {
width:180px;
background-color: #DEE;
float:none;
margin-bottom: -27px;
}Alternate version using a floating dt
.profile h2.title {
margin-top: 15px;
border-bottom: 1px solid #777777;
}
.profile dt {
margin: 0;
padding: 2px 3px;
width: 120px;
background-color: #dee;
border-bottom: 1px solid white;
float:left;
}
.profile dd {
margin: 0 0 0 130px;
padding: 2px 3px;
border-bottom: 1px dotted #d9d9ff;
}Note that if the changes aren't showing up it is probably because of caching so clear your browser's cache (F5 works on many browsers.)
Profile Field names that wrap
I have a few profile field names that wrap, which caused a column problem so these are the modifications I did to the above that fixed it.
.profile h2.title {
margin-top:13px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.profile dd {
min-height:10px;
margin:5px;
margin-top:8px;
margin-left:180px;
margin-bottom:0px;
padding:0px;
width:300px;
height:auto;
position: relative;
border-bottom: 1px dotted #d9d9ff;
}
.profile dt {
width:180px;
background-color: #DEE;
border-bottom: 1px solid white;
float:none;
margin-bottom: -30px;
}