CSS not working for HtmlHeader and HtmlFooter

//Set the custom CSS
blinkConverterSettings.Css = "body {\r\n background-color: red; \r\n}";

I add some css styles to the blink converter settings. But the styles are not applied to the html header or html footer. Why CSS ist not working for HtmlHeader and HtmlFooter?

//Set the custom HTML header to add at the top of each page.
blinkConverterSettings.HtmlHeader = File.ReadAllText("header.html"); 
//Set the custom HTML footer to add at the bottom of each page.
blinkConverterSettings.HtmlFooter = File.ReadAllText("footer.html");


Thank you for feedback.


1 Reply

KS Karmegam Seerangan Syncfusion Team June 3, 2024 01:07 PM UTC

Hi Eoehen,

Thank you for reaching out to Syncfusion support.

We have checked the reported issue on our end. The `HtmlHeader` and `HtmlFooter` properties only support inline styles. We are unable to set external CSS properties or link external CSS files to apply styles for the header and footer. Please refer the below documentation.

Background color missing issue in HTML Header and Footer

 

However, we have a workaround solution to set the Custom CSS for the PdfHeader and PdfFooter properties. In this method, we can assign the PdfPageTemplateElement as the Header and Footer. We have attached a sample for your reference.

 

Header and footer

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Custom_CSS_Header_Footer-1201616891

 

Kindly try the provided sample on your end and get back to us if you need further assistance.


Regards,

Karmegam


Loader.
Up arrow icon