Moving the position of the categories list

[chiragraman]

Description

Hello!

I've checked the issues and discussions but couldn't find a definitive solution. I'm trying to find a way to move the categories list down so that the top edge of the list is aligned with the top edge of the first post in the list, as in the image below:

In case it is relevant, the index.qmd file includes the following CSS file for the title block:

#title-block-header, #title-block-header-title {
  all: unset;
  background-image: none !important;
}

#title-block-header.quarto-title-block.default .quarto-title .title {
  font-size: 2.5em;
  text-align: center;
  margin: 0 0 -0.5em 0;
}

For the title block I am also using a partial:

<!-- source: https://github.com/gadenbuie/garrickadenbuie-com/blob/main/_partials/title-block-link-buttons/title-block.html -->

<header id="title-block-header" class="quarto-title-block default page-columns">
<div id="title-block-header-title" class="quarto-title page-columns page-full page-layout-full featured-image p-4" style="background-image: url(featured.png), url(featured.jpg), url(../featured.jpg);">
<h1 class="title">$title$</h1>
$if(subtitle)$
<p class="subtitle lead">$subtitle$</p>
$endif$
$if(categories)$
  $if(quarto-template-params.title-block-categories)$
  <div class="quarto-categories">
    $for(categories)$
    <div class="quarto-category">$categories$</div>
    $endfor$
  </div>
  $endif$
$endif$
</div>

$if(hide-description)$
$elseif(description)$
<div>
  <div id="title-block-title-desc" class="description pt-4">
    $description$
  </div>
</div>
$endif$

$title-metadata.html()$

$if(links)$
<div class="mt-4 d-flex flex-row flex-wrap gap-1 justify-content-left justify-content-sm-start" role="group" aria-label="Links">
$for(links)$
<a href="$links.url$" class="btn btn-secondary text-capitalize"><i class="bi bi-$links.icon$ me-1"></i> $links.name$</a>
$endfor$
</div>
$endif$

</header>

Thanks!

[mcanouil]

Any complete code to share? A repository?

Note that because you are using a custom partial, it means you overtake the layout.
This is not really a Quarto question but rather an HTML/CSS question.
This means you need to understand HTML/CSS and inspect the structure of your page with whatever tool you like (IDE, browser inspect mode, etc.)

[chiragraman]

Hi @mcanouil

Sorry for the delay, life happened and this dropped down the priority list. Nevertheless, I have created a minimal working repo here: https://github.com/chiragraman/categories-test.

I did try to figure out what's happening by inspecting the source. It seems like the categories list is embedded in the #quarto-margin-sidebar div. I tried creating a CSS file to push the content down using the top field and then importing this into theindex.qmd file. However, this doesn't affect things at all. This is the setup in the minimal working repo. It also has the partials set up to mirror the full project. I understand this might be a CSS question, but I am not fully sure how it interacts with the rest of the system and would appreciate any insight.

Thanks a lot for your time and input!

[mcanouil]

Unfortunately, you are trying to go against the website/HTML envelope designed in Quarto.

The only ways to change the DOMs are:

• design your own custom listings in HTML/CSS
• write a JavaScript script that moves the categories, adds CSS classes, etc.

[chiragraman]

Ah, I also realized that the title-block-banner was set to false. Turning that back on made it so that the title block was not under the content div, and resolved the issue.