Old Modrinth Layout — Stylus userstyle

What this does (TL;DR)

This userstyle forces Modrinth’s modern UI into the old compact list layout: condensed mod rows, smaller icons, sidebar styling like the previous site, tighter paddings, and generally fewer extra paddings and huge cards.

Features

• Compact vertical list — one mod per line, no massive card grid
• Smaller icons and reduced spacing like the classic Modrinth
• Sidebar looks like the old site: darker, slim, and functional
• Removes rounded large cards and excessive white-space
• Simple, focus-first CSS — easy to tweak

Install

1. Install Stylus (Chrome/Opera/Firefox supported).
2. Open the theme page: userstyles.world — Old Modrinth Layout
3. Click Install or paste the CSS below into a new local Stylus style for modrinth.com.
4. Refresh Modrinth and enjoy the retro layout.

CSS (copy & paste)

/* ==UserStyle==
@name        Old Modrinth Layout Restorer
@namespace   userstyles.world
@version     1.0.0
@description Make Modrinth look like the old compact list layout.
@author      Pixelpaw
==/UserStyle== */

@-moz-document domain("modrinth.com") {
  /* Global layout fixes */
  body {
    background-color: #111 !important;
    color: #ddd !important;
    font-family: "Inter", sans-serif !important;
  }

  /* Compact list mode */
  .projects-grid,
  .search-results,
  .project-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Each mod entry (list item style) */
  .project-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #222 !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    transition: background 0.15s ease-in-out;
  }

  .project-card:hover {
    background-color: #222 !important;
  }

  /* Icon smaller */
  .project-card img,
  .project-card .project-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
    margin-right: 12px !important;
  }

  /* Text next to icon */
  .project-card .project-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .project-card .project-title {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #fff !important;
  }

  .project-card .project-description {
    font-size: 12px !important;
    color: #aaa !important;
  }

  /* Sidebar styling like old modrinth */
  aside,
  .filters,
  .sidebar {
    background-color: #151515 !important;
    border-right: 1px solid #222 !important;
    padding: 10px 15px !important;
  }

  /* Sidebar headings */
  .sidebar h2,
  .filters h2 {
    color: #bbb !important;
    font-size: 13px !important;
    margin-top: 10px !important;
    border-bottom: 1px solid #222 !important;
    padding-bottom: 4px !important;
  }

  /* Buttons and dropdowns */
  button,
  select,
  .dropdown {
    background-color: #1b1b1b !important;
    color: #ccc !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
  }

  button:hover,
  select:hover {
    background-color: #222 !important;
  }

  /* Remove big mod cards layout */
  .project-card-large,
  .project-list-grid {
    display: none !important;
  }

  /* Header cleanup */
  header {
    background-color: #101010 !important;
    border-bottom: 1px solid #222 !important;
  }

  /* Remove extra padding from the search bar area */
  .search-header,
  .search-bar-container {
    padding: 5px 10px !important;
  }

  /* Pagination & footer small */
  footer,
  .pagination {
    font-size: 11px !important;
    color: #666 !important;
  }

  /* Reduce icon size in list */
  .project-stats {
    font-size: 11px !important;
    color: #888 !important;
  }

  /* Remove rounded corners on cards globally */
  * {
    border-radius: 0 !important;
  }
}
          

Troubleshooting

If things look broken after a Modrinth update:

• Open the Stylus editor and disable the style, then re-enable it.
• Inspect the element that changed (right-click → Inspect). The site may have renamed classes — open an issue on the GitHub repo and paste a screenshot + HTML snippet.
• I intentionally used broad selectors — if a future update uses different markup you may need to tweak selectors in the CSS.

Changelog

• 1.0.0 — Initial release: compact list, sidebar styling, icon & spacing tweaks.

License

MIT — do whatever. If you break something, that's on you. Patches welcome on GitHub.