Gin jako administrativní téma - nastavení a tuning

zveřejněno 21. 8. 2025

Administrativní téma vzhledu Gin bude brzy výchozí a nahradí stávající téma Claro. Ukážeme si pár triků, jak si ho správně přizpůsobit k obrazu svému.

Jak to začalo - Seven => Claro

Už od dob Drupal 7 jsem byl zvyklý používat admin téma Seven. To bylo součástí Drupal 7 instalace a figurovalo i v následujících verzích Drupal 8 a 9. Stejně jako Drupal 7 samotný toto téma pocházelo z let kolem roku 2010, takže postupně stárlo. Postupně tedy docházelo k nahrazení jiným témetem - Claro. To začínalo jako samostatné téma, pak se dostalo do jádra a nakonec se stalo výchozím tématem. Opačný směr čekalo téma Seven - přestalo být výchozím tématem a nakonec i součástí výchozí instalace a udržovalo se jako contrib téma. Díky tomu jsem Claro mohl přeskočit a používat dále Seven. Jako contrib verze existuje stále, ve verzi 2.0.x-dev dokonce podporuje i Drupal 11. Přesto asi nastal čas přejít na něco novějšího, modernějšího.

 

Jak to pokračovalo - Claro => Gin

Kolem konce roku 2019 začalo vznikat nové contrib téma jménem Gin, jako postupná evoluce Claro. Postupně rostla jeho popularita, až bylo nasazené jako výchozí téma do Drupal CMS 1.0 (leden 2025) . Následně během června 2025 bylo oznámeno, že nahradí Claro i pro Drupal core (Drupal core will adopt Gin admin theme to replace Claro https://www.drupal.org/about/core/blog/drupal-core-will-adopt-gin-admin…)

 

To bylo něco pro začátek, teď se podíváme na samotnou instalaci, používání a nějaké triky.

 

Instalace tématu Gin

Ve stávající verzi Drupal 11.2 se gin musí instalovat, což není žádný problém, jen si najdeme správnou verzi (https://www.drupal.org/project/gin).

gin releases

composer require 'drupal/gin:^5.0'

Při jeho stažení se stáhne i podpůrný modul Gin Toolbar (Helper module to bring the Gin Toolbar into the Frontend of your site https://www.drupal.org/project/gin_toolbar).

Téma si povolíme a nastavíme jako výchozí pro administraci i editaci. A také si můžeme projít nastavení a přizpůsobit si ho podle svého /admin/appearance/settings/gin

gin settings
 

Git Toolbar (gin_toolbar) + Admin Toolbar (admin_toolbar)

Jelikož mám rád horní menu - toolbar, a stále také používám Admin Toolbar (https://www.drupal.org/project/admin_toolbar), nastavil jsem si hodnotu Navigation (Drupal Toolbar) na Legacy, Classic Drupal Toolbar.

Zároveň jsem si povolil i Gin Toolbar (modul gin_toolbar). Díky tomu se toolbar ukazuje i na front-end tématu.

Následně jsem si všiml, že položky menu (Configuration a Help) nemají stejné pořadí, jak jsou seřazené v Administration menu. Po nějakém pátrání jsem zjistil, že to tak schválně Gin mění. Každopádně dá se to změnit pomocí patche. A pozor, patch je potřeba pro Gin téma (back-end editace) i Gin Toolbar (front-end). Oba se dají najít zde:

Mimochodem patch přidá konfiguraci tohoto chování - Rearrange Admin menu items:

menu items order

 

Compact Gin (compact_gin)

Další, s čím jsem bojoval, je spousta prostoru kolem všech elementů na stránce - v porovnání s tématem Seven je vidět tak polovina informací, je nutné pořád někam skrolovat. Lze sice nastavit Layout density na Narrow, ale to pomůže jen z části.

layout density

Tento problém zkouší řešit modul Compact Gin (https://www.drupal.org/project/compact_gin), což je jen vlastně jeden css soubor. Ale! Vypadá sice nadějně, ale zjistil sem, že přepisuje až moc. Zkoušel jsem pár věcí zakomentovat, až jsem dospěl k názoru, že lepší cestou je naopak si přidat pár vlastník css definicí.

 

web/sites/default/files/gin-custom.css

Jak je dobře popsáno v dokumentaci, můžeme použít soubor gin-custom.css pro customizaci Gin tématu (Custom theming https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-t…).

Gin třeba nastavuje maximální šířku elementů formuláře, což je většinou zbytečné plýtvání místem. Má to zase ale své opodstatnění (a11y), které ale 99% uživatelů spíše otravuje (Remove max-width from field description https://www.drupal.org/project/gin/issues/339159).

Řešením je jeden řádek:

/* reset gin width limits */
.form-item__description, .fieldset__description, .filter-guidelines__item {
 max-width: unset;
}

Proč není vidět tlačítko Save & Edit (save_edit)

Možná používáte tento šikovný modul Save & Edit a pátráte, proč tlačítko není v Gin tématu vidět (lépe řečeno je schované za dalšími akcemi - pod třemi tečkami). Pro Gin téma je nutné povolit položku "Display as Gin Admin theme primary actions"  v /admin/config/save_edit/settings.

save and edit in gin

Novější verze Save & Edit už by měly detekovat Gin téma a automaticky to nastavit při instalaci (Save_edit in GIN admin theme in Drupal CMS (11) hardly accessible https://www.drupal.org/project/save_edit/issues/3528935).

 

Závěr

Gin téma je jasná budoucnost Drupalu, takže je čas ho začít používat. Po instalaci je třeba pár věcí nastavit, aby to fungovalo podle našich představ.
Jeho možnosti si můžeme rozšiřovat pomocí dalších contrib modulů, jako je Gin toolbar. Jejich seznam můžete najít třeba zde https://www.drupal.org/docs/contributed-themes/gin-admin-theme/related-…