Gantry5 keretrendszer használata esetén, nagyon könnyen módosíthatjuk, valamint kiegészíthetjük meglévő sablonunk vagy bővítményeink formázási stílusait.

1. Első lépésként - ha még nem létezik - hozzunk létre egy scss mappát a ../templates/sablounkneve/custom/ struktúrában. Ehhez lépjünk be az adminisztrátori oldalon a Bővítmények -> Sablonkezelő -> Sablonok menüpontba, majd válasszuk ki a használt sablonunk részletes nézetét.

2. Nyomjuk meg a Mappák kezelése gombot, majd válasszuk ki baloldalon a custom mappát, majd jobb oldalon hozzunk létre egy scss nevű mappát.

3. Az előzőleg létrehozott mappába, hozzuk létre a custom.scss fájlt.

4. Lépjünk bele az előzőleg létrehozott fájlba. Megjegyezés: ebbe a fájlba bármilyen scss/css típusú tulajdonságot beleírunk, az felül fogja írni az eredeti osztályhoz vagy azonosítóhoz tartozó tulajdonságot.

5. Nyissunk a böngészőnkön egy új fület, majd keressük meg az oldalunkon a megformázandó osztályhoz vagy azonosítóhoz tartozó tulajdonságokat (pl. egy adott elem háttérszíne). Ezt a legkönnyebben úgy tehetjük meg, hogy egy jobb egér kattintással egy elem-vizsgálatatot kérünk.

4. A megjelenő konzolon keressük meg a vizsgálat funkciót - ez legtöbb esetben baloldalon található nyíl ikon - majd mutassunk rá az egérrel a formázandó elemre. A rámutatás után a konzol jobb oldalán meg fog jelenni az adott elemhez tartozó osztály vagy azonosító tulajdonságai. Pl.:

#g-showcase {
    padding: 1.5rem 0px;
    background-color: #142D53;
    color: #FFF;
}

5. Az adott scss/css struktúrát másoljuk át az előző fülben megnyitott custom.scss fájlba. 

6. Itt írjuk az adott tulajdonságot nekünk megfelelőre pl. a showcase pozíció background-color értékét módosítsuk kékről rózsaszínre, a felesleges tulajdonságokat pedig töröljük:

#g-showcase {
    background-color: #FF55AA;
}

7. Nyomjuk meg a Mentés gombot.

8. Nyissunk egy új fület, majd lépjünk be az adminisztrációs oldalon a Bővítmények -> Sablonkezelő -> Stílusok -> Hydrogen (Az alapértelmezett sablonunkba.)

9. A Styles menüpont alatt nyomjuk meg a Recompile CSS gombot. Megjegyzés: Ha az Extrák (Extras) beállítások között beállítjuk a Fejlesztői módot (Developer mode), akkor nem szükséges minden módosítás után újra összeállítanunk a CSS-t.

10. Lépjünk vissza arra fülre, ahol az oldalunk felhasználói felülete van, majd töltsük újra az oldalt, és ellenőrizzük, hogy sikerült-e az adott tulajdonságok felülírása.

Ennek a módszernek segítségével, szinte bármilyen formázási tulajdonságot át tudunk írni a nelünk megfelelőre, legyen az a saját sablonunk, vagy bármilyen másik Joomla! bővítmény. A megfelelő átíráshoz a scss/css stílusleíró nyelvek megfelelő ismerete szükséges.