LJ Changes Mess Up Your Layout a Bit?
Jun. 26th, 2012 11:12 am![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeSo 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. 2.
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
To make the rounded corners work you really need the coding to look like this:
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.
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![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
tuff_ghost have figured it all out. Here is the beginning of the Header Coding we are going to work with.
Before
After
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.
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. 2.
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
To make the rounded corners work you really need the coding to look like this:
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.
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
After
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.
layout_lounge
(no subject)
Date: 2012-06-26 11:49 pm (UTC)Do you have any idea how to change that now? Thank you!
ETA: Just checked again, and it displays my custom icon for a journal everywhere (even for communities).
Any idea how to solve that one?
(no subject)
Date: 2012-06-27 12:24 am (UTC)It shows your custom icon? You mean when you come to this community you are seeing a different tiny icon that the flower I've got going? I'm a little confused by this. Screen captures help.
(no subject)
Date: 2012-06-27 09:29 pm (UTC)I do that. I know coding well enough but I forget things. Glad I could help you.
(no subject)
Date: 2012-07-19 03:24 am (UTC)html body .ljuser img[src*="community.gif"] {
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;
}
And it should be
html body .ljuser img[src*="userinfo.gif"] {
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;
}
It seems to work fine now (I think).
(no subject)
Date: 2012-07-20 09:52 pm (UTC)(no subject)
Date: 2012-07-29 09:43 pm (UTC)(no subject)
Date: 2012-07-30 08:56 pm (UTC)(no subject)
Date: 2012-08-13 12:54 am (UTC)(no subject)
Date: 2012-08-13 09:03 pm (UTC)(no subject)
Date: 2012-08-15 06:11 pm (UTC)Thank you so much again.
(no subject)
Date: 2012-08-15 06:17 pm (UTC)(no subject)
Date: 2012-09-25 10:09 pm (UTC)I'd just downloaded an awesome layout with coffee cup tiny icons from someone and could not seem to get rid of the LJ icons and it was driving me nuts! I googled and found this entry and tried it and it worked great with my Minimalism style, so now I have coffee cups like I ought to have.
*relief!*
(no subject)
Date: 2012-09-25 10:46 pm (UTC)(no subject)
Date: 2012-11-18 10:38 pm (UTC)(no subject)
Date: 2012-11-19 09:22 pm (UTC)