Spis treści
Jak zmienić grafikę?
Aby zmienić grafikę w sklepie należy dodać nowy temat.
Temat - jest to zbiór plików html, css i obrazów odpowiedzialnych za wygląd sklepu.
Dodanie nowego tematu
Aby utworzyć nowy temat należy wejść w panelu administracyjnym do edycji grafiki i dodać nowy temat.
Pliki i katalogi
W przypadku gdy sklep znajduje się na serwerach home.pl po wejściu do katalogu soteshop, należy przejść dodatkowo do podkatalogu core.
Dalsza struktura katalogów jest bez zmian (np. soteshop/core/apps/frontend/templates/theme/ ).
Po dodaniu nowego tematu, tworzymy nowy katalog "my_theme" w lokalizacji:
soteshop/apps/frontend/templates/theme/
Pliki domyślnego tematu znajdują się w katalogu:
soteshop/apps/frontend/templates/theme/default/
Jeżeli chcemy zmodyfikować nagłówek dla nowo utworzonego tematu "my_theme" musimy przegrać plik container_head.html do katalogu:
soteshop/apps/frontend/templates/theme/my_theme/
Pliki stylów css domyślnego tematu znajdują się w katalogu.
soteshop/web/css/frontend/theme/default/
kopiujemy plik style.css do katalogu nowo utworzonego tematu:
soteshop/web/css/frontend/theme/my_theme/
Możemy teraz wyedytować plik style.css i dokonać niezbędnych modyfikacji.
Istnieje również druga możliwość edycji stylów. Jeżeli chcemy dokonywać małych zmian lub tylko dołączyć nowe definicje selektorów, możemy utworzyć plik my_style.css w katalogu:
soteshop/web/css/frontend/theme/my_theme/
Nie jest potrzebne kopiowanie pliku style.css z tematu "default". Style dla nowo utworzonego tematu "my_theme" będą pobierane z tematu "default", a definicje zawarte w pliku my_style.css tematu "my_theme" będą rozszerzać plik style.css tematu "default".
Jeżeli chcemy dodać pliki obrazów należy umieścić je w nowo utworzonym katalogu:
soteshop/web/*images*/frontend/theme/my_theme/
Opisy plików layout i container
W katalogu:
soteshop/apps/frontend/templates/theme/default/
Znajdują się pliki tworzące ramy wyglądu oraz kontenery przechowujące zawartość strony.
layout - układ
Pliki odpowiedzialne za "rysowanie" ramy strony.
layout1.html
layout2.html
layout3.html
container - blok Pliki odpowiedzialne za bloki umieszczane niezależnie od układu. Ich rozkład pokazano na przykładzie pliku layout1.html
container_content.html
container_foot.html
container_head.html
container_left.html
container_right.html
zawartość pliku layout
Poniżej przedstawiono zawartość pliku layout1.html
<div id="st_container">
<div id="st_container_head">
{include_file id="container_head"}
</div>
<div id="st_container_body">
<div id="st_container_left">
{include_file id="container_left"}
</div>
<div id="st_container_content">
{include_file id="container_content"}
</div>
<div id="st_container_right">
{include_file id="container_right"}
</div>
<br class="st_clear_all" />
</div>
<div id="st_container_foot">
{include_file id="container_foot"}
</div>
</div>