How to change the font, size and color of texts inside a tabset?

Question

I have a Quarto document that is converted to HTML. In this document, I use the .panel-tabset class to create tabbed panels containing graphs and text produced in R. I want to adjust the font, colour, and size of these texts to set them apart from the rest of the report. How can I achieve this? I am including the .qmd code and the .css code I am using for the tabsets.

Here is the .qmd code

---
title: "Untitled"
format:
  html:
    css:
     styles.css
---

```{r include=FALSE}
library(ggplot2)
library(palmerpenguins)
```

The following graphs will show....

::: panel-tabset
## Tab1

```{r echo=FALSE}
ggplot(mtcars, aes(hp, wt)) +
  geom_point()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

## Tab2

```{r echo = FALSE}
ggplot(penguins, aes(bill_depth_mm, body_mass_g, color = sex)) +
  geom_point()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

## Tab3

```{r echo = FALSE}
ggplot(penguins, aes(body_mass_g, color = sex)) +
  geom_histogram()
```

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.
:::

## Title1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et elementum velit. Fusce lobortis pulvinar ex quis pharetra. Aenean dapibus turpis neque, sed feugiat lacus rutrum sit amet. Praesent quis fringilla nisl. Pellentesque ac ligula mollis, mattis elit ut, consectetur diam. Maecenas tristique bibendum diam quis blandit. Suspendisse elementum maximus.

The .css file I use has the following:

.panel-tabset .nav-item .nav-link {
  font-size: 14px;
  font-style: bold;
  background-color: #e0e0e0;   /* fondo gris claro */
  color: #333;                 /* texto oscuro */
  border-radius: 0.25rem;      /* esquinas redondeadas */
  margin-right: 0.25rem;       /* separación entre pestañas */
}


.panel-tabset .nav-item .nav-link.active {
  background-color: #007bff !important;  /* azul vivo */
  color: #fff !important;                /* texto blanco */
}


.panel-tabset .nav-item .nav-link:hover {
  background-color: #0056b3;  /* azul más oscuro al pasar el ratón */
  color: #fff;
}

I know adding a .rmd doc to a question can be difficult, but there is a way: use all of the triple-backticks your doc has, and around the entire document (before the yaml top-matter, after the last chunk/text), use FOUR backticks. SO allows over 3 backticks to indicate a code block, and if 4 then it will preserve all of the 3-backtick blocks as-is until the closing 4-backticks. See my edit. — r2evans
– r2evans, Commented Jul 13 at 23:23
Additional remarks: 1) Provide a minimal, reproducible example. Your code is neither minimal (three tabs are not needed for describing your problem) nor reproducible (penguins is not defined). 2) font-style: bold; is no well-defined css and hence has no effect. — Jan
– Jan, Commented Jul 14 at 5:36

Jan · Accepted Answer · 2025-07-14 05:44:33Z

1

As a selector, you can use .panel-tabset > .tab-content > .tab-pane > p, e.g.

.panel-tabset > .tab-content > .tab-pane > p {
    color: red;
    font-size: 11pt;
    font-family: Georgia, serif;
}

yields

answered Jul 14 at 5:44

Jan

11.9k7 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change the font, size and color of texts inside a tabset?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related