Question 203341 in CSS Question posted in
Some basic documentation can be found here.

Css – Add background colour to text column in Quarto

I’m creating some slides using Quarto and the revealjs format. There is some analysis text in the left-hand side column which I’d like to have a background colour. The background box should extend to a set length rather than finish where the text ends. The right-hand side column will have an image. I’m currently working with the below but am not sure what needs including to add the background colour.

Code:

## Title

:::: {.columns}
::: {.column width="30%"}

* Point 1
* Point 2
* Point 3

:::
::: {.column width="70%"}

Image will go here

:::
::::

Result:

Screenshot of what the code produces

The kind of thing I’m aiming for:

Intended output of background colour behind the text

Tags:

2

Answers


  1. 0

    Define a css class (suppose text-col) and define height and background-color for this class and then apply the class selector .text-col on the .column Div you want.

    style.css

    .text-col {
  height: 80%;
  background-color: lightgray;
}

    presentation.qmd

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

## Title

:::: {.columns}
::: {.column .text-col width="30%"}

* Point 1
* Point 2
* Point 3

:::
::: {.column width="70%"}

Image will go here

:::
::::

    rendered output

    Login or Signup to reply.
  2. 0

    If you’re not familiar with CSS you can use the below pattern as one way to do it and nest multiple css arguments in a row with the same div.

    ## Title

::::: {.columns}
::: {.column width="30%"}
:::: {style="background-color: #2780e3"}

* Point 1
* Point 2
* Point 3

::::
:::

::: {.column width="70%"}


Image will go here

:::
:::::
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search