reveal.js - How to apply a class to headings in a Quarto Revealjs presentation? - Stack Overflow

admin管理员组

文章数量:1431742

I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css file:

.longtitle{
  font-size: 0.7em;
}

This is my qmd code:

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

<h2 class="longtitle">Try to apply the "longtitle" class</h2>

- Not working

I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css file:

.longtitle{
  font-size: 0.7em;
}

This is my qmd code:

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

<h2 class="longtitle">Try to apply the "longtitle" class</h2>

- Not working

• quarto
• reveal.js

Share Improve this question Follow edited Mar 25 at 21:48 Jan 10.2k66 gold badges2121 silver badges3333 bronze badges asked Nov 29, 2024 at 16:26 ClaudioClaudio 1,57099 silver badges1717 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This is because your css gets overwritten by the .reveal h2 styles. Instead, a possibility is to use a span. The css can stay as it is and we use

## [Try to apply the "longtitle" class]{.longtitle}

what defines a span which has the longtitle class, where the span is located inside an h2, so that it is in particular inside a suitable header.

custom.css

.longtitle {
  font-size: 0.7em;
}

index.qmd

---
title: test
format: revealjs
self-contained: true
css: custom.css
---

## Short title

- Item

## Very very long title that goes in two lines

- Item

## [Try to apply the "longtitle" class]{.longtitle}

- Working

本文标签： revealjsHow to apply a class to headings in a Quarto Revealjs presentationStack Overflow