• Facepunch Ricing Central: custom CSS styles, scripts, requests and more!
    600 replies, posted
I don't know how else to explain it to you other than "it doesn't work like that." You can't use CSS to modify an iframe's contents. If you want to know in explicit detail why, read up on CORS (Cross-Origin Resource Sharing)
This makes facepunch kinda hard to use #wrapper { color: black; background-color: black; opacity: 0.9; } .div { color: black; background-color: black; opacity: 0.9; } why did I make this
What I'm getting at is that it "did work like that" and I'm now I'm wondering how the inspector can edit its css through its stylesheet. I'm not confused at all about why the site can't edit it.
Simplest way is change a desired value in CSS that is detected by javascript, the reverse is even easier. Thing is that you need to have the javascript to receive it. I t isn't too hard and you can do it in the inspect element console (it's kinda tricky). You also need to use an attribute that won't change much, which is hard because CSS is all visual. It's a pretty janky solution and there's no reason to do it. You might as well just use 100% javascript.
#header{      position: sticky;      top: -1px;      z-index: 1500;      -webkit-box-shadow: 0px 1px 17px -7px rgba(0,0,0,0.52);      -moz-box-shadow: 0px 1px 17px -7px rgba(0,0,0,0.52);      box-shadow: 0px 1px 17px -7px rgba(0,0,0,0.52); }  #header .navbar-main.navbar.is-dark .navbar-brand .navbar-item.logo{      top: 10px;      height: 78px; } .pagnation.postpagnation.below{      border-top: 1px solid #bbb;      border-bottom: 1px solid #bbb;      position: sticky;      bottom: 0px;      z-index: 1499; } #wrapper #content .postlist .forumpanel{      border-bottom: none; } Makes the top navigation stick to the top and the bottom pagination stikck to the bottom while browsing a thread. I made something similar with the old dark theme and decided to fix it up for this new one. I know this works in threads, but haven't really checked it elsewhere. Also as note this will all fit into an empty Custom CSS box with 40 characters left to spare when completely minified, I am sure this could be updated to be shorter but I just wanted it to work. @garry could you add something like this as default? you added it last time in the dark theme when I posted it when people were begging for it. Also heres a video of it. https://files.facepunch.com/forum/upload/110057/9afb2cfd-bcde-46d1-af41-53c9de4b6d7a/2018-03-27_17-21-58.webm
Since Chrome lets the user run JavaScript on iframe contents with the developer console, I suspect it might let extensions do the same. You probably would have to request permissions for the iframe domain though.
shoutout to people who have an avatar that actually integrates well with their background rather than just being some ugly ass square
No, the closest you might get is loading the iframe's content through a proxy and then modifying it from there. This would require an abundant amount of work, and I'm not even sure if it's something you can do without being this site's admin. What Wasabi posted does not work for what he's referencing. You can only do this if the content of the iframe is hosted on the same domain, which it's not. Otherwise I could embed an iframe of Facebook and have JavaScript parse and extract literally all of your information in an instant without you ever knowing. It very obviously "did not work like that" because otherwise you wouldn't be having this issue. I am explaining to you why it doesn't work, and why it will continue to not work.
Okay, you're right that the 'main' console can't mess with the iframe. I guess that's probably because it's running as if there was a script on the site, so same origin is enforced. But you can mess with it if you change the context to the iframe. https://files.facepunch.com/forum/upload/112809/5f98ba02-8940-452d-a50e-b204cc2c52c6/2018-03-28_01-27-35.webm Sure this is in effect like you're running code from within the iframe; but it goes to show that Chrome isn't going to stop the user from executing their own JavaScript on the iframe. I think it logically follows that if an extension has permission to mess with a website, it can mess with iframes of that website. This isn't code that the website is running; it's code that the user (via an extension) is running. There is no XSS concern per se, apart from the fact that the extension could run malicious code, and I don't think Chrome would block the extension's code under the same origin policy. I found some StackOverflow questions that seem to want to do the same thing we do: modify the contents of different-domain iframes. content.js in iframe from chrome access iframe content from a chrome's extension content script I haven't taken an in-depth look at any of these, and I have no experience creating extensions for Chrome, so I don't know if they exactly fit our circumstances but they seem to allow extensions to run in iframes.
Literally what I have been saying the entire time is posted as the top answer of that second link: https://i.imgur.com/snC2ndD.png And, indeed, is further clarified in the responses to the answer. https://i.imgur.com/GNpXGCr.png What you're doing is modifying a copy of it locally, you aren't actually changing anything. So technically a Chrome extension can accomplish this if you inject the JS into the iframe's domain itself which I wasn't aware of. But you would have to do this for every single domain you want to affect (and as far as I can tell an individual JS file for each iframe too). However, this is not in itself modifying an iframe from a separate domain. This is injecting JS into the existing iframe's domain to modify it. All of that said, coming full circle back to my original point, if you want to go through with that abundant amount of work (proxy, injecting JS through an extension, whatever), then feel free. But what you're wanting to do is impossible through CSS alone.
Geez man, I'm not trying to prove you wrong or say that SOP is silly; just trying to help @Laharlsblade figure out a way to change CSS in an iframe. It seemed to me that you were saying that it was impossible by any means, and I'm showing a way in which it is possible. I think this method of a separate JS and permissions for each iframe domain is a feasible solution. Not ideal, sure, but at least it's _possible_ with native Chrome extensions. I know it's not XSS; that was tongue in cheek. Sure this is in effect like you're running code from within the iframe
Does anyone else have to constantly wipe their browser cache to get anything with the user styles to play nice (I mean when you're making your own)? Running chrome and it drives me nuts having to wipe it like every 10 seconds.
https://files.facepunch.com/forum/upload/718/435246f7-da81-4de9-8fb8-d11bfea546c9/image.png stylepunch is now dark
Have you checked the sources (sources tab in Chrome inspector, probably can also find them somewhere in other browsers' developer tools) to see if your user CSS is changing? Mine gets loaded from https://forum.facepunch.com/styles/user with what looks to be a hash of the file in the query to "fingerprint" the file so my browser is forced to get the new version any time the file changes. I've heard that some browsers still use the cached version if the fingerprint is in the query part of the URL however, so maybe this is what your browser is doing. If you still have to wipe the cache, you could turn off caching. I know Chrome lets you turn it off only while developer tools is open: https://files.facepunch.com/forum/upload/112809/b83031cf-fbdb-4cac-a2e3-192c01c4660a/chrome_2018-03-28_21-15-53.png
@Inacio is StylePunch still suffering from that inactivity bug? This is the only thing on that page for me (even with all my extensions disabled): https://i.imgur.com/NrSxSQj.png (Also it wasn't moved from Heroku right? It's still at https://stylepunch-front.herokuapp.com/ ?
could you post a screenshot of your network tab right click something, inspect, then go to the network tab it's not ready for use yet but at least showing the list should work? https://files.facepunch.com/forum/upload/718/99c5ece0-9051-4cfe-84db-b41b3bd5764c/image.png
The list fails to load due to an invalid certificate authority (also happens on Firefox): https://i.imgur.com/aLFlGgu.png
ah! that's why it's not working! yeah, current snag is that i need a domain to host stylepunch on so i can make ssl certs. without those, the css files won't load on fp (which is already https). a bud might be hooking me up with a domain so look forward to that (in the meantime if you want to see what the site looks like when the ssl works go to that red url by yourself and say you accept that fake certificate, it'll work afterwards)
* {font-family: Comic Sans MS} Can someone with a degree in psychology explain to me why I took the time to actually put this in my CSS
dont worry fam * {font-family: Comic Sans MS !important} If anyone tells you not to overuse the important tag you just ignore them
Apologies if it's already been done, but I was bored so I made small userscript that displays the highest OP rating in the thread list if it's high enough, just like on the old forum http://anya.moe/images/KyITr.png Get it here
this is one of those really small things I missed from the old fp, thank you so much!
Would like to mention that this isn't working under Tampermonkey on Firefox, your syntax is missing correct formatting on lines 34 and 44 (lack of semi-colons m8) according to it which entirely breaks the functionality. Also found it only works once, after that it refuses to work again, going to assume its a problem with the JSON request doing that.
I fixed the ; issue but I still don't seem to be able to inject the manifest on Greasemonkey. I edited my post with 2 versions of the script for both extensions.
Anybody make a script to make long posts automatically expand yet? I find that new forum feature to be absolutely useless most of the time
it's what speeds up pageloads buy like 10x browser renders a shit
Sorry if this has been asked already, but is there a way to make quotes actually show what was in the original post? As in, show images, videos etc. I'm getting really tired of seeing miles long links on quotes with someone going "Oh shit, that's clever!" and then having to click the quote to actually see what's in it.
It wouldn't be possible to make something that showed images in quotes without a userscript, would it? Like, maybe with some ::hover fuckery something could be worked out, but I'd prefer a "show image" button and based on my limited knowledge of CSS I'm assuming that can't be done.
Sorry, you need to Log In to post a reply to this thread.