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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 01 - Joomla! Magyarország

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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 02 - Joomla! MagyarországGantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 03 - Joomla! Magyarország

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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 05 - Joomla! Magyarország

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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 06 - Joomla! Magyarország

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;
}

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 07 - Joomla! Magyarország

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

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 08 - Joomla! Magyarország

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;
}

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 09 - Joomla! Magyarország

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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 11 - Joomla! Magyarország

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.

Gantry5 - Hogyan írhatjuk felül sablonunk vagy bővítményeink formázásait? 11 - Joomla! Magyarország

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.

0
0
0
s2sdefault
Log in to comment

kocsislaci profilkép
kocsislaci válaszolt a témára: #2 2015 okt. 15 19:34
Balázs!

Mennyire lassítja az oldal betöltését az, hogy ha az alap css betöltését felülírja egy custom css? Ennek van lényegi hatása az oldal sebességére?

Szerinted az scss fájlt miért nem tudja létrehozni? Ha nem választok ki fájltípust kidob hogy válasszak, ha kiválasztom a fájltípust csak sima css-t tudok létrehozni!

Köszönöm!
Balázs profilkép
Balázs válaszolt a témára: #3 2015 okt. 15 20:31
1. Mivel lefutás előtt összerakja css fájlokat így nincs lassulás.
2. A Joomla! (még) nem támogatja?
kocsislaci profilkép
kocsislaci válaszolt a témára: #4 2015 okt. 15 20:36
Miért te mit használsz?
Balázs profilkép
Balázs válaszolt a témára: #5 2015 okt. 15 22:42
custom.scss
kocsislaci profilkép
kocsislaci válaszolt a témára: #6 2015 okt. 16 08:41
Akkor segíts kérlek!
Ezek a fájltipusókat lehet kiválasztani:


Ezt a hibaüzenet kapom, ha nem választok ki fájltipust: (custom.scss fájlnév megadása esetén)


Ezt pedig ha megadom a fájlnevet is: (custom.scss fájlnév megadása esetén)
Balázs profilkép
Balázs válaszolt a témára: #7 2015 okt. 16 11:08
FTP-n feldobsz egy üres custom.scss fájlt?
kocsislaci profilkép
kocsislaci válaszolt a témára: #8 2015 okt. 16 18:42
Igen ez volt a következő lépés, de nem ír felül semmit, sőt firefox develeportba megnézve a custom.scss be sem töltődik...
Ami furcsa nekem, hogy vannak más mappák és fájlok a custom mappában. ÉS továbbra sem értem, hogy a te joomlád engedi az enyhém meg nem engedi létrehozni ezt a fájlt admin felületen :(



kocsislaci profilkép
kocsislaci válaszolt a témára: #10 2015 okt. 18 18:11
Innen indultam ki.... nem értem miért linkelted be ismét..
Balázs profilkép
Balázs válaszolt a témára: #11 2015 okt. 18 19:34
Evvel csak azt akartam sugallni, hogy lehet, hogy célszerű még egyszer átmenni a leíráson. B)

1. A leírásban nincs szó arról, hogy neked kellene kiválasztanod a fájltípust.
2. Ha nem nyomod meg minden módosítás után a "Recompile CSS" gombot, akkor nem fogja behúzni az új módosításokat.
kocsislaci profilkép
kocsislaci válaszolt a témára: #12 2015 okt. 19 18:18
Úgy is próbáltam, hogy nem adok meg fájltípust. Ekkor kilép hibával, hogy nem választottam ki fájltipust.... nah ennek utána járok, mert nem kell az eredeti fájlokat módosítani!
Zotius profilkép
Zotius válaszolt a témára: #13 2015 okt. 23 19:14
Elkezdtem kísérletezni én is a Hydrogen sablon módosítgatásával.
Ugyanabba a hibába futottam, mint kocsislaci. A custom.scss létrehozását nem engedi. Valahogy nem gömbölyű így ez az egész... :(
Zotius profilkép
Zotius válaszolt a témára: #14 2015 okt. 23 20:15

Balázs írta: Evvel csak azt akartam sugallni, hogy lehet, hogy célszerű még egyszer átmenni a leíráson. B)
1. A leírásban nincs szó arról, hogy neked kellene kiválasztanod a fájltípust.
2. ...
Hát persze hogy nincs, mert az eredeti angol leírásban pirossal ki is van emelve, hogy a Joomla beépített sablonbuherálója nem támogatja az .scss fájlokat!

Joomla doesn't support creating SCSS files in its built-in template customization tool.

kocsislaci profilkép
kocsislaci válaszolt a témára: #15 2015 okt. 23 21:33
Hopp.. ebből következik, hogy mit kell használni?
Balázs profilkép
Balázs válaszolt a témára: #16 2015 okt. 24 00:20

Zotius írta:

Balázs írta: Evvel csak azt akartam sugallni, hogy lehet, hogy célszerű még egyszer átmenni a leíráson. B)
1. A leírásban nincs szó arról, hogy neked kellene kiválasztanod a fájltípust.
2. ...
Hát persze hogy nincs, mert az eredeti angol leírásban pirossal ki is van emelve, hogy a Joomla beépített sablonbuherálója nem támogatja az .scss fájlokat!

Joomla doesn't support creating SCSS files in its built-in template customization tool.


Lépések (a leírásban is frissítve):
1. Létehozod a gépeden a custom.scss fájlt, majd feltöltöd a sablonszerkesztőn keresztül vagy FTP segítségével.
2. Szerkeszted a sablonszerkesztőn keresztül.
3. Újraforgatod a Gantry adminban.

kocsislaci profilkép
kocsislaci válaszolt a témára: #17 2015 okt. 24 20:51
Köszi mindkettőtöknek!!

Szerintem ez a topic még fog pár hozzászólást hozni! :)
Balázs profilkép
Balázs válaszolt a témára: #18 2016 dec. 13 10:29
Aki esetleg most olvasná el a leírást, annak leírom - és a leírásban is módosítottam -, hogy most már van lehetőség közvetlen scss kiterjesztésű fájl létrehozására is.