Hi everyone
I just found a CSS way of customizing the headers and footers for printing in Google Chrome. I needed something for printing static HTMLs and found this online.
The snippet below hides the default text that Google Chrome puts into the headers and footers. At the very bottom of the snippet you can change the custom content I added. The header as it stands will show “Your header text here” at the top center. The footer as it stands will show “1 of 98” at the center of the footer on page one of a 98 page document.
Tiddler title: Whatever you want.
Tags: $:/tags/Stylesheet
Type: text/css
Text:
@media print {
/* Hide the default browser-generated headers and footers */
@page {
size: auto;
margin: 15mm; /* Adjust margins as needed */
}
/* Define your custom header */
.custom-header {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
padding: 10px;
background-color: #f0f0f0;
/* Add other styling as desired */
}
/* Define your custom footer */
.custom-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 10px;
background-color: #f0f0f0;
/* Add other styling as desired */
}
/* Ensure custom headers/footers do not overlap content */
body {
padding-top: 40px; /* Adjust based on header height */
padding-bottom: 40px; /* Adjust based on footer height */
}
}
@media screen {
/* Hide custom headers/footers from screen view */
.custom-header, .custom-footer {
display: none;
}
}
@page {
@top-center {
content: "Your header text here";
}
@bottom-center {
content: counter(page) " of " counter(pages);
}
}