Plugin Support
Amin
(@amin7)
Hi @webservant316
Greetings!
Glad the CSS did the trick!
Quick answer to your question: CSS can’t actually travel “into” an iframe — it only applies within the same document. The reason your rule works is that EmbedPress drops it inside the FlipBook viewer for you, right where the .fb3d-link elements live.
So nothing needs to reach two iframes deep — the plugin’s custom CSS field already puts it in the right spot. 🙂
Also, we are checking the plugin code level, whether it’s the plugin’s CSS or the underlying pdf.js/flipbook library’s annotation-layer default, since EmbedPress wraps a third-party flipbook renderer.
Thanks
Actually, no. The above did NOT work when I included it in my own css. It only worked when I manually plugged that css onto the 2nd iframe in browser developer tools. Where would I put the css to get embedpress to automatically forward the css into the 2nd iframe?
Now I was able to get it to work with iframe css injection with the code below. However, that is a seriously complicated maneuver. So if there is an easier way, I’d like to know it.
/* embedpress pdf iframe css injection (Google > javascript wait for iframe load then execute) */
function CustomInjection_waitForIframe(iframe) {
return new Promise((resolve) => {
const doc = iframe.contentDocument;
if (doc && doc.readyState === 'complete') { resolve(); return; }
else { iframe.addEventListener('load', () => { resolve();}, { once: true }); }
});
}
async function CustomInjection_waitForEmbed() {
const outerIframe = document.querySelector('iframe.embedpress-embed-document-pdf');
if (outerIframe) {
await CustomInjection_waitForIframe(outerIframe);
try {
const outerDoc = outerIframe.contentDocument || outerIframe.contentWindow.document;
const innerIframe = outerDoc.querySelector('div#viewer-container iframe');
if (innerIframe) {
await CustomInjection_waitForIframe(innerIframe);
const innerDoc = innerIframe.contentDocument || innerIframe.contentWindow.document;
const styleEl = innerDoc.createElement('style');
styleEl.textContent = <br> .fb3d-link a, .css-layer .fb3d-link a { background-color: transparent !important; }<br> .fb3d-link a:hover, .css-layer .fb3d-link a:hover { background-color: rgba(255,255,0,.1) !important; }<br>;
innerDoc.head.appendChild(styleEl);
}
} catch (error) {
console.error('CustomInjection_waitForEmbed() cannot access iframe documents.', error);
}
}
}
window.addEventListener('load', CustomInjection_waitForEmbed);
Plugin Support
Amin
(@amin7)
Hi @webservant316
Greetings!
Sorry for the miscommunication. The thing is the yellow background comes from a third party JavaScript library we are using in the EmbedPress plugin. But, I already talked with the dev team, and we will over write in the plugin code level, which will remove the background and bring a permanent solution. 🙂
Our team is checking and working on it. Now, I totally understand the scenario here, as the PDF displayed in a iframe, so, here it needs CSS injection, and I also agree it makes the process kinda complicated. As, I said, we will remove the background in the in the plugin level, so, until then I am kindly request you to use the process you already figured it out. 🙂 Also, is there any other more simple solution, I will inform you.
Thanks
Ok thanks. You may want to imitate the code I posted above. I made the default background transparent and the mouse hover background
background-color: rgba(255,255,0,.1)
Or you may want to give the administrator color options or better yet make it easier to inject any css.
