I am using a paged HTML document template on Rmarkdown and I wanted to remove the header and footer ive created using custom CSS and HTML.
I've tried using :not() but have not been able to specify the selector in CSS as I am not sure which selector to use.
(UPDATE: I was able to come up with a messy workaround that I could use, in the CSS for header and footer, I adjusted the "top" attribute for header and "bottom" for footer.)
@media print {
div.divHeader {
position: fixed;
top: 452px;#page length in pixels
left: 0;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: -452px; # negative since using Bottom not Top *note: not real size
left: 0;
}
}
However if there is a less roundabout way to achieve this, below is what i've tried, please do help suggest a cleaner suggestion.
I have defined a seperate div for header and footer with their respective elements in each as below:
---
title: "Title Here"
author:
date:
output:
pagedown::html_paged:
toc: true
self_contained: false
css:
- default-fonts
- default
- custom-page-portrait.css
- Pagesplit.css
knit: pagedown::chrome_print
---
<div class="divFooter">
<div class="divFooter--line"> <body><hr></body> </div>
<div class="divFooter--ReportDate"style = "font-family:calibri;"> **Report Date:**<br>10/12/112</div>
<div class="divFooter--ReportAnalyst" style = "font-family:calibri;"> **Report Analyst**<br>John Smith</div>
<div class="divFooter--HoldingsDate" style = "font-family:calibri;"> **Holdings Date**<br>December 31, 2018</div>
</div>
<div class="divHeader">
<div class="divHeader--left" style = "font-family:calibri;"> **Header Left**<br>under half</div>
<div class="divHeader--right" style = "font-family:calibri;"> **Header Right**<br>under half</div>
</div>
and CSS
/*Header*/
@media screen {
div.divHeader {
display: none;
}
}
@media print {
div.divHeader {
position: fixed;
top: 0;
left: 0;
}
}
/*https://www.w3schools.com/howto/howto_css_style_header.asp*/
/* http://getbem.com/introduction/ */
.divHeader {
position: relative;
padding: 10px;
text-align: center;
background: #F15A55;/*not real colour*/
color: white;
font-size: 25px;
width: 100%;
height:8%;
float: none;
}
.divHeader--left {
position: absolute;
text-align: left;
float: left;
left: 50px;
top: 10px;
}
.divHeader--right {
position: absolute;
text-align: right;
float: right;
right: 50px;
top: 10px;
}
The footer css is similar.
the original custom css for the page is:
@page {
size: 8.3in 11.7in;
}
/* store some string variables */
.shorttitle1 {
string-set: h1-text content(text);
}
.shorttitle2 {
string-set: h2-text content(text);
}
/* left page */
.running-h1-title {
position: running(runningH1Title);
width: var(--running-title-width);
text-overflow: ellipsis;
overflow: hidden;
}
.running-h1-title:before {
content: string(h1-text);
}
@page :first{
content: "Some text";
position: relative;
}
@page :first {
@top-left {
content: none;
}
@top-right {
content: none;
}
@bottom-right {
content: none !important;
}
background-image: var(--front-cover);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
@page {
@bottom-left{
<div class="footerObj">
<hr>
<p>A Name.</p>
</div>;
}
}
.footerObj {
top: 10px;
text-indent: 100px;
}
@page :left {
@bottom-right {
content: counter(page);
}
}
@page :right {
@bottom-right {
content: counter(page);
}
}
/* Front cover */
.front-cover {
break-after: page;
}
/* page breaks; aka CSS fragmentation */
.level1 {
break-before: page;
}
.section > h1, .section > h2, .section > h3, .section > h4, .section > h5, .section > h6 {
break-after: avoid;
}
.footnotes {
break-before: always;
break-after: always;
}
.figure {
break-inside: avoid;
}
/* do not break captions */
caption {
break-inside: avoid;
break-after: avoid;
}