A Gantry sablon-keretrendszer használatának lényege, hogy készen kapunk egy olyan vázat, amit nekünk már csak kiegészítenünk vagy módosítanunk kell, tehát nem szükséges megírnunk a sablont nulláról. Alapesetben a módosításokat úgy tudjuk alkalmazni, hogy készítünk egy saját custom.css nevű fájlt, amely segítségével felül tudjuk bírálni az alapértelmezett stílusokat.

Első lépésként létre kell hozununk a saját css fájlunkat, aminek a színtaktikája a következő: A fájl nevének eleje mindig az adott sablon telepítésének mappájának a neve. Pl.: gantry, rt_radianece, zsuzsivegyesbolt akkor gantry-custom.css, rt_daiance-custom.css, zsuzsivegyesbolt-custom.css fájlt kell létrehoznod a sablonod css mappjában. A Gantry sablon használata esetén a \root\templates\gantry\css\. Az itt létrehozott CSS fájlba kell beleraknunk azokat az osztályokat és azonosítókat, amiket felül szeretnénk írni a megfelelő értékkel.

A Gantry sablont modulok (gridek) osztják fel, amelyek egy vagy több alapértelmezett tulajdonságal is rendelkeznek (pl. széleséggel). A grid osztályokban definiált tulajonságokat, mi magunk is módosíthatjuk különböző képernyőszélességeken. A sablon beállításaiban a reszponzivitás választásakor 1200px szelességű megjelenítés az alapértelmezett. Ez az érték a .rt-container osztály tárolja, amit utólagosan módosíthatunk és ehhez igazíthatjuk a többi modul (grid) tulajdonságait.

A keretrendszer az alap paramétereken kívül még 4 további konténert határoz meg különböző szélességi intervallumokkal:

1. 1200px és e fölötti megjelenítés (alapértelmezett szélesség): .rt-container {width: 1200px;margin: 0 auto;position: relative;}
2. 960px és 1199px közötti megjelenítés: @media only screen and (min-width: 960px) and (max-width: 1199px) {}
3. 768px és 959px közötti megjelenítés: @media only screen and (min-width: 768px) and (max-width: 959px) {}
4. 481px és 767px közötti megjelenítés: @media only screen and (min-width: 481px) and (max-width: 767px) {}
5. 480px alatti megjelenítés: @media only screen and (max-width: 480px) {}

Ezek az alapértékek a \root\libraries\gantry\css\grid-responsive.css fájlban találhatóak.

Ezek után nincs más teendő hátra, mint kézzel felülírni az alap szélességeket, melyeket el kell helyeznünk az imént létrehozott saját CSS fájlban. Ebben nagy segítségünkre lehetnek a webmesteri eszközök például Firefox esetén a Firebug. Ennek az eszköznek segítségével rátudunk mutatni az egyes pozíciókra és lekérhetők vele az osztályok, ami alapján tudni fogjuk, hogy mit kell felülírnunk. Ha, evvel megvagyunk, akkor egy mérettel kisebbre húzhatjuk a böngészőnk szélességét és rámutatással megint lekérhetjük az adott osztályt és az ott található értéket, amit megint csak felül tudunk írni a saját CSS fájlunkban.

Példa.:

Kisebb képernyő-felbontáson szeretném, ha a menü nem csúszna be a logóba, ezért a 960px és a 1199px közötti megjelenítést definiáló konténerben felülírom az .rt-grid-8 osztályt egyedi értékkel.

Alapértelmezett kód: (grid_responsive.css)

Módosított érték: (gantry-custom.css)