wiki-css-layout-examples.md

title	Wiki.js CSS Layouts
description	Responsive layout examples for Volmit Wiki.js pages
published	true
date	2026-09-04 00:00:00 UTC
tags	meta, wikijs, css, layouts, examples
editor	markdown
dateCreated	2026-08-27 00:00:00 UTC

These examples use short Shaped Portals content to show common page layouts. Use one strong layout per page. A landing page usually needs a hero, a few task links, and space for real in-game media.

• Landing hero
• Task navigation
• Media slots
• Reference layout
• Reusable stylesheet {.grid-list}

Landing hero

Use a hero to answer three questions: what the plugin does, where to start, and what it looks like.

Shaped Portals

Build portals that fit the build.

Create custom Nether and End portal frames while keeping Minecraft's normal travel.

Build a portal Configuration

Gameplay video goes here Show the frame being built and used.

Keep the description under two sentences and limit the actions to the two most useful destinations.

Task navigation

Task names are easier to scan than a list of page titles.

Build a portal Nether and End frame instructions. Change the rules Materials, dimensions, worlds, sounds, and particles. Fix a problem Activation, protection, integrity, and travel checks.

Make the full card a link. Each card should contain one destination, a short label, and one line of context.

Media slots

Placeholders make the intended shot clear without pretending that temporary art is final.

Nether portal GIF goes hereAn irregular frame being lit.

End portal GIF goes hereThe final eye activating the surface.

Configuration image goes hereThe main settings menu.

Write alternative text for the finished media. Avoid autoplay with sound. Videos need controls and captions when speech carries information.

Reference layout

Use Markdown for dense reference material. It remains readable when page CSS is unavailable.

Command	Who can use it	Result
/sp status	Players and console	Shows service and portal counts
/sp config	Operators by default	Opens the settings menu
/sp portals [page]	Operators by default	Lists managed portals

{.dense}

Put short tables near the task they support. Move long API or configuration tables to their own page.

Reusable stylesheet

Repeated layouts belong in the shared theme. Scope every selector to a unique page class so it cannot change unrelated pages.

.v-main .contents .plugin-home {
  --plugin-accent: #7b2b99;
  display: grid;
  gap: 3rem;
}

.v-main .contents .plugin-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--volmit-line);
  background: color-mix(
    in srgb,
    var(--plugin-accent) 8%,
    var(--volmit-surface)
  );
}

.v-main .contents .plugin-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

.v-main .contents .plugin-card {
  min-height: 120px;
  padding: 1rem;
  border: 1px solid var(--volmit-line);
  background: var(--volmit-surface);
}

.v-main .contents .plugin-card:focus-within,
.v-main .contents .plugin-card:hover {
  border-color: var(--plugin-accent);
}

@media (max-width: 959px) {
  .v-main .contents .plugin-hero {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-main .contents .plugin-home *,
  .v-main .contents .plugin-home *::before,
  .v-main .contents .plugin-home *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Use fluid grids instead of fixed desktop widths. Check keyboard focus, text contrast, mobile reflow, and both Wiki.js themes before publishing. The live Shaped Portals page uses a scoped version of this approach. The Adapt page example shows the same ideas on a longer page with a skill tree.