Od wersji 11 Stat4Seo został wdrożony nowy szablon graficzny. Struktura plików szablonu została również mocno zmodyfikowana. Teraz, pliki szablonu znajdują się w katalogu /themes/base/. (wcześniej był to katalog /templates/)
Nie zalecamy modyfikowania plików znajdujących się w katalogu /themes/base/ ponieważ zmiany te będą każdorazowo nadpisywane przy aktualizacjach i będzie trzeba je powtarzać. W celu wdrożenia personalizacji, należy skorzystać z katalogu /themes/custom/.
Przykładowo, jeżeli chcemy nadpisać stronę logowania, której plik szablonu to /themes/base/login.tpl, to możemy utworzyć analogiczny pliku w katalogu custom, tj /themes/custom/login.tpl, skopiować do niego zawartość pliku oryginalne i wdrożyć nasze zmiany.
Dodatkowo, w katalogu assets możemy utworzyć plik CSS i plik JS z własnym kodem który będzie załączany w szablonie, odpowiednio pliki /themes/custom/assets/style.css i /themes/.custom/assets/main.js
Zmiana logo
Aby zmienić logo można również wstrzyknąć własny kod który nadpisze pewne elementy szablonu. Przykładowo, żeby zmienić logo należy stworzyć plik /themes/custom/page.tpl z taką zawartością:
{extends file=".././base/page.tpl"}
{assign var="logoImagePath" value="TUTAJ_SCIEZKA_DO_PLIKU_LOGO"}TUTAJ_SCIEZKA_DO_PLIKU_LOGO to może być URL albo ścieżka do pliku na serwerze, czyli albo:
{assign var="logoImagePath" value="https://moja-domena.pl/moje-logo.png"}albo
{assign var="logoImagePath" value="`$themesBasePath|default`themes/custom/assets/img/moje-logo.png"}Zmiana favicony
W celu zmiany favicony można postąpić podobnie jak z podmianą logo, ale dodając do pliku /themes/custom/page.tpl taki dodatkowy kod (przy założeniu, że jest tam już {extends file=".././base/page.tpl"}):
{block name=favicons}
<link rel="icon" href="{$themesBasePath|default}themes/base/assets/img/cropped-stat4seo-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="{$themesBasePath|default}themes/base/assets/img/cropped-stat4seo-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="{$themesBasePath|default}themes/base/assets/img/cropped-stat4seo-icon-180x180.png" />
<meta name="msapplication-TileImage" content="{$themesBasePath|default}themes/base/assets/img/cropped-stat4seo-icon-270x270.png" />
{/block}Zmieniając oczywiście ścieżki do obrazków favicon na własne.
Zmiana title
W celu zmiany title można postąpić podobnie jak z podmianą logo czy favicon, ale dodając do wcześniej utworzonego pliku /themes/custom/page.tpl taki dodatkowy kod (przy założeniu, że jest tam już {extends file=".././base/page.tpl"}):
{block name=title}Tutaj własny title{/block}czyli plik z własnym logo i własnym title wyglądałby przykładowo tak:
{extends file=".././base/page.tpl"}
{assign var="logoImagePath" value="TUTAJ_SCIEZKA_DO_PLIKU_LOGO"}
{block name=title}Tutaj własny title{/block}