PDF Embed Customization

It’s impractical if not impossible to CSS style embedded objects. If the gutter and other elements are not literally part of the embedded object, then you have a chance of styling them. For the object itself, any styling needs to be done when the object is created.

Why wouldn’t you simply embed PDF files using iframes? Then you have full control of everything around the embedded object. Or use the default editor’s embed block. Basically the same thing.

Please do not offer to share access credential in these forums. I’m confident you’re not offering credentials where someone could do any kind of damage with the access. But others do so and it causes liability issues, so we need to not allow any kind of credential sharing. We don’t need people complaining “but you let jonphaseworx share credentials!” You’re free to publish a publicly accessible page that demonstrates the issues that doesn’t require credentials. Thanks for understanding.

Hi @bcworkz

Thanks for your reply.

I understand that CSS is unable to influence embeds. Creating the PDF seems to lock those gutters in, which is why I want to try and mask the edges somehow so it’s white all the way around.

I’ve used iFrames and it has now solved the height issue, but I still need to mask the edges as per above.

I am also still looking for assistance on the following points:

2) For the menus, I would like the activate link to be the same maroon as in the logo (#800000) and remove the underline when hovering. I’ve played around with the CSS but I am not winning.

4) Lastly, can you recommend a way to make these PDF pages responsive so that they look better on a smaller screen, ie. tablet, phone, etc.

Thank you again.

Maybe to mask the gutter you could use a concept similar to image sprites? A background image with multiple elements is displayed through an aperture of sorts so only one element is visible at a time. In your case the background would be the PDF embed. Probably not a true background, but a lower layer. Thus only the left or right side is actually visible, masking the gutter and other side. You may need two occurrences of the same embed to manage the left and right elements. Should be OK performance-wise since both are the exact same source.

As for responsiveness, that flies in the face of the entire concept of the PDF format. It’s a “feature” that display devices cannot corrupt the layout. I’m skeptical that it’s even possible.

I believe there are PDF format conversion software packages out there that could possibly convert PDF to HTML on upload. Your client can stay with the entirely inappropriate format they are comfortable with, but the content served is actually normal HTML from the WP DB. This would be a far better approach IMO than fighting with PDF format.

Converting PDF to HTML might even negate the need for masking. Lemme look into this. Thanks mate.

We’ve opted to just forego the PDFs altogether. Which just leaves this that I need help with, please:

2) For the menus, I would like the activate link to be the same maroon as in the logo (#800000) and remove the underline when hovering. I’ve played around with the CSS but I am not winning.

2) For the menus, I would like the activate link to be the same maroon as in the logo (#800000) and remove the underline when hovering. I’ve played around with the CSS but I am not winning.

Your menu’s styling is theme-dependent, and may even depend on the current configuration of your particular theme. So we’ll need to inspect the current page before we can offer any suggestions… either via custom CSS or a theme setting.

But I only see a “Coming Soon” message on the page… so it’s impossible for us to help you with this at this time.

Hi George

I’ve made the page publically viewable if you want to have a look. Once you’ve looked, I’ll set it back to the Coming Soon page.

Thanks!

Please try:

.header__navigation a {
color: maroon;
}

.header__navigation a:hover {
text-decoration: none;
}

UPDATE:

Sorry, I just read over your question again, and it seems for the color, you want ONLY the ACTIVE link to be maroon, so use this instead of the above:

.header__navigation .current-menu-item a {
color: maroon;
}

• This reply was modified 2 years, 3 months ago by George Appiah.

Ok awesome!

Now I just need it so that when I click on “TEAM” for example, the link on the menu turns to a different colour.

Can you help with that?

Thanks again George. You are a lifesaver!

Please see my edit above. My earlier code for the color affects all menu links, but the code under UPDATE only affects the currently displayed page. You may change the specified color to whatever you want.

Thank you!

All issues have been solved. Thanks to everyone for their assistance.