quartoreveal.js

Adjust positioning and font color of Title and Tabsets on revealjs slides


I would like to change the position of the slide Title to the upper left of the slide and have tab on the same line of the title to its right. How can I accomplish this? I am using Quarto and the revealjs, sample code is below.

---
format:
  revealjs:
    controls: true
    navigation-mode: vertical
    self-contained: true
---

## Format Tabsets 

:::: {.column-screen}
::: panel-tabset

### Tab A 

-   How do I move the Title and tabsets to upper left or upper right corner

-   format the title font as green and the font on the as red

### Tab B
-    Tab B

:::
::::

Solution

  • If you use ## Format tabsets instead of # Format Tabsets, "Format Tabsets" will be rendered as an h2 header and in Quarto revealjs presentation h2 header is placed in the top-left side by default. Even though, if you want to align it to the right side, just specify the CSS style rule for .reveal h2 selector.

    ---
    format:
      revealjs:
        controls: true
        navigation-mode: vertical
        self-contained: true
        css: tabset_style.css
    ---
    
    ## Format Tabsets 
    
    :::: {.column-screen}
    ::: panel-tabset
    
    ### Tab A 
    
    -   How do I move the Title and tabsets to upper left or upper right corner
    
    -   format the title font as green and the font on the as red
    
    ### Tab B
    -    Tab B
    
    :::
    ::::
    

    tabset_style.css

    .panel-tabset-tabby a {
      color: red;
    }
    
    .reveal h2 {
      text-align: right;
    }
    

    Tabset Style