Jump to content

Un background plein écran sur la page maintenance.

JCL69
 Share

Recommended Posts

JCL69 Newbie

JCL69

Posted
Posted

Bonjour tout le monde,

 

Je souhaiterai apporter une modification assez radicale à la page maintenance de ma boutique.

 

Mon idée serait qu'une seule et unique image (d'assez grande taille) tienne sur l'ensemble de la fenêtre. Pour cela, j'ai farfouillé un peu partout et j'ai trouvé ce script CSS : 

 margin:0;
  padding:0;
  background: url(monimage.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;

L'ayant testé sur une page web classique (entendez par là une simple page index.html toute simple en dehors de Prestashop), l'effet fonctionne à merveille. Je suis content, mais visiblement l'adaptation sur Prestashop n'est pas pas aussi réussi. J'ai même tenté l'extrêmité en formatant totalement mon fichier maintenance.tpl en transformant son contenu en un simple appel au fichier où était contenu ce script, mais visiblement la page demeure désespérément vide. Evidemment, j'ai bien pensé à vider mon cache PS et celui des navigateurs (j'utilise toujours 3 navigateurs pour mes tests).

 

Bon, je vous l'accorde, ce n'est pas quelque chose de vital qui empêche le bon fonctionnement de la boutique, mais j'aimerai vraiment que ma page Maintenance soit un peu plus originale que la page standard.

 

Si quelqu'un à une solution à me proposer, j'en serai ravi ! ;)

Link to comment
Share on other sites
JCL69 Newbie

JCL69

Posted
  • Author
Posted (edited)

Bien, alors, j'ai réussi mon coup... Alors, je vais remettre mes notes dans l'ordre et détailler un peu pour ceux qui seraient intéressés :

 

1. J'ai ajouter le script suivant au tout début de mon fichier maintenance.css (celui présent dans le répertoire css de mon thème) : 

html { 
  margin:0;
  padding:0;
  background: url(../img/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover;
  background-size: cover;
}

2. Dans mon fichier maintenance.tpl (également celui de mon thème), je ne laisse que le code suivant :

<!DOCTYPE HTML>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="{$lang_iso}"><![endif]-->
	<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="{$lang_iso}"><![endif]-->
	<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="{$lang_iso}"><![endif]-->
	<!--[if gt IE 8]> <html class="no-js ie9" lang="{$lang_iso}"><![endif]-->
	<html lang="{$lang_iso}">
	<head>
		<title>{$meta_title|escape:'html':'UTF-8'}</title>	
		<meta charset="utf-8" />
{if isset($meta_description)}
	<meta name="description" content="{$meta_description|escape:'html':'UTF-8'}">
{/if}
{if isset($meta_keywords)}
	<meta name="keywords" content="{$meta_keywords|escape:'html':'UTF-8'}">
{/if}
		<meta name="robots" content="{if isset($nobots)}no{/if}index,follow">
	<link rel="shortcut icon" href="{$favicon_url}">
		
        <link href="{$css_dir}_bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="{$css_dir}maintenance.css" rel="stylesheet" type="text/css" />
        <link href='//fonts.googleapis.com/css?family=Open+Sans:600&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	</head>
	<body id="maintenance-page">
	<link rel="stylesheet" href="css/maintenance.css" type="text/css" media="screen"/>
	</body>
</html>

3. Je créé mon fichier image qui va servir de background : prévoir une image de grande résolution (pour ma part, mon image fait 1802 x 1281.). Je nomme cette image bg.jpg. et je l place dans le répertoire img de mon thème.

 

4. Faites les nettoyages d'usage : vidage du cache de Prestashop et du navigateur et voilà le travail. Du moins, cela à fonctionné chez moi. 

 

 

 

PS : Désolé de ne pas pouvoir vous faire voir, mais je développe ma boutique en local. Dès qu'il sera en ligne, je ferai un petit lien ! ;)

Edited by JCL69 (see edit history)
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...