Ajouter un fond d’écran à prestashop1.7
Prestashop proposant peu de thèmes gratuits, beaucoup de boutiques en ligne utilisent le même thème et ont le même design. Nous vous proposons dans le tuto vidéo ci-dessus de voir comment personnaliser sa boutique Prestashop1.7 en ajoutant un fond d’écran.
Prestashop1.7 : Modifier le fichier theme.css
Ce fichier gère la mise en page de votre boutique eCommerce Prestashop. Pour ajouter un fond d’écran, il faut tout d’abord transférer ce fichier sur votre ordinateur à l’aide du logiciel FileZilla. Ensuite, il faudra modifier ce fichier avec un éditeur de textes. Nous utilisons personnellement le logiciel gratuit « Sublime Text ». Nous vous proposons une série de tutos concernant son installation et utilisation. Pour les visionner : Sublime Text
Code à insérer dans theme.css
Ouvrez le fichier css avec Sublime Text et copier/coller le code ci-dessous à la fin du fichier. Activez la ligne qui correspond à vos attentes. Pour une image répétée sur tout l’écran, mieux vaut privilégier les petites dimensions, maxi 300×300 pixels. Pour une image occupant tout le fond d’écran, mieux vaut prendre une image de grande dimension 1920 x 1080 pixels. Attention toutefois de ne pas choisir une image trop volumineuse (taille en octets) pour ne pas allonger le temps de chargement de la page. Idéalement, insérez une image de moins de 150ko (kilo octets). Pour cela, il vous faudra l’optimiser pour le web avec des logiciels comme Photoshop ou Gimp (résolution maxi 72 pixels par pouces).
@media(min-width:1024px){
#wrapper .container{
background:#fff;
padding-top:20px;
}
#wrapper{
padding-top: 0;
background: url('../../../../img/cms/fond.jpg');
/*--Pour répéter l'image sur tout le fond d'écran, activer la ligne ci-dessous--*/
background-repeat: repeat;
/*--Pour avoir une image de fond qui recouvre tout l'écran, activer la ligne ci-dessous--*/
/*background-image: cover;*/
}
}