Split header-footer with logos

[devster31]

Hello, I'm having some issues replicating the following template:

In particular I'm having issues with the header (I can't make the image stick to the left -or right- side), and the footer (also an alignment problem), as well as CSS directives for color.

I'm using the following snippet to override the default theme:

header: <div> <div> one </div> <div> <img src="https://www.unidformazione.com/wp-content/uploads/2017/10/UniBo-Universita-di-Bologna.png" /> </div> </div>
footer: Alma Mater - University of Bologna
style: |
    header {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
    }

    header img {
        height: 100px;
    }

    footer {
        display: grid;
        grid-template-columns: 1fr max-content;
        background-color: #bb2e29;
        align-content: right;
    }

but the following is the result:

[akaguny]

maybe you missed dot . where write class locator?
header { => .header {
also you can try add styles with html tag (remember about allow html)

<style>
YOUR CSS HERE
</style>

[devster31]

header and footer seem to be tags, not classes in the final generated slide:

<section id="4" data-header="&lt;div&gt; &lt;div&gt; one &lt;/div&gt; &lt;div&gt; &lt;img src=&quot;https://www.unidformazione.com/wp-content/uploads/2017/10/UniBo-Universita-di-Bologna.png&quot; /&gt; &lt;/div&gt; &lt;/div&gt;" data-footer="Alma Mater - University of Bologna">
<header><div> <div> one </div> <div> <img src="https://www.unidformazione.com/wp-content/uploads/2017/10/UniBo-Universita-di-Bologna.png" /> </div> </div></header>
<footer>Alma Mater - University of Bologna</footer>
</section>

and adding the dot doesn't seem to make a huge difference.
Also the inline style didn't help.

[akaguny]

Oh, yes. Sorry)
Maybe you can share reproduce link?

[devster31]

All the code needed to reproduce is in the original post. The following is just an empty slide.

[akaguny]

yes, but what your enviroment, you use marp-vscode or marp-cli?

[akaguny]

i have been created reproduce sandbox and see that styles applied success

https://codesandbox.io/s/tests-shcherbakov-marpit-reveal-js-forked-nbq51?file=/src/index.ts

[akaguny]

https://codesandbox.io/s/reproduce-descus-2clgb?file=/src/index.ts

on this example i replace your grids with flex and position children with flex-start, flex-end.
explain please, you have a problem with css or with styling in marp?

[Tasselmi]

Had you achieved your goals？ I have the same issue with you，want to convert PPT outline by using Marp. Could you share your code ?

[yhatt]

Don't forget that some styles for header and footer tags are inherited from the default theme. By default, they are located with absolute position and have specific color and font size.

You could reset unwanted styles in the default theme through all: unset; (or overloading defined declarations separately). By setting it, you should be able to begin defining styles without interference from the default theme, for reproducing a design you want.

Marp team is not a design consultant, so it's up to you how you do to reproduce exist slide design with CSS.

[devster31]

Thank you.
I am a bit confused by header and footer directives basically.
I'll try to rephrase the question without the design.

Is there a potential issue or edge case if I use html in the header directive?
Does the center bit of the slide (without header and footer) have a container? This could allow the use of the grid display on each slide and make it a bit easier to simplify styling.

[yhatt]

See also: Marpit documentation about header and footer directives

header and footer directives just are meaning exactly as inserting <header> and <footer> element into right position of contents

# Heading

Lorem ipsum

This Markdown will convert as:

<section>
  <h1>Heading</h1>
  <p>Lorem ipsum</p>
</section>

Refer to the documentation about HTML structure.

If added header and footer directives like this:

<!-- header: Header -->
<!-- footer: Footer -->

# Heading

Lorem ipsum

This Markdown will convert as:

<section>
  <header>Header</header>
  <h1>Heading</h1>
  <p>Lorem ipsum</p>
  <footer>Header</footer>
</section>

Using HTML tags in header and footer directives would be no problems if the theme has expected to use by only your own. If the theme may be used by others, we not recommend because users have to know extra HTML structures for using theme correctly.

[devster31]

Ok, I see. I didn't know if parsing of directives could mess with the content of those directives.
Is there a way to customize marp to wrap all content except the title into a div?
For example like so:

# Title

## subtitle 

paragraph

with output:

<section>
<header><h1>Title</h1> original header content</header>
<div>
<h2>subtitle</h2>
<p>paragraph</p>
</div>
<footer><footer>
</section>

[yhatt]

You have to write a Marp plugin modifying the parsed markdown-it AST for always adding <header> and <footer>, moving Markdown headings into <header>, and adding the <div> element for wrapping contents.

But if you thought it's too technical, just wrapping every slide pages in <div> element manually is practically better.

---
header: <h1>Header</h1> header content
footer: Footer
style: |
  section {
    display: grid;
    grid-template:
      "header" auto
      "contents" 1fr
      "footer" auto / 1fr;
  }

  section > header {
    all: unset;
    grid-area: header;
    background: #fcc;
  }

  section > div {
    grid-area: contents;
    background: #cfc;
  }

  section > footer {
    all: unset;
    grid-area: footer;
    background: #ccf;
  }
---

<div>

Example

</div>

---

<div>

Example

</div>