Índice
A manutenção da página de um site é um aspecto muito importante, pois há momentos em que por motivos diversos (problemas de fornecedores, atualização do código-fonte, entrada em vigor de novos regulamentos comerciais) em que devemos suspender momentaneamente a nossa página, no entanto, o que o o usuário e o cliente em potencial devem refletir todo o profissionalismo da pessoa por trás disso.manutenção.css
Ao entrar no modo manutenção em nossa loja online Prestashop, nossos usuários verão o seguinte se estivermos usando o tema padrão:
Vamos ver o conteúdo deste arquivo:
*, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; margem: 35px auto 0 auto; preenchimento: 12px 0; plano de fundo: #fff; alinhamento de texto: centro; transformação de texto: nenhum; peso da fonte: normal; espaçamento entre letras: 0; color: # C73178} #message {width: 450px; margem superior: 35px; preenchimento: 12px 15px; borda superior: 1px pontilhado # 666; border-bottom: 1px pontilhado # 666; plano de fundo: # F9E3EE; alinhamento de texto: justificar; fonte: 90% / 1em 'Lucida Grande', Verdana, sem serifa; transformação de texto: nenhum; peso da fonte: normal; espaçamento entre letras: 0; color: # C73178} #message img {padding: 30px} Ao avaliar o código percebemos que temos 3 grandes seletores, que são os que estruturam nossa página de manutenção, vamos agora ver a seguinte imagem para poder localizar visualmente cada seletor:
maintenace.tpl
Os arquivos CSS do Prestashop arquivos de controle .tpl o que são modelos Espertinho, o uso de templates melhora e facilita o trabalho, para isso devemos conhecer o template maintenance.tpl Vamos ver o código que o entende:
{$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}
{l s = 'Em ***** para realizar a manutenção do site, nossa loja online foi desativada temporariamente. Pedimos desculpas pelo transtorno e pedimos que você tente novamente mais tarde! '}
Como vemos cada um dos seletores do CSS ele está presente neste arquivo, portanto, cada alteração que fizermos terá efeito nesta seção.
Por exemplo, na seção de mensagens:
Podemos alterá-lo para o seguinte:
Então podemos modificar o CSS com o seguinte:
#maintenance {width: 750px; margem: 35px auto 0 auto; preenchimento: 12px 0; plano de fundo: #fefefe; alinhamento de texto: centro; transformação de texto: nenhum; intensidade da fonte: Negrito; espaçamento entre letras: 0; color: # 3FCA66} #message {width: 450px; margem superior: 35px; preenchimento: 12px 15px; borda superior: 1px pontilhado # 666; border-bottom: 1px pontilhado # 666; plano de fundo: # 2EE6F3; alinhamento de texto: justificar; fonte: 90% / 1em 'Lucida Grande', Verdana, sem serifa; transformação de texto: nenhum; peso da fonte: normal; espaçamento entre letras: 0; color: # 000} #message img {padding: 10px} Com essas pequenas alterações que destacamos em negrito, somadas à alteração feita no template .tpl, podemos conseguir algo semelhante à seguinte imagem:
Com isso finalizamos o tutorial e com isso obtendo o conhecimento de como modificar nossa página de manutenção e com a qual nossos clientes saberão que quando não estivermos no ar nossa qualidade será a mesma.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
