footers is work good in custom themes
{% if footers != null %}
{% for footer in footers %}
<div style="padding-top: 5px;">
{{ footer }}
</div>
{% endfor %}
{% endif %}
it should give you an idea
this footer code for standard themes
<div style="background-color: lightblue; border: 2px solid red;
border-radius: 5px;
padding: 5px; color: blue; text-align: center;">Test Color Footers</div>
<div style="display: none;"><script>
document.addEventListener('DOMContentLoaded', function() {
const printableDiv = document.getElementById('printable-content');
if (!printableDiv) {
return;
}
const table = printableDiv.querySelector('table');
if (!table) {
return;
}
const headerRows = table.querySelector('thead').getElementsByTagName('tr');
const desiredStyle = 'font-weight: bold; padding: 5px 10px; border: 1px solid #000;';
for (let i = 0; i < headerRows.length; i++) {
const cells = headerRows[i].getElementsByTagName('td');
let allCellsMatchStyle = true;
for (let j = 0; j < cells.length; j++) {
const cell = cells[j];
const styleAttribute = cell.getAttribute('style');
if (!styleAttribute || !styleAttribute.includes(desiredStyle)) {
allCellsMatchStyle = false;
break;
} else {
console.log(`Matching cell found in row ${i + 1}, cell index ${j + 1}: ${cell.textContent}`);
}
}
if (allCellsMatchStyle) {
console.log(`Matching cells found in row ${i + 1}:`);
for (let j = 0; j < cells.length; j++) {
cells[j].style.backgroundColor = 'lightgreen';
console.log(` - Cell ${j + 1}: ${cells[j].textContent}`);
}
}
}
});
</script></div>
and use other script to override @media print style
