Quarto Revealjs Footer Banner Colour

[JackDavison]

Hello, this should hopefully be an easy answer but I'm struggling to work out how exactly to achieve this!

I'm putting together a revealjs theme and am trying to get it to reflect my company's powerPoint theme as closely as possible. Our pptx template has a solid bar of colour at the bottom of the page where logos and so on live.

The logos & text etc. I can do okay, but it is the solid bar of colour I'm struggling to achieve. I know this can be done, as Cara Thompson shared an example revealjs slide with it on Twitter (looking at the murky blue banner at the bottom there).

How does one achieve this?

kr, Jack

[HanOostdijk]

Why not contact her via her website (the url is on the plot)?

[JackDavison]

That's my back-up, but rather than bother one person I thought I'd just ask more widely as I imagine its not an uncommon thing to want to do.

[HanOostdijk]

You could do something like this:

---
title: "My title"
format: 
  revealjs:
    theme: HOQC.scss 
    footer: "This page brought to you by Han"
    
---

## First page after title

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

```{r}
1 + 1
```

This page gets a special footer

::: footer
Learn more: [Syntax Highlighting](https://quarto.org/docs/output-formats/html-code.html#highlighting)
:::

## New page 

Another nice page with the default footer

with HOQC.scss :

/*-- scss:defaults --*/

.reveal .footer {
 color: #ff0000 !important;
 display: inline-block ;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow; 
}