Az áruházhoz kapcsolódóan több lehetőséged van a stíluslapok megadására, amelyek különböző működést tesznek lehetővé, illetve más-más lehetőségekkel rendelkeznek. Lehetőséged van
CSS és
SCSS fájlokat kombináltan felhasználni a kinézet elkészítése során. Az
SCSS készítése során annak minden lehetőségét kiaknázhatod.
bootstrap.scss
Beépítésre került a kinézetekhez kapcsolódóan a
Bootstrap front-end keretrendszer, amelynek köszönhetően kihasználhatod az áruház kinézetének elkészítésekor és üzemeltetésekor annak előnyeit. Ehhez a kinézethez kapcsolódó
CSS mappában létrehozhatod a
bootstrap.scss fájlt, amelyben megadhatod, hogy a bootstrap mely részeit szeretnéd a továbbiakban használni.
@import "functions";
@import "variables";
@import "mixins";
...
import.css
Ez a gyári
CSS fájl tartalmazza azokat a importokat, amelyek az adott kinézethez kapcsolódnak. Ide sorolható a kinézethez tartozó font készlet, ikon készlet vagy az egyes egyedi, külső forrásból származó
CSS-ek. Ha nem a gyári kinézetet és annak elemeit akarod használni, akkor ilyen tekintetben elhagyható, tulajdonképpen elszeparált szekcióként szolgál a
CSS fájlok között.
common.scss
Az adott gyári kinézet alapját képezi. Ebben van felsorolva minden olyan formázás, ami az adott gyári kinézet megjelenését befolyásolja. A
main.cfg fájlban megadott
scss_vars változókat használhatod fel benne.
Sablonhoz rendelt scss
Lehetőséged van egy adott oldaltartalom sablonjához megadni különálló
CSS-t. Ezzel lehetőséged van arra, hogy az adott
CSS rész csak az adott oldalhoz kapcsolódóan jelenjen meg a forráskódban, csak a szükséges rész töltsön be ténylegesen az oldallal. Ehhez az adott sablon nevét követő
CSS fájlra van szükség, amely termék részletek oldal esetében például
content_product_details_1.css. Fontos a sorszám, mert több részletek oldal sablon esetén az adotthoz sablonhoz kell rendelni ezáltal az adott
CSS-t.
custom.scss
Ez a fájl tartalmazza az egyes színváltozatokhoz kapcsolódóan az eltéréseket és felülírásokat. Ez azért fontos, mert a színváltozatok az alaptípusból öröklik a teljes
common.scss tartalmát, így nem kell az összes színváltozatnál módosítást eszközölni, ha valami változik az alaptípusnál.
Fontos!
A különböző CSS és SCSS fájlok sorrendje adott, így a megírásukkor érdemes ezt figyelembe venni, hiszen a hierarchiában betöltött szerepük fontos, mert ebben a sorrendben kerülnek összefűzésre. Elsőként a common.scss, majd az adott sablonhoz tartozó CSS, majd a custom.scss kerül feldolgozásra.
main_email.css
Ez a fájl tartalmazza az összes olyan formázást, ami az értesítő email küldésekkel kapcsolatos sablonokban felhasználásra kerül.
social_login.css
Ebben a fájlban van lehetőség a
Facebook és
Google regisztrációhoz és bejelentkezéshez tartozó gombok, illetve az oldalba épülő
IFRAME elemek formázására.
