Съдържание
Страницата за поддръжка на даден сайт е много важен аспект, тъй като има моменти, в които по различни причини (проблеми с доставчика, актуализация на изходния код, влизане в сила на нови търговски разпоредби), в които трябва незабавно да спрем нашата страница, обаче потребителят и потенциалният клиент трябва да отразяват целия професионализъм на лицето зад него.maintenance.css
При влизане в режим поддръжка в нашия онлайн магазин Prestashop, нашите потребители ще видят следното, ако използваме темата по подразбиране:
Нека да видим съдържанието на този файл:
*, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; марж: 35px auto 0 auto; подложка: 12px 0; фон: #fff; подравняване на текст: център; преобразуване на текст: няма; тегло на шрифта: нормално; интервал между буквите: 0; цвят: # C73178} # съобщение {ширина: 450px; марж-топ: 35px; подложка: 12px 15px; border-top: 1px пунктиран # 666; border-bottom: 1px пунктиран # 666; фон: # F9E3EE; подравняване на текст: обосноваване; шрифт: 90% / 1em 'Lucida Grande', Вердана, без засечки; преобразуване на текст: няма; тегло на шрифта: нормално; интервал между буквите: 0; цвят: # C73178} # съобщение img {padding: 30px} Когато оценяваме кода, ние осъзнаваме, че имаме 3 големи селектора, които са тези, които придават структурата на нашата страница за поддръжка, нека сега видим следното изображение, за да можем визуално да локализираме всеки селектор:
maintenace.tpl
Файловете CSS на Prestashop контролни файлове .tpl какви са шаблоните Умно, използването на шаблони подобрява и улеснява работата, за това трябва да знаем шаблона maintenance.tpl Нека да видим кода, който го разбира:
{$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}
{l s = 'В ***** за извършване на поддръжка на сайта, нашият онлайн магазин е временно изключен. Извиняваме се за неудобството и ви молим да опитате отново по -късно! '}
Както виждаме всеки от селекторите на CSS той присъства в този файл, така че всяка наша промяна ще има ефект върху този раздел.
Например в раздела за съобщения:
Можем да го променим на следното:
След това можем да променим CSS със следното:
#поддръжка {ширина: 750px; марж: 35px auto 0 auto; подложка: 12px 0; фон: #fefefe; подравняване на текст: център; преобразуване на текст: няма; тегло на шрифта: удебелен; интервал между буквите: 0; цвят: # 3FCA66} # съобщение {ширина: 450px; марж-топ: 35px; подложка: 12px 15px; border-top: 1px пунктиран # 666; border-bottom: 1px пунктиран # 666; фон: # 2EE6F3; подравняване на текст: обосноваване; шрифт: 90% / 1em 'Lucida Grande', Вердана, без засечки; преобразуване на текст: няма; тегло на шрифта: нормално; интервал между буквите: 0; цвят: # 000} # съобщение img {padding: 10px} С тези малки промени, които подчертаваме с удебелен шрифт, добавени към промяната, направена в шаблона .tpl, можем да постигнем нещо подобно на следното изображение:
С това завършваме урока и с това получаваме знанията как да променим страницата си за поддръжка и с което нашите клиенти ще знаят, че когато не сме в ефир, качеството ни ще бъде същото.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
