PDF.js Express Version
8.4.0
Detailed description of issue
I want to change default styles of toolbargroup (header) like “Annotate” and “Fill and Sign”
I would like to highlight the button name/title or even add tooltip to these buttons.
What it looks like now:
Does your issue happen with every document, or just one?
All
Link to document
N/A
Code snippet
N/A
Thanks!
Hello utshav.pandey,
We have guides on UI customization here: PDF.js Express Viewer Customization | Documentation
This would require accessing and adjusting the CSS, you can actually pass in a custom CSS file, here’s a guide on how to do that: PDF.js Express Viewer Style Customization (Color & CSS) | Documentation
Best regards,
Tyler Gordon
Thanks Tyler,
I have made changes according to the docs provided,
The above 3 are not working, not able to select Annotate/FillAndSign button. Please can you provide some methods instead of docs since they don’t contain/provide with all the classes/styles examples.
Hello utshav.pandey,
To hide UI elements you can use the instance.UI.hideElements API
Can you provide a sample project for me to try out and see what the issue is?
Thanks!
Tyler Gordon
Hi Tyler, unfortunately I can’t provide with the code.
I have been just asking to edit the below buttons, I have checked the documentation and forum’s earlier asked questions and examples but to no avail.
If you could just provide a method to simply edit/change the style for the below exact Annotate/Signature button. I want to change the color/border, etc. for these buttons.
I have shared my methods above, if you could provide the correct method.
Hello utshav.pandey,
You can directly access the element through query selectors, then adjust their styling manually.
document.querySelectorAll(`[data-element="toolbarGroup-FillAndSign"]`)
document.querySelectorAll(`[data-element="toolbarGroup-Annotate"]`)
Otherwise please use the previously mentioned methods or follow our Advanced Customization guide
Best regards,
Tyler