Konserwacja CSS w Prestashop

Utrzymanie strony serwisu jest bardzo ważnym aspektem, ponieważ są chwile, w których z różnych powodów (problemy z dostawcami, aktualizacja kodu źródłowego, wejście w życie nowych przepisów handlowych) musimy chwilowo zawiesić naszą stronę, jednak co użytkownik i potencjalny klient widzi musi odzwierciedlać cały profesjonalizm osoby, która za tym stoi.
konserwacja.css
Po wejściu w tryb konserwacja w naszym sklepie internetowym Prestashop, nasi użytkownicy zobaczą następujące informacje, jeśli używamy domyślnego motywu:

Daleko temu do personalizacji, jednak dzięki plikowi maintenance.css możemy go modyfikować i dostosowywać tak, aby był zgodny z naszym wizerunkiem.
Zobaczmy zawartość tego pliku:

 *, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {szerokość: 450px; margines: 35px auto 0 auto; dopełnienie: 12px 0; tło: #fff; wyrównanie tekstu: środek; transformacja tekstu: brak; grubość czcionki: normalna; odstępy między literami: 0; kolor: # C73178} #wiadomość {szerokość: 450px; margines górny: 35px; dopełnienie: 12px 15px; góra obramowania: 1px z kropkami # 666; obramowanie-dół: 1px z kropkami # 666; tło: # F9E3EE; text-align: justuj; czcionka: 90% / 1em 'Lucida Grande', Verdana, bezszeryfowa; transformacja tekstu: brak; grubość czcionki: normalna; odstępy między literami: 0; kolor: # C73178} #obraz wiadomości {wypełnienie: 30px} 

Podczas oceny kodu zdajemy sobie sprawę, że mamy 3 duże selektory, które nadają strukturę naszej stronie serwisowej, zobaczmy teraz następujący obraz, aby móc wizualnie zlokalizować każdy selektor:

Zauważamy, że selektor #konserwacja jest ogólnym kontenerem, w którym mamy #obraz wiadomości która reguluje obraz przekazu i wtedy mamy #wiadomość czyli tekst z wiadomością, którą chcemy pokazać.
konserwacja.tpl
Pliki CSS z Prestashop pliki kontrolne .tpl czym są szablony Smarty, korzystanie z szablonów usprawnia i ułatwia pracę, do tego musimy znać szablon konserwacja.tpl Zobaczmy kod, który to rozumie:

 {$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}


{l s = 'W ***** w celu przeprowadzenia konserwacji witryny nasz sklep internetowy został tymczasowo wyłączony. Przepraszamy za niedogodności i prosimy o spróbowanie ponownie później! '}

Jak widzimy każdy z selektorów CSS jest on obecny w tym pliku, więc każda wprowadzona przez nas zmiana będzie miała wpływ na tę sekcję.
Na przykład w sekcji wiadomości:

{l s = 'W ***** w celu przeprowadzenia konserwacji witryny nasz sklep internetowy został tymczasowo wyłączony. Przepraszamy za niedogodności i prosimy o spróbowanie ponownie później! '}

Możemy to zmienić na następujące:

{l s = 'Ta witryna jest w trakcie konserwacji. Prosimy o kontakt z następującym ABC Store Online Limited 33 W. 111 Street, New York, NY 10001, USA Telefon: (212) 210-2100 '}

Następnie możemy zmodyfikować CSS z następującymi:

 #konserwacja {szerokość: 750px; margines: 35px auto 0 auto; dopełnienie: 12px 0; tło: #fefefe; wyrównanie tekstu: środek; transformacja tekstu: brak; grubość czcionki: pogrubiona; odstępy między literami: 0; kolor: # 3FCA66} #wiadomość {szerokość: 450px; margines górny: 35px; dopełnienie: 12px 15px; góra obramowania: 1px z kropkami # 666; obramowanie-dół: 1px z kropkami # 666; tło: # 2EE6F3; text-align: justuj; czcionka: 90% / 1em 'Lucida Grande', Verdana, bezszeryfowa; transformacja tekstu: brak; grubość czcionki: normalna; odstępy między literami: 0; kolor: # 000} #obraz wiadomości {wypełnienie: 10px} 

Dzięki tym małym zmianom, które zaznaczamy pogrubioną czcionką, dodanym do zmiany dokonanej w szablonie .tpl, możemy osiągnąć coś podobnego do poniższego obrazu:

Jak widzimy, to potężne narzędzie w połączeniu z naszą kreatywnością pomaga nam osiągnąć całkiem ciekawe rezultaty.
Na tym kończymy tutorial i tym samym zdobywamy wiedzę jak modyfikować naszą stronę serwisową i dzięki której nasi klienci będą wiedzieć, że kiedy nie będziemy na antenie, nasza jakość będzie taka sama.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt