adding Logo to the header/footer in al pages

[glb94]

Hi!

Is there a way of adding a custom logo in the header or footer in all pages of the document?

[ggrossetie]

Hi!

Yes it's possible using running elements: https://github.com/Mogztter/asciidoctor-web-pdf#running-elements

If you need more fine grained control, you can use a custom layout: https://github.com/Mogztter/asciidoctor-web-pdf#custom-layout.

[pintergreg]

Hey @Mogztter ,

I understand the running-elements section on its own, and I believe I understands the custom-layout section as well. But when I define a @bottom-center, for example, with a custom template.js, it is not applied. It seems like my template.js ignores it.

Is there a full example? The report example does not have a template.js, it uses the inner one, the slides example does not use the running elements stuff.

[ggrossetie]

The slides example does not use Paged.js and as a consequence the running function is not (yet) supported by Chrome. Here's the specification (draft): https://www.w3.org/TR/css-gcpm-3/#running-elements

For reference, Paged.js acts as a polyfill for the CSS modules to print content using features that are not yet natively supported by browsers: https://www.pagedjs.org/about/

The slides example does not use Paged.js because it was rather straigtfoward to paginate content using CSS features that are already available in Chrome. If you want to use running then you will need to add Paged.js in your template.js and probably make some adjustments.

[pintergreg]

I see, after importing Paged.js to my template my minimal example started to work, but I also realized, that this might not exactly what I am looking for.

I need a complex footer for every page, that I'd like to design myself. Something like:

<footer class="running-footer">
    <div class="left"></div>
    <div class="spacer"></div>
    <div class="right"><span class="page_number"></span></div>
</footer>

But the document is like the Asciidoc vs Markdown example, where the content goes on and on.

Is this actually something where the paged.js should be used?

[ggrossetie]

Not necessarily, you could implement this feature by adding the footer at the end of every section in the template.js file. The template converter gives you full control over the generated HTML. In this case a section is a slide so Paged.js is not strictly necessary.