Create a template with horizontal line and company logo

[MLCurious]

Hi,

First of all a big thank you to the Marp team, really great tool!

I would also like to use it for professional presentations, it must use a specific layout for this.

I already have some customization, but get stuck on three points. Is it possible to

• to add a horizontal line under the main header (Header 1),
• to place a logo (png) in the bottom right corner (which is always in the corner, like paginate true).
• to place the page number in the lower left corner.

An example is shown here:

Thanks in advance!

Regards,
Martin

[yhatt]

Of course! We have made no CSS limitations to create your own template. :)

• to add a horizontal line under the main header (Header 1),

h1 {
  border-bottom: 1px solid #8aa6da;
}

https://web.dev/learn/css/borders/

• to place a logo (png) in the bottom right corner (which is always in the corner, like paginate true).

There are several ways. Choose one according to your use case.

Place an inline image to the footer

<!-- footer: ![w:150](https://marp.app/assets/marp.svg) -->

<style>
footer {
  /* Unset default placing inherited from the built-in theme */
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;

  /* Place to right-bottom */
  right: 20px;
  bottom: 20px;
}
</style>

Please note that this approach will limit the usage of footer directive in Markdown contents.

Use background image with specific size

section {
  background-image: url('https://marp.app/assets/marp.svg');
  background-repeat: no-repeat;
  background-position: bottom 20px right 20px;
  background-size: 150px auto;
}

Please note that the footer logo will be removed if used the background image(s) in Markdown contents via ![bg]() syntax.

Add section::before the pseudo-layer

section::before {
  display: block;
  content: url('https://marp.app/assets/marp.svg');
  width: 150px;
  height: auto;

  position: absolute;
  right: 20px;
  bottom: 10px;
}

In this approach, a placed image won't be affected from any Markdown contents. See also: #49

• to place the page number in the lower left corner.

Style section::after pseudo-layer.
https://marpit.marp.app/theme-css?id=pagination

<!-- paginate: true -->

<style>
section::after {
  right: auto; /* Unset default placing inherited from the built-in theme */
  left: 30px;
}
</style>

[mingyuecall]

I have resolved the problem by easily correct bottom into top.

section::before {
display: block;
content: url('https://marp.app/assets/marp.svg');
width: 150px;
height: auto;

position: absolute;
right: 20px;
top: 10px;

}

Thank you!

[bilogic]

section::before {
  display: block;
  content: url('https://example.com/my-logo-png');
  width: 150px;
  height: auto;

  position: absolute;
  right: 20px;
  bottom: 10px;
}

can I resize my content? it is too big right now

[yhatt]

@bilogic Just shrink width: 150px.

[bilogic]

@yhatt thanks the SVG does shrink but the PNG does not

[yhatt]

@bilogic If so, instead of generating the image content directly, you can generate the blank box content and set its background image by background CSS property.

section::before {
  display: block;
  content: '';
  background: url('https://example.com/example.png') no-repeat right bottom / contain;
  width: 150px;
  height: 150px;

  position: absolute;
  right: 20px;
  bottom: 10px;
}

In this case, you have to specify the both of width and height with the proper size because height: auto cannot use.

Ref: https://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements

Alternative: By setting the right aspect-ratio CSS property instead of height, you should control only by changing width.