Replicating title-banner-block with template partials

[p-vllnva]

Description

Hello everyone,

I wanted to make a few tweeks to the title block of some html output and decided to try my hand at template partials for the first time.

The starting point can be found here https://p-vllnva.github.io/trade_lunch. There are two things I would like to change, I would prefer to have the logo above the presentation and to have the date within the banner.

I tried playing around with the styles.css file (changing the height and background position in .quarto-title-block .quarto-title-banner {}) with mixed success. The problem is that the content is not sized dynamically, so the logo and the title end up superposed with different size of displays.

I then tried to add a title-block.html partial which almost works except that the banner does not span to full width of the document (instead it spans the width of its parent element). The problems seems to be that on the current version, the title block is not included in the <main> tag (#quarto-document-content) while it is after I include the custom title-block partial.

If you have any idea on how to fix it or on what causes this behaviour, I would love to read it.

Below is an example to reproduce the behaviour.

The .qmd looks looks like this

---
title: Test
date: last-modified
date-format: MMM D, YYYY
format:
  html:
    theme: lux
    smooth-scroll: true
    anchor-sections: true
    link-external-icon: true
    link-external-newwindow: true
    embed-resources: true
    template-partials: 
      - title-block.html
css: styles-test.css
linkcolor: "#2e4588"
---
  
# This is a test

Test test test.

with the following css:

#title-block-header {
  background: #2e4588;
  text-align: center ;
}

#title-block-content {
  padding-top: 15px;
}

#title-block-content > h1 {
  color: white;
  padding-top: 10px;
}

#title-block-content > p {
  text-align: left;
  color: white;
  font-size: 9pt;
  padding-left: 5px;
}

and title-block partial:

<header id="title-block-header">
  <div id="title-block-content">
    <img src="https://dauphine.psl.eu/_assets/4ad852879daddd0ddb4f19951dc58cb9/assets/img/logo/logo_white.svg"/ width="30%">
    $if(title)$
    <h1 class="title">$title$</h1>
    $endif$
    $if(date)$
      <p class="date">Updated $date$</p>
    $endif$
  </div>
</header>

Many thanks.

[mcanouil]

Unfortunately, when you take over the partial, CSS/HTML customisation is on you.
There are better places to learn and use those elements.

Quarto creates an enveloppe for its documents and provides partials to tweak parts of it without necessarily having to take over everything.
If you open your favorite browser and use the developper/inspect mode, you'll see that layout and where the title-block is:

Source code of the partials and the template is described in the documentation: https://quarto.org/docs/journals/templates.html#html-partials

[rkrug]

Thanks - I will look at that and come back if I have more questions.