Thème Prestashop : 01 Oslo v1 - Corona Funerariacoronafuneraria.com/themes/01oslo/docs/readme_fr.pdf · 2015-02-21 · Installation Installation automatique pour Prestashop 1.6.x

Thème Prestashop : 01 Oslo v1.0 (Pour Prestashop 1.6.0 au supérieur)

Merci d’avoir choisi 01 Oslo

Table des matières Installation ........................................................................................................................................... 3

Installation automatique pour Prestashop 1.6.x ............................................................................. 3

Mise à jour du thème 01 Oslo ............................................................................................................. 5

Configuration ....................................................................................................................................... 6

Images ............................................................................................................................................. 6

Configuration page d’accueil ........................................................................................................... 7

Disposition des « Hooks » ................................................................................................................... 9

Position des modules ........................................................................................................................ 10

Modules supplémentaires ................................................................................................................. 12

01 Oslo configuration du thème (config01oslo) ............................................................................ 12

01 Ultimate Background (ultimatebackgroud01) .......................................................................... 12

Personnalisation ................................................................................................................................ 17

Plus d’informations ........................................................................................................................... 18

Installation Installation automatique pour Prestashop 1.6.x

1. Depuis la console d’administration de votre installation Prestashop, aller dans la section « Thèmes » et cliquer sur le bouton « Ajouter un thème ».

2. Sélectionner l’emplacement du fichier.zip du thème puis cliquer sur « Valider ».

3. Aller dans la section « Préférences > Thèmes » et sélectionner le thème « 01 Oslo » puis cliquer sur le bouton « Valider ».

01oslo.zip

4. La page suivante récapitule les modules qui seront activés, cliquer sur « Valider ».

5. Le thème est maintenant installé.

6. Dans la section « Préférences > Thèmes » désactiver le thème mobile (le thème a sa propre gestion mobile).

7. Se reporter à la section configuration.

Mise à jour du thème 01 Oslo Si vous utilisez déjà le thème 01 Oslo et que vous souhaitez installer une version plus récente que vous avez téléchargée, veuillez suivre les instructions suivantes :

1. Sauvegarder les fichiers si vous avez fait des modifications sur le template ou sur le fichier custom.css

2. Se rendre dans la section « Préférences > Thèmes » de la console d'administration, activer le thème « default » puis supprimer le thème « 01 Oslo »

3. Dans la section « Préférences > Modules », supprimer les modules : a. « 01 Oslo configuration du thème » b. « 01 Ultimate Background »

4. Installer la dernière version du thème 01 Oslo en suivant la documentation, rubrique installation

Configuration Images Avec les tailles par défaut du thème, il est recommander d’utiliser des images carrées pour vos produits par exemple de dimensions 1000 * 1000px ou 700 * 700px (avant redimensionnement par Prestashop). Les images de catégories et du diaporama de la page d’accueil devraient avoir un format rectangulaire de 710 * 350px.

1. Vérifier les tailles d’images suivantes dans « Préférences > Images » (vous pouvez modifier certaines dimensions si besoin) :

a. home_01oslo => 350px * 350px b. category_01oslo =>710px *350px c. subcat_01oslo => 170px *84px d. large_01oslo => 700px * 700px e. thickbox_01oslo = > 1000px *1000px f. medium_01oslo => 175px *175px g. small_01oslo => 98px*98px

2. Regénérer les miniatures : Aller dans « Préférences > Images » et cliquer sur le bouton « Regénérer les miniatures »

Configuration page d’accueil

1-> Module « Produits mis en avant sur la page d'accueil » Vous pouvez afficher vos produits phares en haut de la page d’accueil via ce module. Ce module affiche les produits associés à la catégorie « Home ». Configurez le module afin de définir le nombre de produits maximum à afficher (3 sur le site de démo).

2-> Module « Diaporama (image slider) pour votre page d'accueil » Ce module permet d’afficher un diaporama d’image sur votre page d’accueil. Vous pouvez ajouter des titres et textes à vos images. Il est recommandé de configurer ce module en définissant une « Largeur max » élevée (par exemple 1200).

3-> Module « Bloc CMS d'information client » En configurant ce module, vous pourrez afficher un texte de présentation de votre marque ou de votre site à coté du diaporama. Le site de démo utilise un titre (balise h1) et deux paragraphes.

4-> Module « Bloc nouveaux produits » Ce module affiche les nouveaux produits de votre boutique. En le configurant vous pourrez définir le nombre de produit maximum à afficher (3 sur le site de démo), ainsi que le nombre de jour pour considérer que les produits sont « nouveaux ».

5-> Module « Bloc meilleures ventes » Ce module affiche les meilleures ventes de votres boutique. Si votre site est nouveau et que vous souhaitez quand même y afficher des produits, vous pouvez vous-même passer de fausses commandes sur le site et passer le statut de la commande à « livré ».

Pour modifier le nombre de produit maximum à afficher ici, vous devez modifier le fichier « modules/blockbestsellers/blockbestsellers.php ». Recherchez la ligne suivante :

if (!($result = ProductSale::getBestSalesLight((int)$params['cookie']->id_lang, 0, 8)))

Le dernier chiffre définit le nombre de produit maximum.

Disposition des « Hooks »

displayTop

displayHome

displayHomeTabContent

displayLeftColumn (vide et désactivée par défaut)

Position des modules Par défaut, les modules sont positionnés comme ci-dessous (Modules > Positions) :

Modules supplémentaires Pour configurer un module, il faut se rendre dans la section « Modules » de la console d’administration, chercher le module en question et cliquer sur le lien « Configurer » qui se trouve juste en dessous. 01 Oslo configuration du thème (config01oslo) Ce module est requis par le thème 01 Oslo. En le configurant vous pourrez changer les couleurs de nombreux éléments. Vous pourrez également définir les options suivantes :

1. Sous-categories sur la page catégories: a. Activé : Les sous-catégories seront affichées sur les pages catégories (qui possèdent

des sous-catégories) b. Désactivé : Les sous-catégories ne sont pas affichées

01 Ultimate Background (ultimatebackgroud01) Le module vu précédement permet de définir une couleur pour le fond de page. Si vous souhaitez configurer un fond de page plus complexe, ce module est fait pour vous.

Choix du type de fond

Couleur de fond

1. Sélectionner « Couleur de fond : » 2. Dans le champ texte, indiquer la couleur à utiliser. La couleur doit être au format

hexadécimal. 3. Cliquer sur le bouton « Enregistrer » en bas de page.

A savoir : le choix d’une couleur de fond est important même si vous sélectionnez un autre type de fond. En effet celle-ci s’affichera le temps que votre image de fond ou votre vidéo se charge.

Dégradé de fond

1. Sélectionner « Dégradé de fond : » 2. Préciser la première couleur du dégradé (hexadécimal) 3. Préciser la seconde couleur du dégradé (hexadécimal) 4. Préciser la direction du dégradé. (angle compris en 0° et 360°) cf figure ci-dessous, un angle

de 180° donnera un dégradé vertical, un angle de 90° donnera un dégradé horizontal 5. Cliquer sur le bouton « Enregistrer » en bas de page.

Image de fond

1. Sélectionner « Image de fond : » 2. Choix de l’image (formats acceptés jpg, gif, png) :

a. Sélectionner l’emplacement de l’image à utiliser sur votre disque dur OU

b. définir l’url de l’image si vous souhaitez utiliser une image hébergée sur un autre serveur (utilisation de CDN par exemple)

3. Cliquer sur le bouton « Enregistrer » en bas de page.

Paramètres avancés

1. Taille de l’image : cocher « plein écran » pour que l’image soit étirée afin d’occuper toute la largeur et toute la hauteur de l’écran

2. Background-attachment : cocher « fixed » pour que l’image reste à la même position même si l’utilisateur « scroll » la page

3. Background-repeat : a. no-repeat : l’image ne se répète pas b. repeat : l’image se repète (utilisation de motifs par exemple) c. repeat-x : l’image se repète uniquement horizontalement d. repeat-y : l’image se repète uniquement verticalement

4. Aligment horizontal : a. gauche : l’image est alignée à gauche b. center : l’image est centrée c. droite : l’image est alignée à droite

5. Alignement vertical : a. haut : l’image est alignée en haut b. centre : l’image est centrée verticalement c. bas : l’image est alignée en bas

Vidéo de fond

Si l’utilisation d’une vidéo pour le fond de votre site permettra de vous démarquer et d’obtenir des effets intéressants, il faut bien comprendre qu’il s’agit ici de vidéo de fond, pas de vidéo de contenu ou informative. La longueur ne devrait pas dépasser une minute, et la HD est à proscrire afin de limiter au maximum le poid de la vidéo.

1. Sélectionner « Vidéo de fond : » 2. Choix de la vidéo (formats acceptés mp4, webm, ogg/ogv) :

a. Sélectionner l’emplacement de la vidéo à utiliser sur votre disque dur OU

b. Renseigner l’url de la vidéo si vous souhaitez utiliser une vidéo hébergée sur un autre serveur (utilisation de CDN par exemple)

3. Optionnellement, définir une seconde source vidéo. Il s’agira de la même vidéo dans un autre format afin de garantir que la vidéo s’affichera sur un plus grand nombre de navigateurs. Il est recommandé d’utiliser en source 1 une vidéo au format .mp4 et en source 2 une vidéo au format .webm ou .ogv. Exemple de logiciel gratuit pour la conversion de vos vidéos : http://www.mirovideoconverter.com/ Support des formats vidéo : http://en.wikipedia.org/wiki/HTML5_video#Browser_support

4. Cliquer sur le bouton « Enregistrer » en bas de page.

Options du module

Fond de page Sélectionnez cette option si vous souhaitez simuler un « conteneur » entourant votre contenu. Définir la couleur de fond, l’opacité et la largeur de ce conteneur.

A savoir : laissez le champ « largeur » à 0 pour que le « conteneur » prenne toute la largeur de la fenêtre.

Page d’accueil seulement Cette option permet de n’appliquer le module qu’à la page d’accueil de votre site.

Performances du module Aussi bien pour des raisons de confort d’utilisation que de coûts de bande passante, il est très important que vos pages soient légères et s’affichent rapidement.

Aussi pensez à optimiser au maximum vos images et vos vidéos avant de les uploader, car aucun traitement n’est fait durant l’upload. Afin de réduire leur poid, vous pouvez par exemple réduire leur dimension et augmenter la compression.

L’idéal est d’héberger votre image ou votre vidéo sur un CDN puis de renseigner son url dans la configuration du module.

Personnalisation Pour vous assurer une maintenance simplifiée et garder la possibilité de mettre à jour ou réinstaller le thème facilement, il est conseillé de faire toutes vos modifications CSS dans le fichier custom.css situé dans le repertoire : « 01oslo/css/autoload ». Il faudra ensuite penser à sauvegarder ce fichier avant toute mise à jour du thème.

Vous pourrez par exemple depuis ce fichier modifier la police utilisée (un exemple est présent dans le fichier).

Plus d’informations Amusez-vous bien avec votre nouveau thème Prestashop, et bonnes ventes

N’hésitez pas à me faire part de vos remarques ou suggestions qui permettront d’améliorer le thème 01 Oslo, et à noter le thème s’il vous plaît. (addons.prestashop.com, rubrique Mon compte > Notes).

Auteur : Guillaume Laroche http://theme01.com/fr/