Common snippets

Copy-paste CSS for Quiet's most-requested tweaks: logo size, menu icons, 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>

These apply once you have added icons to your menu, either way described on Navigation icons.

Keep every uploaded icon's own colours. Quiet redraws an uploaded icon in the text colour so it follows light and dark mode. Ending a file name with -color keeps one icon as uploaded; this keeps them all.

<style>
  img[data-part="icon"] {
    -webkit-mask: none;
    mask: none;
    background: none;
    object-position: center;
  }
</style>

Larger icons in the header only.

<style>
  [data-region="primary-nav"] [data-part="icon"] { width: 20px; height: 20px; }
</style>

An icon-only header bar. Hides the labels in the top row visually while keeping them for screen readers, so every link stays named. Dropdown rows keep their text. Use this only when every header item has an icon.

<style>
  [data-nav-list] > li > :is(a, button) > [data-part="label"] {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
</style>

Reading experience

Widen the article column. Quiet's reading measure is about 39.5rem, chosen for line length. To change it, restate the article grid with a different middle track:

<style>
  [data-region="post-body"].gh-content {
    grid-template-columns:
      [full-start] minmax(1.25rem, 1fr)
      [wide-start] minmax(0, 7rem)
      [main-start] min(44rem, 100% - 2.5rem) [main-end]
      minmax(0, 7rem) [wide-end]
      minmax(1.25rem, 1fr) [full-end];
  }
</style>

Do not wrap the article in a max-width

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>

Hide the Featured strip on the archive, keeping the star on each featured line.

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

Hide the star on featured lines, keeping the strip. Screen readers still hear the word Featured on those lines.

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

Recolour the star.

<style>
  [data-part="flag"] { color: #b42318; }
</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.

Choose the text colour on your accent. Buttons, the current page number and selected text sit on your accent colour. Quiet measures your accent and picks black or white, whichever reads better. If you prefer the other one, set it:

<style>
  :root {
    --color-on-accent: #ffffff;        /* text on buttons and pills */
    --color-on-accent-muted: #f3ede4;  /* small print in Ghost's signup card */
  }
</style>

The second line only matters if you use Ghost's signup card on an accent background; leave it out otherwise. One rule covers light and dark mode, because your accent is the same in both.

Check the contrast

Quiet's own pick always clears the 4.5:1 that WCAG asks of button text. Yours might not. Paste your accent and your text colour into the WebAIM contrast checker first. Some accents are close to the line. In the first four below black passes and white does not; Quiet's own default, last in the table, is the other way round:

Accent	Black text	White text
`#b0732b` (warm brown)	5.33:1	3.94:1
`#3B82F6` (Ghost blue)	5.71:1	3.68:1
`#EC4899` (Ghost pink)	5.95:1	3.53:1
`#EF4444` (Ghost red)	5.58:1	3.76:1
`#806412` (Quiet's default)	3.75:1	5.60:1

If you want white on an accent where black scores higher, the cleaner fix is a slightly darker accent rather than an override: #a26a28 instead of #b0732b gives white 4.54:1 with no snippet at all.

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.