Page header & footer for letterhead

[rolfw]

I'm trying to make a custom theme for my company's letterhead. The page header consists of the company name with the tagline underneath. Both are in text, centered and in particular fonts (each a different size). I'd also like to create a version with a confidentiality notice in the footer.

So far I haven't been able to figure it out. I have only basic skills in CSS or HTML, but since CSS is meant for styles I'd guess a theme might not be the right the do it?

How do you recommend doing this in Typora?

[rolfw]

I found a related issue and with some tinkering I was able to add the logo + tagline manually:

CSS:

.logo {
    /* This empty class is needed because the content property only works in the ::before and ::after pseudo classes */
}

.logo:before {
    /* The \A at the end of the content adds a line break */
    content: "EasyCompany\A";
    color: #078732;
    font-size: 48px;
    font-family: lobster,cursive;
    text-align:center;
    /* The following two lines are a workaround to make text-alingn work */
    display: block;
    position: relative;
    line-height: 50px;
    white-space: pre;
}

.logo:after {
    content: "Effortless Technology";
    color: #848079;
    font-size: 19px;
    font-family: Open Sans;
    text-align:center;
    /* The following two lines are a workaround to make text-alingn work */
    display: block;
    position: relative;
    line-height: 21px
}

.page-break {
    page-break-after: always; 
}

.private-confidential {
    /* This empty class is needed because the content property only works in the ::before and ::after pseudo classes */
}

.private-confidential:after {
    content: "Private & Confidential";
    color: #ff1a1a;
    font-size: 14px;
    font-family: Open Sans;
    font-weight: bold;
    font-style: italic;
    text-align:center;
    display: block;
    position: relative;
    line-height: 16px
}

Markdown:

<div class="logo"></div>

First page[^1]

[^1]: some footnote

<div class="private-confidential"></div>

<div class="page-break"></div>

<div class="logo"></div>

Second page

<div class="private-confidential"></div>

But this approach shows the logo throughout the text when exported to HTML, it shows 'Private & Confidential' above the footnotes and it's kind of messy in the document.

Also, I haven't managed to figure out how to get the logo + confidentiality header at the absolute top + bottom of the page without messing up the body too.

[rolfw]

A possible solution might be to use tables, as suggested in two articles I found:

• HTML & CSS: header and footer elements for printing
• How to Print a Repeating Header from the Browser

How can I do this in a way that doesn't involve manually adding a table structure to each document? For instance, could I edit a template so that Typora renders the document inside a table cell and have the page header & footer defined in that template too?

[rolfw]

One last lead I found is How to insert repeatable footer / header blocks on pages of HTML to PDF report, but this might be specific for the cuba platform. But I haven't used HTML and CSS much at all, so I'm sharing it just in case I'm wrong or in case it inspires you to a different solution altogether.

[rolfw]

Actually, another lead :)

Based on this SO answer I tried the following CSS to get the footer to show at the bottom of each page:

@media print{
    .private-confidential{
        display:block;
       position:relative;
       top:-20px; // this sets the footer -20px from the top of the next 
                  //header/page ... 20px above the bottom of target page
                  //so make sure it is more negative than your footer's height.

       height:10px;//notice that the top position subtracts 
                   //more than the assigned height of the footer
    }
    .private-confidential:after{
        display:block;
       position:relative;
       top:-20px; // this sets the footer -20px from the top of the next 
                  //header/page ... 20px above the bottom of target page
                  //so make sure it is more negative than your footer's height.

       height:10px;//notice that the top position subtracts 
                   //more than the assigned height of the footer
    }
}

But this doesn't seem to have an effect when exporting to PDF.

[abnerlee]

https://github.com/typora/typora-issues/issues/118

[abnerlee]

Page footer is not supported yet. We will consider how to support this in future updates.

For your code, I think you may need to write footer text inside <div class="private-confidential"></div>.

Or try https://stackoverflow.com/a/40458311 , but first export ad HTML, then print inside Chrome

[rolfw]

Thanks for your suggestions. I tried the @page approach by copy/pasting the exact code from the example to the template CSS --> Save --> Close and reopen Typora --> export the sample MD above to HTML --> open the HTML in Chrome --> Print --> PDF --> Open in Preview.

Based on the documentation I'd say it should work, but it doesn't print any header though; Could there be anything specific to Typora that's preventing this?

[riyashdeenr]

@rolfw did you manage to solve it ?

[rolfw]

No, sorry :)

On Nov 20, 2019 at 3:05 PM, <Riyashdeen Abdul Rahman (mailto:notifications@github.com)> wrote:

@rolfw (https://github.com/rolfw) did you manage to solve it ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub (https://github.com/typora/typora-issues/issues/1351?email_source=notifications&email_token=AAJTRYM4ZKMRJFAUYYGLWQ3QUVG2JA5CNFSM4EXRRTO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEESIUVY#issuecomment-556042839), or unsubscribe (https://github.com/notifications/unsubscribe-auth/AAJTRYL3QSWHDR56UENFKT3QUVG2JANCNFSM4EXRRTOQ).

[abnerlee]

see https://support.typora.io/Export/#header--footer