Can the footer area of a Quarto (Revealjs) presentation be coloured?

[matt-dray]

I'm trying to create a coloured bar at the bottom of a Quarto presentation (Revealjs format), like the one that appears at the bottom of this slide:

I created that slide with {xaringan} and in my custom CSS I specified it with border-bottom supplied to .remark-slide-content:

.remark-slide-content {
  color: #000;
  font-size: 40px;
  border-bottom: 35px solid #006682; 
  padding: 0 50px 0 50px;
}

I see there's a footer option for the revealjs format—which I've seen others use for text or links—but I'm not sure if this can be used to colour it.

Is there a way in Quarto/Revealjs to colour the footer area directly, or perhaps there's more of a hacky approach, like the one for {xaringan} above?

[melissavanbussel]

You can take a very similar approach with Quarto! Rather than .remark-slide-content in your custom CSS file, use .reveal .footer > *.

Example .qmd file:

---
title: "Your title goes here"
format: 
  revealjs:
    footer: "Footer text goes here"
    menu: false
editor: visual
css: style.css
---

## This is a slide title

This is some text.

In the style.css file:

.reveal .footer > * {
	background-color: #006682;
	color: white;
}

This produces the following:

[matt-dray]

Superb, thank you for your help.

[thebigdalt]

I know this has been answered already, but the provided answer didn't work for me. Perhaps something has changed since then. Instead, the following worked for me.

Example .qmd file

---
title: "Your title goes here"
format: 
  revealjs:
    logo: custom-logo.png
    footer: "Footer text goes here"
    theme:
      - default
      - custom.scss
---

## This is a slide title

This is some text.

Example custom.scss

/*-- scss:defaults --*/

$custom-background: #0000ff !default;

/*-- scss:rules --*/

.reveal .footer {
    color: #ffffff;
    background-color: $custom-background;
    display: block;
    position: fixed;
    padding-bottom: 12px;
    padding-top: 12px;
    bottom: 0px !important; // Makes footer div flush with bottom of slide
    width: 100%;
    z-index: 2 !important; // Sets the footer div further down the z-index
  }
  
.reveal .slide-logo {
    margin-bottom: 6px !important; // Lowers logo more in line with rest of footer
    z-index: 5 !important; // Keeps logo above footer div
  }

[mcanouil]

The use of !important is not advisable in general, instead, you should more accurately define your (S)CSS rules if possible (sometimes it is tricky with Reveal.js ...).

The solution is 2 years old, since then a lot have changed in Reveal.js template and Reveal.js itself.

[thebigdalt]

These flags actually are needed. Removing them breaks it again. I have next to zero knowledge in (S)CSS or web development in general, but from what I gather, footer.css is dominating quarto.css for both the footer and logo rules. Unlike quarto.css, it doesn't appear that footer.css is derived from the SCSS files. It looks like it belongs to the support RevealJS plugin included with Quarto. So, I am not sure that you can do anything other than override footer.css rules with !important.

[mcanouil]

Not advisable does not mean forbidden.
A rule defined with !important can only be overwritten by another rule using !important.
It escalates until there is no more flexibility.
So, caution is advised when using it.