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.
Can you do two things. Get a screenshot of the comment form before you try to comment. Send me a txt file with the source of the site before you try to comment.
Also please try to delete all cookies and website data and see if the problem continues. I am having a hard time duplicating this issue which is making it very hard to see why it's happening.
perhaps it’s because it’s because i use chrome on my desktop. the site barely loads on chrome on my phone. give me a few and i’ll see about getting a screenshot of the error
My custom layout got messed up. The journal and community icons on the friends page portion of it have gone from tiny icons to giant-sized icons. They should be tiny icons. screenshot of it. It happens on both firefox and chrome.
Basically, the images are now https instead of http. You could also just add the s to the target images, but doing it this way makes it target either one and could possibly cause less issues down the road.
I tested this with the developer tools in my browser and it appeared to work, so hopefully it'll work when you use it!
I'm not experiencing the 'profiles won't load' issue others reported, but they are taking longer to load than they probably should and so are userpic pages.
You need to make sure any CSS or other links to offsite resources are using https not http going forward. Your browser it probably rejecting non-secure resources.
Every single preview icon in my icon journal layout (this username) is showing up as a broken image. It's been like that since early afternoon (GMT) yesterday, and it still hasn't improved. I've cleared my cache/cookies twice, hard refreshed, and obviously between then and now I've shut down my computer and started it up again, with no change.
Please don't tell me I have to change all of the image links from http to https because that is thousands of image links I'll have to go through and change and I can't imagine anything more frustrating or inconvenient.
That's the really weird thing for me too. It only works, I believe, if you use my cut text, which is set as a default (via coding) to visit the http version of the page. If you click the "link" button or enter the page by any other means, you get taken to the https version, where every image is broken :/
![[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!
Also please try to delete all cookies and website data and see if the problem continues. I am having a hard time duplicating this issue which is making it very hard to see why it's happening.
.ljuser img[src*="/img/userinfo.gif"], .entry-header h3 img[src*="/img/userinfo.gif"] { width: 0!important; height: 0!important; background-repeat: no-repeat !important; background-image: url(https://imgur.com/XWb13KU.png) !important; padding: 6px !important; background-size: 8px}
.ljuser img[src*="/img/community.gif"], .entry-header h3 img[src*="/img/community.gif"] { width: 0!important; height: 0!important; background-repeat: no-repeat !important; background-image: url(https://imgur.com/PwCsvwN.png) !important; padding: 6px !important; background-size: 8px}
.pic-poster img[src*="/img/userinfo.gif"], .pic-poster img[src*="/img/community.gif"] { width: 0!important; height: 0!important; background-repeat: no-repeat !important; background-image: url(https://imgur.com/JlGeD0c.png) !important; padding: 0px !important; background-size: 8px}
.lj-entry-securityicon img[src*="/img/icon_private.gif"] {width: 0!important; height: 0!important; background-repeat: no-repeat !important; background-image: url(https://imgur.com/pan5Pr7.png) !important; padding: 5px !important; background-size: 8px}
.lj-entry-securityicon img[src*="/img/icon_protected.gif"] { width: 0!important; height: 0!important; background-repeat: no-repeat !important; background-image: url(https://imgur.com/4Dhntrk.png) !important; padding: 5px !important; background-size: 8px}
Basically, the images are now https instead of http. You could also just add the s to the target images, but doing it this way makes it target either one and could possibly cause less issues down the road.
I tested this with the developer tools in my browser and it appeared to work, so hopefully it'll work when you use it!
UNTHREAD FOLDER.
Please don't tell me I have to change all of the image links from http to https because that is thousands of image links I'll have to go through and change and I can't imagine anything more frustrating or inconvenient.