Common snippets

Copy-paste CSS for Quiet's most-requested tweaks: logo size, reading width, hiding parts of a post, restyling cards, colour changes and dark-mode-only rules.

Paste any of these into Settings → Code injection → Site header, then reload with Cmd/Ctrl + Shift + R.

Each block is complete, including the <style> tags. If you use several, you can keep one <style> tag and put the rules inside it.

Change the numbers, keep the selectors

The selectors are Quiet's stable handles, so they survive theme updates. The values are yours to tune. If a rule seems to do nothing, check When a rule does not apply.

Logo and header

Make the header logo bigger or smaller. The logo appears in the header and the footer, so scope it.

<style>
  [data-region="masthead"] [data-part="logo"] { height: 44px; }
</style>

Size the footer logo separately.

<style>
  [data-component="footer-brand"] [data-part="logo"] { height: 28px; }
</style>

Stop the header sticking to the top of the screen.

<style>
  [data-region="site-header"] { position: static; }
</style>

That grid is what lets a wide image or a full-width gallery break out of the text column. Capping [data-region="post-body"] with a max-width cancels the breakout, and every wide card renders at text width.

Make the article text a little larger.

<style>
  [data-region="post-body"] { font-size: 1.075rem; }
</style>

Hide the reading time everywhere. (Or switch it off in Post settings, which is tidier.)

<style>
  [data-part="read-time"] { display: none; }
</style>

Hiding things

Hide the dark-mode button while leaving System mode on.

<style>
  [data-component="theme-toggle"] { display: none; }
</style>

Hide two share networks, keeping the rest.

<style>
  [data-share-platform="facebook"],
  [data-share-platform="x"] { display: none; }
</style>

Hide the RSS icon in the footer.

<style>
  [data-social-platform="rss"] { display: none; }
</style>

Hide the category label on archive rows.

<style>
  [data-component="post-card"][data-variant="row"] [data-part="kicker"] { display: none; }
</style>

Cards and feeds

Turn the picture cards square.

<style>
  [data-component="post-card"][data-variant="grid"] [data-part="image"] img {
    aspect-ratio: 1 / 1;
  }
</style>

Make card titles smaller.

<style>
  [data-component="post-card"] [data-part="title"] { font-size: 1.25rem; }
</style>

Move the introduction portrait's crop up, for a photograph where the face sits high.

<style>
  [data-layout^="split"] img[data-part="image"],
  [data-layout^="panel"] img[data-part="image"] { object-position: top; }
</style>

Colours

Give the signup band its own background.

<style>
  [data-component="newsletter-panel"][data-variant="band"] {
    background: var(--color-accent-soft);
  }
</style>

Change the colour of links inside articles, keeping everything else on your accent.

<style>
  [data-region="post-body"] a { color: #7a4419; }
</style>

Check both colour schemes

A fixed colour like the one above has to work on a light page and a dark one. Quiet's own variables (var(--color-accent-ink) and the rest) already adjust; a hex value does not. Pair it with a dark-mode rule below if you use one.

Dark mode only

<style>
  .dark [data-region="site-footer"] { background: var(--color-surface-2); }
  .dark [data-region="post-body"] a { color: #d8a878; }
</style>

And light mode only:

<style>
  html:not(.dark) [data-region="home-section"][data-variant="hub"] {
    background: var(--color-surface);
  }
</style>

One kind of page only

<style>
  body.home-template [data-region="site-header"] { border-bottom: 0; }
  body.post-template [data-region="feature-image"] { margin-bottom: 3rem; }
</style>

Printing

Quiet already leaves out the menus, the share row, forms and comments when a reader prints. To drop something else as well:

<style>
  @media print {
    [data-region="related"],
    [data-component="author-card"] { display: none; }
  }
</style>

Hook reference, for every handle you can target.