Layout Lounge

Account Status: All
Actions: Gap on the Friends Page
Theme: Flexible Squares




This is what your journal looks like...




( Mind the gap... )

Account Status: All
Actions: Float Images and Staggering
Theme: All

So the idea is to come up with something like this


( Learn How... )

Account Status: Free
Actions: Customizing the LJ Navstip
Theme: Flexible Squares (not sure if it works with other themes)

The idea behind this tutorial is to change the look of the LJ Navstip at the top which looks something like this...
Here is the coding I've pieced together.
/*-----------Navstip-----------*/ .w-cs DIV { background: none repeat scroll 0 0 transparent; float: none; } .w-cs .w-cs-userinfo { background: none repeat scroll 0 0 #23CCBC; border-right: 1px solid #3A4449; float: left; height: 50px; min-width: 405px; width: 40%; } .w-cs { color: #000000; font: 10px/10px 'Arial','Helvetica',sans-serif; } .w-cs A:link, .w-cs A:visited, .w-cs A:active, .w-cs A:link B, .w-cs A:visited B, .w-cs A:active B { background: none repeat scroll 0 0 transparent !important; border: medium none !important; color: #000000 !important; font: 10px 'Arial','Helvetica',sans-serif !important; text-decoration: none; } .w-cs A:hover, .w-cs A:hover B { color: #ffffff !important; } .w-cs .w-cs-user-controls .w-cs-group-first, .w-cs .w-cs-group-second { background: none repeat scroll 0 0 #23CCBC; } .w-cs .w-cs-status P { background: none repeat scroll 0 0 transparent !important; border: 0 none; color: #000000; float: none; font: 12px/17px 'Arial','Helvetica',sans-serif; margin: 0; padding: 0; } .w-cs .w-cs-summary { background: none repeat scroll 0 0 #dddddd; border-radius: 2px 2px 2px 2px; float: right; margin: -1px 0 0; padding: 1px 7px; } .w-cs .w-cs-summary LI.w-cs-i-tokens { background-position: 0 -788px; border-right: 1px solid #ffffff; margin-right: 6px; padding: 3px 6px 3px 0; } .w-cs .w-cs-text { background: none repeat scroll 0 0 #dddddd; border: medium none; border-radius: 2px 2px 2px 2px; color: #000000 !important; font-size: 11px; line-height: 14px; margin: 0; padding: 2px 0 3px 5px; vertical-align: top; } .w-cs .w-cs-search .w-cs-text { border-right: 25px solid #dddddd; width: 150px; }
( Explanation of Coding... )

So I don't know what the PTBs over here at LJ are doing but they've screwed up so stuff again. I don't know if you are noticing your Tiny Icons are all messed up. Not only that but Rounded Corners are all reverting to the squared look. Tranistions and Transform of header links on some of my recent layouts is also messed up. Here is an attempt to fix some of LJ's bugs.

Tiny Icons:

This above picture is the issue I discovered. Notice how my cool Super Mario icons are present but you can see the generic LJ icons as well. Thank you for this LJ.

( Let's fix these things... )