Hey everyone! Committed a TON of code today and moved a lot of things on the site to SSL. Soon we will redirect all links to SSL, hopefully that will go well. Please let me know if you see anything broken that wasn't broken before.
The trick suggested below works for me, but originally it looked like this instead of the override icons. And now my journal layout is breaking like this, which started sometime today.
Hey, random stranger popping in to say this is probably gonna be because the tiny icons are set to replace the http images. You should be able to fix it just by replacing the http with https in the urls of what's targeted, I think. At least, when I used the developer tools in my browser to test on your friend page, it worked.
So, basically, to use one section as an example because I don't want to spam this journal (your code is very long), you'd alter
to fix the userhead replacement icons. Do similarly to the others that are broken, just changing the http to https in the "img[...]" section of the code, which tells it what to target. In theory, that should fix the problem.
Eek! I'll give it a look-see, compare it to the base layout you used, and see if I can track down what went wrong, since it happened after following my advice. Sorry about the broken layout!
Oh, okay, good. ^^; I did go through and compare, though, and aside from where you'd changed colours and sizing, I don't really see anything that should be causing the wonkiness on the CSS side. I even tried replacing the CSS with the base layout, and it has the same thing going on, so I think it may be one of those layouts where you absolutely have to have a journal title and/or subtitle for it to display properly.
If you'd rather not have one, though, you should be able to do a quick-and-dirty fix by changing the appropriate section of coding to:
Not sure how that would potentially impact it if you do add a title/subtitle, so just remove the "min-height: 120px; margin-bottom: 10px;" from #alpha-inner's bit, if it messes anything up. That's all I added to the coding there.
Other than that, I did notice ".comments { width: 6000px;}" which based on the other sizes you used, I think may have been intended as 600 instead of 6000. Just wanted to let you know, just in case.
and it should make the entries spaced out (tested in Firefox Developer Edition, so YMMV). I think the original may have had closer to 20px padding, but I just used that because it's what I added in the header snippet I gave. That should get you close to being in the spirit of the original layout and not gone wonky, assuming that the spacing and such is what you meant. My apologies if not!
I know it's definitely not one of the ones that need a title, but the additional margin thing got the body of the layout back to normal! I'm going to try and play around to get the header back to the normal size.
No problem, glad to help. Good luck getting everything exactly how you want it! And feel free to give me a nudge if you get stuck. I'm not the greatest at CSS, but I can usually puzzle out how to fix things.
![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small}
So, basically, to use one section as an example because I don't want to spam this journal (your code is very long), you'd alter
.ljuser img[src="http://www.insanejournal.com/iwidth: 0!important;
height: 0!important;
background-repeat: no-repeat !important;
background-image: url(https://i.imgur.com/SZRH6xd.png) !important;
padding: 7px 9px 5px 4px !important;
}
into
.ljuser img[src="https://www.insanejournal.com/iwidth: 0!important;
height: 0!important;
background-repeat: no-repeat !important;
background-image: url(https://i.imgur.com/SZRH6xd.png) !important;
padding: 7px 9px 5px 4px !important;
}
to fix the userhead replacement icons. Do similarly to the others that are broken, just changing the http to https in the "img[...]" section of the code, which tells it what to target. In theory, that should fix the problem.
If you'd rather not have one, though, you should be able to do a quick-and-dirty fix by changing the appropriate section of coding to:
#alpha-inner {width: 630px; padding: 0px; background: white; padding: 10px; min-height: 120px; margin-bottom: 10px; }#beta-inner { width: 650px; padding: 0px 0px 0px 0px;background: #transparent; }
Not sure how that would potentially impact it if you do add a title/subtitle, so just remove the "min-height: 120px; margin-bottom: 10px;" from #alpha-inner's bit, if it messes anything up. That's all I added to the coding there.
Other than that, I did notice ".comments { width: 6000px;}" which based on the other sizes you used, I think may have been intended as 600 instead of 6000. Just wanted to let you know, just in case.
.entry {margin-bottom: 10px;}and it should make the entries spaced out (tested in Firefox Developer Edition, so YMMV). I think the original may have had closer to 20px padding, but I just used that because it's what I added in the header snippet I gave. That should get you close to being in the spirit of the original layout and not gone wonky, assuming that the spacing and such is what you meant. My apologies if not!
Thanks so much for your help!