Howto: Make the user profile layout compact (with css only)
Last modified: February 6, 2009 - 15:33
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: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;
}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.)
For Drupal 6 - Garland Theme
.profile h2.title {
margin-top:1.5em;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.profile dd {
min-height:0em;
margin:.0em;
margin-top:-1.4em;
margin-left:18em;
margin-bottom:1em;
padding:0em;
width:30em;
height:auto;
position: relative;
border-bottom: 1px dotted #d9d9ff;
}
.profile dt {
width:18em;
background-color: #DEE;
border-bottom: 1px solid white;
float:none;
margin-bottom: 0em;
}
problem IE
if and when i use -1em or - what ever number
then it does not render/show correctly in IE does in firefox but not in IE
(i am running drupal 6.9 with Bealestreet-6.x-1.0a1 )
i made the adjustments to my my_content.css ( i use that instead of content.css)
so when i put in .profile dd ( happends to when i do that with the .profile dt etc.)
margin-top:-1em;
then it shows correct in firefox but not in IE
when i change that to something without the - or leave it out then pic shows correct in both browsers
but the text ( category fields then have to much spacing and show up wrong)
any one know how to fix that?
-------------------------------------------------------
ok i now have this and this does work for me on firefox and IE
running drupal 6.9 with Bealestreet-6.x-1.0a1 :
/* testing profile */
.profile {
clear: both;
margin: 0.5em 0;
border: 2px solid #5B8261;
}
.profile .picture {
float:left;
margin: 1em 1em 1em 0.5em;
}
.profile h3 {
border-bottom: 0px solid #5b8261;
color: #5B8261;
padding: 0px 0px;
}
.profile h2.title {
margin-top: 15px;
border-bottom: 0px solid #5b8261;
}
.profile dt {
margin: 0;
padding: 2px 3px;
width: 120px;
background-color: #000000;
border-bottom: 0px solid white;
float:left;
}
.profile dd {
margin: 0 0 0 130px;
padding: 2px 3px;
border-bottom: 0px dotted #5b8261;
background-color: #000000;
color: #ffffff;
}