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.
