Tutorial: Remove the Userpic "Float" Effect in Expressive

Apr 26, 2009 08:40

A tutorial for achieving the effect I have used in my journal. This should work in all browsers. However, please note that I have only tested this hack with Life's a Spectrum -- if it doesn't work with other Expressive/Mixit layouts, it's up to you to adjust it as needed. I'm in the middle of end-of-semester project mire and don't really have the time or energy to offer CSS help.

1. Find .asset-body. Replace the code between the brackets with the following:
color:#4F4F4F;
line-height:1.7;
margin-bottom:18px;
padding-left:154px;
padding-right:25px;;

color:#4F4F4F;
line-height:1.7;
margin-bottom:18px;
padding-right:25px;

2. Find .asset-body .user-icon. Replace the code between the brackets with the following (this also removes the extraneous height:100%; I accidentally left in):display:inline;
float:none;
margin-left:-149px;
padding-right:7px;
position:absolute;
text-align:center;
width:133px !important;

display:inline;
float:none;
margin-left:-149px;
padding-right:7px;
position:absolute;
text-align:center;
width:133px !important;

3. Add the following to .asset-content:padding-left:154px;

*tutorial

Previous post Next post
Up