Table des matières
La page de maintenance d'un site est un aspect très important, car il y a des moments où pour diverses raisons (problèmes de fournisseur, mise à jour du code source, entrée en vigueur de nouvelles réglementations commerciales) dans lesquelles nous devons momentanément suspendre notre page, cependant, ce que le l'utilisateur et le client potentiel voient doit refléter tout le professionnalisme de la personne derrière elle.maintenance.css
En entrant dans le mode maintenance dans notre boutique en ligne Prestashop, nos utilisateurs verront ce qui suit si nous utilisons le thème par défaut :
Voyons le contenu de ce fichier :
*, body {margin: 0; padding: 0} body {font-family: 90% / 1em 'Lucida Grande', Verdana, sans-serif} #maintenance {width: 450px; marge : 35px auto 0 auto; remplissage : 12px 0 ; arrière-plan : #fff; text-align : centre ; transformation de texte : aucune ; font-weight : normal ; interlettrage : 0 ; couleur : #C73178} #message {largeur : 450px ; marge supérieure : 35px; rembourrage : 12px 15px ; border-top : 1px pointillé # 666; border-bottom : 1px pointillé # 666; arrière-plan : # F9E3EE; text-align : justifier ; police : 90% / 1em 'Lucida Grande', Verdana, sans empattement; transformation de texte : aucune ; font-weight : normal ; interlettrage : 0 ; couleur : # C73178} #message img {padding : 30px} Lors de l'évaluation du code nous nous rendons compte que nous avons 3 grands sélecteurs, qui sont ceux qui donnent la structure à notre page de maintenance, voyons maintenant l'image suivante pour pouvoir localiser visuellement chaque sélecteur :
maintenance.tpl
Les archives CSS de Prestashop fichiers de contrôle .tpl quels sont les modèles Smarty, l'utilisation de gabarits améliore et facilite le travail, pour cela il faut connaitre le gabarit maintenance.tpl Voyons le code qui le comprend :
{$ meta_title | escape: 'htmlall': 'UTF-8'} {if isset ($ meta_description)} {/ if} {if isset ($ meta_keywords)} {/ if}
{l s = 'En ***** pour effectuer la maintenance du site, notre boutique en ligne a été temporairement mise hors ligne. Nous nous excusons pour la gêne occasionnée et vous demandons de réessayer plus tard ! '}
Comme nous le voyons, chacun des sélecteurs de la CSS il est présent dans ce fichier, donc chaque modification que nous apporterons aura un effet sur cette section.
Par exemple dans la section message :
Nous pouvons le changer comme suit :
Ensuite, nous pouvons modifier le CSS avec ce qui suit :
#maintenance {largeur : 750px; marge : 35px auto 0 auto ; remplissage : 12px 0 ; arrière-plan : #fefefe; text-align : centre ; transformation de texte : aucune ; font-weight : gras ; interlettrage : 0 ; couleur : #3FCA66} #message {largeur : 450px ; marge supérieure : 35px; rembourrage : 12px 15px ; border-top : 1px pointillé # 666; border-bottom : 1px pointillé # 666; arrière-plan : # 2EE6F3; text-align : justifier ; police : 90 % / 1em 'Lucida Grande', Verdana, sans empattement; transformation de texte : aucune ; font-weight : normal ; interlettrage : 0 ; couleur : # 000} #message img {padding : 10px} Avec ces petites modifications que nous soulignons en gras, ajoutées à la modification apportée au modèle .tpl, nous pouvons obtenir quelque chose de similaire à l'image suivante :
Avec cela, nous terminons le didacticiel et avec cela, nous apprenons à modifier notre page de maintenance et avec lesquels nos clients sauront que lorsque nous ne serons pas en ondes, notre qualité sera la même.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif
