Don't want to admit how long I have been struggling to do this (even with the help of copilot - I can't get it right)

[bujayherster]

Description

I am trying to customize the html output from quarto. Specifically, I want each header (and only the headers - not the content beneath the headers) to have a colored fill and a border. Also, I am only able to get the headers to span the main body of the report but I really want the headers and content to start from the main body and extend right to the right edge (with a little padding on right edge), so effectively, I don't want a right margin or there is no content on the right margin., so that main body can take up the right 2/3s of the screen. On the left side, I want a TOC.

The link here shows what I am trying to build (I used excel to create what I want quarto to create - can ignore the light grey cell borders)
https://imgur.com/a/RhCRWSp

[jimjam-slam]

Hey @bujayherster, I'll break this into two parts!

Firstly, to have your page content expand into the margin and sidebar (if there's no content there already), you'll want to add page-layout: full under format.html, either to your individual document frontmatter or your _quarto.yml (to make it the default). Since you'll have a TOC on the left, content should stay out of there even with this option turned on.

Second, you can use some CSS to colour your headings:

main.content h1
main.content .h1,
main.content h2,
main.content .h2,
main.content h3,
main.content .h3,
main.content h4,.h4,
main.content h5,
main.content .h5,
main.content h6,
main.content .h6 {
  background: red;
  border: 2px solid yellow;
}

Save this to a CSS file and add it to your document frontmatter using the css option under format.html (or add it to _quarto.yml to make it the default).

[bujayherster]

Thank you!!!! I’ll take a look first thing tomorrow. Appreciate your response!

[bujayherster]

Here is an image of what I am trying to do. Not sure why it wasn’t working in the earlier link I provided.

https://imgur.com/a/Y4Tb5qM

[bujayherster]

The below get's me 99% there. Now I would like to get the Date info that is just off right center to be moved to the right edge to align with the right edge of the shared header region. Any thoughts?

---
title: "Document Title"
author: "Author"
date: "`r Sys.Date()`"
format:
  html:
    page-layout: full  
    toc: true
    toc-depth: 3
    number-sections: false
    theme: cosmo
    toc-location: left
---

<style>
main.content h1,
main.content .h1,
main.content h2,
main.content .h2,
main.content h3,
main.content .h3,
main.content h4,
main.content .h4,
main.content h5,
main.content .h5,
main.content h6,
main.content .h6 {
  background: #182A54;
  border: 2px solid white;
  color: white;
  padding: 4px 8px;     /* Reduce vertical and horizontal padding */
  margin-top: 0.5em;    /* Reduce space above */
  margin-bottom: 0.3em; /* Reduce space below */
  font-size: 1.1em;     /* Optional: slightly smaller font */
}
</style>

# Section 1

Text here

[bujayherster]

This is probably close enough - thanks all for the help!

---
title: "Template"
author: "My Name"
date: today
format:
  html:
    page-layout: full  
    toc: true
    toc-depth: 3
    number-sections: false
    theme: cosmo
    toc-location: left
    css: style.css
---

<details open>
<summary><strong>Section 1</strong></summary>

## Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="scroll-wrapper">
```{r}
wide_df <- as.data.frame(matrix(runif(50 * 50), nrow = 50))
colnames(wide_df) <- paste0("Var", 1:50)
knitr::kable(head(wide_df,20), format = "html", table.attr = 'class="scroll-table"')

```

CSS script
/* Heading styles */
main.content h1,
main.content .h1,
main.content h2,
main.content .h2,
main.content h3,
main.content .h3,
main.content h4,
main.content .h4,
main.content h5,
main.content .h5,
main.content h6,
main.content .h6 {
  background: #182A54;
  border: 2px solid white;
  color: white;
  padding: 4px 8px;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  font-size: 1.1em;
}

/* Title metadata layout */
.quarto-title-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quarto-date {
  margin-left: auto;
  text-align: right;
}

/* Scroll wrapper for both vertical and horizontal scroll */
.scroll-wrapper {
  max-height: 400px;
  overflow: auto; /* Enables both horizontal and vertical scrollbars */
  margin: 0 auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

/* Table styling */
.scroll-table {
  border-collapse: collapse;
  width: max-content; /* Allows horizontal expansion */
  min-width: 100%;     /* Prevents shrinking too small */
  table-layout: auto;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Zebra striping */
.scroll-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.scroll-table tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Header and cell styling */
.scroll-table th,
.scroll-table td {
  padding: 10px 16px;
  min-width: 120px;
  border: 1px solid #000;
  text-align: left;
}

/* Sticky header */
.scroll-table th {
  background-color: #CBDFF1;
  color: #000;
  font-weight: normal;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Remove sticky first column and gray background */
.scroll-table th:first-child,
.scroll-table td:first-child {
  position: static;
  background-color: inherit;
  z-index: auto;
}

[jimjam-slam]

No worries, @bujayherster! If you're putting the CSS directly in the QMD file, make sure you wrap it in a <style> tag and then in a raw HTML block:

---
title: Hello
---

Enim ad nulla non consequat dolor incididunt voluptate consequat. Eu id eu aliquip ex adipisicing esse non.

```{=html}
<style>
  // ... your CSS goes here
</style>
```