Hey @okcirmht,
Here are those 3 CSS properties that you will need to modify (see our docs, note the Premium section) to change the background color of the “Page Width” dropdown to anything other than the default:
#wppdf-iframe-body .toolbarContainer {
background-color: red;
}
#wppdf-iframe-body .dropdownToolbarButton {
background-color: red;
}
#wppdf-iframe-body .dropdownToolbarButton > select {
background-color: red;
}
I hope this helps!
-
This reply was modified 3 months, 2 weeks ago by
Slava Abakumov. Reason: added the URL to a documentation article
Thanks Slava. I tried it and cleared css caches, but did not work for some reason (I added it to Theme customization where other bar color I could change. This is what I used for the rest of the bar that worked. Can you double check to see if anything is missing? (Does yours need !important in there somewhere, or does it have to be also directed to lite or premium or both?)
/* Lite: */
.pdfemb-viewer {
border: none !important;
}
/* Premium: */ wppdf-iframe-body { border: none !important; } wppdf-iframe-body .toolbarViewer { background-color: #941f29; }
Please check out docs (I linked to it in my previous message: https://wp-pdf.com/docs/hiding-the-embedders-border-or-changing-colorstyles/)
Premium plugin loads the PDF Viewer inside an iframe, so all the styling you apply inside your theme or in a block editor will NOT be transferred to the iframe content. You need to use a special hook:
add_action( 'wp_pdf_viewer_footer', static function() {
?>
<style>
#wppdf-iframe-body .toolbarViewer {
background-color: red;
}
#wppdf-iframe-body .toolbarContainer {
background-color: red;
}
#wppdf-iframe-body .dropdownToolbarButton {
background-color: red;
}
#wppdf-iframe-body .dropdownToolbarButton > select {
background-color: red;
}
</style>
<?php
} );
This code will inject custom styles inside the iframe and only then they will be applied to the PDF Viewer.
Hi Slava. Sorry I missed that link. I added it as a php via snippet and worked. The only thing that happens is when you select the pull down (hover over it), it reverts back to the gray. It is not a big issue, but if it happens that you can add something to the code to make the red stay, that will be great, for the record of others who may be interested. If it is time consuming, I will understand. You can visit my site homepage (okcir) to see what I mean, the pdf is halfway down the page. Since this topic may come up with others and you want to save time completing your code, this may be helpful to do it here. When the page refreshes, it goes to red, but once selected it goes back to gray. I have cleared caches, and seems to stay. Basically, the hover over color is still gray.
Just add these styles too:
#wppdf-iframe-body .dropdownToolbarButton>select:hover,
#wppdf-iframe-body .dropdownToolbarButton>select:focus-visible {
background-color: red;
}
That worked nicely. Just to complete, if you notice there is a little gray on the left of the button on hover. I tried to inspect and it seems its id is scaleSelect. I tried to play around with it but did not work. If you can just code that one too, it will be all done.
I tried to use you last added code and changed the id, but I think something else in that code needs to be adjusted too. I think it is the container for button and most of it is hidden but the left part shows, and seems odd. I realize hovers for pull down or page up or down remain gray and that is ok. This one is part of the bar, and somehow changes into gray on hover.
Hi Slava, Ai solved that problem with this code, so thanks much for guiding me to change the bar color. It is incredible what AI can do these days (cautiously used, of course). I just added this to the codes you shared earlier. Take care
#wppdf-iframe-body .toolbarViewer #scaleSelectContainer {
background-color: #555555; /* Changes the background color of the container */
border-radius: 4px; /* Optional: adds rounded corners */
}
#wppdf-iframe-body .toolbarViewer #scaleSelect {
color: #FFFFFF; /* Changes the text color */
background-color: #555555; /* Changes the dropdown background */
border: 1px solid #555555; /* Changes the border color to match the background */
}
That’s awesome!
Thanks for the sharing the final missing piece.
Take care.
