LJ Changes Mess Up Your Layout a Bit?

[sireesanwar]

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.

Box 1 is how we used to do it. We want to make it look like Box 2 now.
1./* USER */
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/* COMMUNITY */
.ljuser img[src*="community.gif"] {
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}
2./* USER */
html body .ljuser img {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

html body .ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

/* COMMUNITY */
html body .ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background: transparent url(TINY ICON URL) no-repeat 0 0 !important;
padding: 16px 0px 0px 16px !important;
}

Rounded Corners:
In a lot of cases the issue is just not a complete list of the different border options. Such as you might see only
-moz-border-radius: 10px;

To make the rounded corners work you really need the coding to look like this:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;

It is important all lines are present in the making of rounded corners. You can go to the Rounded Corners tutorial for further help.

Transitions:
This was basically me getting links to ease out rather than stay stationary. You can see what I'm talking about at the bottom of this post. The comment link will ease out rather than simply change color. Again, just like the border there isn't enough coding and more has to be added.

-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;

Simply make sure all instances of this coding contain all 4 lines. Many stop short of the -khtml line.

Transform:
This is the coding which makes the upper navbar links rotate (see above). I was having a bit of trouble and finally with the help of tuff_ghost have figured it all out. Here is the beginning of the Header Coding we are going to work with.
Before
/*---------------Header--------------*/
#header {
position: inherit;
width: 990px;
height: 40px;
text-align: center;
color: #242424;
padding: 15px 5px;
font-family: open sans condensed, georgia, arial;
font-size: 14px !important; line-height: 130%; line-height: 130%;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
background-image: url(http://i41.tinypic.com/14maq2u.jpg);
background-origin: padding-box;
background-position: left bottom;
background-repeat: repeat-x;
background-size: auto auto;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 12px 10px 12px 10px;
letter-spacing: 1px;
color: #ffffff;
text-align: left;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
}

div#header a:hover, div#header li.view {
padding: 12px 9px 12px 9px;
color: #000000;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
-moz-transform:rotate(720deg)!important;
-webkit-transform:rotate(720deg)!important;
-o-transform:rotate(720deg)!important;
}

After
/*--------Header-------*/
#header {
position: inherit;
width: 990px;
height: 50px;
text-align: center;
color: #282828;
padding: 10px 5px;
font-family: open sans condensed, georgia, arial;
font-size: 14px !important; line-height: 130%; line-height: 130%;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
background-image: url(http://i39.tinypic.com/jgqu0y.jpg);
background-origin: padding-box;
background-position: left bottom;
background-repeat: repeat-x;
background-size: auto auto;
}

div#header a, div#header a:link, div#header a:visited, div#header a:active {
display: inline-block;
padding: 5px 10px 12px 10px;
letter-spacing: 1px;
color: #ffffff;
text-align: left;
border:1px solid #E0E0E0;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
}

div#header a:hover, div#header li.view {
display: inline-block;
padding: 5px 9px 12px 9px;
color: #000000;
-moz-border-radius: 46px; -webkit-border-radius: 46px; border-radius: 46px; -khtml-border-radius: 46px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-khtml-transition: all 0.8s ease-out;
transform:rotate(720deg)!important;
-khtml-transform:rotate(720deg)!important;
-ms-transform:rotate(720deg)!important;
-moz-transform:rotate(720deg)!important;
-webkit-transform:rotate(720deg)!important;
-o-transform:rotate(720deg)!important;
}

To get the transformations to work the width under the #header { section had to be upped to 50. I had already added all the coding update for border-radius and transitions as I talked about above in this post.

However in the div#header a:hover, div#header li.view { section there are a few things I need to add. First, display: inline-block; (I also added this to the div#header a, div#header a:link, div#header a:visited, div#header a:active { section). This will actually allow the rotations to happen. Then I also added transform:rotate(720deg)!important; -khtml-transform:rotate(720deg)!important; and -ms-transform:rotate(720deg)!important;. This will give more cross browser rotation.

Also there was some padding adjustments in all three sections sections.