Widget diaporama par onglet

De Centre Documentation PowerBoutique

Qu'est-ce que le widget « Diaporama par onglet » ?

Le widget « Diaporama par onglet » permet de positionner, sur une ou plusieurs page(s) de votre site (accueil, gamme, rayon), un diaporama faisant défiler tour à tour 4 articles de votre choix.
En pratique, ce widget vous permet, par exemple, de mettre en avant, de façon interactive, vos 4 produits phares du moment, ou encore vos meilleures promotions en cours.

Voir le site démo

Voir le site démo Exemple du widget « Diaporama par onglet » affiché sur une page gamme.


Caractéristiques

Version minimale requise : PowerBoutique© V4.7.0
Technologies utilisées : HTML / CSS / JS
Navigateurs compatibles : Firefox.gif Chrome.gif Ie.gif Safari.gif Opera.gif
Versions : Francais.gif   Anglais.gif

Dernières modifications : le 08 janvier 2015

La procédure suivante a été conçue pour vous permettre d'installer ce widget de façon autonome.
L'intégration et le fonctionnement de ce widget sont conditionnés aux intitulés des dossiers et des fichiers précisés dans cette procédure. Nous vous recommandons de ne pas les renommer.
N.B. : un widget est une extension technique d'une ou plusieurs fonctionnalités du logiciel PowerBoutique©. Les procédures de mise en place et de personnalisation ne sont pas couvertes par l’Assistance Utilisateurs.

Étapes d'intégration

  • Étape 2
    Via la fonction "Import/Export" > "Espace de stockage", créez un nouveau dossier "diaporamaonglet" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /diaporamaonglet, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 4 fichiers que vous avez téléchargé dans l'étape 1 et cliquez sur "OK".

  • Étape 4
    Vous devez maintenant créer un modèle tête de gondole. Rendez-vous à la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles têtes de gondole". Une nouvelle page apparaît : cliquez sur "Nouveau modèle". Dans la fenêtre suivante, sélectionnez "Français", dans le menu déroulant en haut à droite, puis écrivez le nom de votre choix pour ce nouveau modèle, en choisissant pour "Nombre d'articles à mettre en avant" l'option "4". Enfin, insérez le code de la Version Française dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : si vous possédez un site multilingue, insérez le code de la Version Anglaise cette fois-ci après avoir, au préalable, choisi "Anglais", dans le menu déroulant en haut à droite de la page de création de modèle.

    Version Française Francais.gif :
    1. <!-- DEBUT - Widget diaporama par onglet -->
    2.  
    3. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    4. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
    5. <script type="text/javascript" src="../site/diaporamaonglet/diaporamaonglet.js"></script>
    6. <link rel="stylesheet" href="../site/diaporamaonglet/diaporamaonglet_fr.css" type="text/css">
    7. <div id="encart_grand_titre_liste_produits" class="bis_encart_grand_titre_liste_produits">
    8. <div id="featured">
    9. <ul id="encart_grand_titre_liste_produits" class="ui-tabs-nav">
    10. <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1" title="*article1-Nom* - *article1-Marque*"><img src="../boutique/images_boutique/cms/article1_vignette.gif"><span class="texte_catalogue description_liste_produits">*article1-Nom*<br>*article1-Marque*</span></a></li>
    11. <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2" title="*article2-Nom* - *article2-Marque*"><img src="../boutique/images_boutique/cms/article2_vignette.gif"><span class="texte_catalogue description_liste_produits">*article2-Nom*<br>*article2-Marque*</span></a></li>
    12. <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3" title="*article3-Nom* - *article3-Marque*"><img src="../boutique/images_boutique/cms/article3_vignette.gif"><span class="texte_catalogue description_liste_produits">*article3-Nom*<br>*article3-Marque*</span></a></li>
    13. <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4" title="*article4-Nom* - *article4-Marque*"><img src="../boutique/images_boutique/cms/article4_vignette.gif"><span class="texte_catalogue description_liste_produits">*article4-Nom*<br>*article4-Marque*</span></a></li>
    14. </ul>
    15. <!-- Premier Elément -->
    16. <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque*">
    17. <div style="display: block;" id="fragment-1" class="ui-tabs-panel">
    18. <img src="../boutique/images_boutique/cms/article1_zoom1.gif">
    19. <div class="info">
    20. <h2 id="grand_titre_liste_produits">*article1-Nom*</h2>
    21. <p class="texte_catalogue description_liste_produits">*article1-Resume*</p>
    22. </div>
    23. </div>
    24. </a>
    25. <!-- Second Elément -->
    26. <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque*">
    27. <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
    28. <img src="../boutique/images_boutique/cms/article2_zoom1.gif">
    29. <div class="info">
    30. <h2 id="grand_titre_liste_produits">*article2-Nom*</h2>
    31. <p class="texte_catalogue description_liste_produits">*article2-Resume*</p>
    32. </div>
    33. </div>
    34. </a>
    35. <!-- Troisième Elément -->
    36. <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque*">
    37. <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
    38. <img src="../boutique/images_boutique/cms/article3_zoom1.gif">
    39. <div class="info">
    40. <h2 id="grand_titre_liste_produits">*article3-Nom*</h2>
    41. <p class="texte_catalogue description_liste_produits">*article3-Resume*</p>
    42. </div>
    43. </div>
    44. </a>
    45. <!-- Quatrième Elément -->
    46. <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque*">
    47. <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
    48. <img src="../boutique/images_boutique/cms/article4_zoom1.gif">
    49. <div class="info">
    50. <h2 id="grand_titre_liste_produits">*article4-Nom*</h2>
    51. <p class="texte_catalogue description_liste_produits">*article4-Resume*</p>
    52. </div>
    53. </div>
    54. </a>
    55. </div>
    56. </div>
    57.  
    58. <!-- FIN - Widget diaporama par onglet -->
    Version Anglaise Anglais.gif :
    1. <!-- DEBUT - Widget diaporama par onglet -->
    2.  
    3. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    4. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
    5. <script type="text/javascript" src="../site/diaporamaonglet/diaporamaonglet.js"></script>
    6. <link rel="stylesheet" href="../site/diaporamaonglet/diaporamaonglet_us.css" type="text/css">
    7. <div id="encart_grand_titre_liste_produits" class="bis_encart_grand_titre_liste_produits">
    8. <div id="featured">
    9. <ul id="encart_grand_titre_liste_produits" class="ui-tabs-nav">
    10. <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1" title="*article1-Nom* - *article1-Marque*"><img src="../boutique/images_boutique/cms/article1_vignette.gif"><span class="texte_catalogue description_liste_produits">*article1-Nom*<br>*article1-Marque*</span></a></li>
    11. <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2" title="*article2-Nom* - *article2-Marque*"><img src="../boutique/images_boutique/cms/article2_vignette.gif"><span class="texte_catalogue description_liste_produits">*article2-Nom*<br>*article2-Marque*</span></a></li>
    12. <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3" title="*article3-Nom* - *article3-Marque*"><img src="../boutique/images_boutique/cms/article3_vignette.gif"><span class="texte_catalogue description_liste_produits">*article3-Nom*<br>*article3-Marque*</span></a></li>
    13. <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4" title="*article4-Nom* - *article4-Marque*"><img src="../boutique/images_boutique/cms/article4_vignette.gif"><span class="texte_catalogue description_liste_produits">*article4-Nom*<br>*article4-Marque*</span></a></li>
    14. </ul>
    15. <!-- Premier Elément -->
    16. <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque*">
    17. <div style="display: block;" id="fragment-1" class="ui-tabs-panel">
    18. <img src="../boutique/images_boutique/cms/article1_zoom1.gif">
    19. <div class="info">
    20. <h2 id="grand_titre_liste_produits">*article1-Nom*</h2>
    21. <p class="texte_catalogue description_liste_produits">*article1-Resume*</p>
    22. </div>
    23. </div>
    24. </a>
    25. <!-- Second Elément -->
    26. <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque*">
    27. <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
    28. <img src="../boutique/images_boutique/cms/article2_zoom1.gif">
    29. <div class="info">
    30. <h2 id="grand_titre_liste_produits">*article2-Nom*</h2>
    31. <p class="texte_catalogue description_liste_produits">*article2-Resume*</p>
    32. </div>
    33. </div>
    34. </a>
    35. <!-- Troisième Elément -->
    36. <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque*">
    37. <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
    38. <img src="../boutique/images_boutique/cms/article3_zoom1.gif">
    39. <div class="info">
    40. <h2 id="grand_titre_liste_produits">*article3-Nom*</h2>
    41. <p class="texte_catalogue description_liste_produits">*article3-Resume*</p>
    42. </div>
    43. </div>
    44. </a>
    45. <!-- Quatrième Elément -->
    46. <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque*">
    47. <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
    48. <img src="../boutique/images_boutique/cms/article4_zoom1.gif">
    49. <div class="info">
    50. <h2 id="grand_titre_liste_produits">*article4-Nom*</h2>
    51. <p class="texte_catalogue description_liste_produits">*article4-Resume*</p>
    52. </div>
    53. </div>
    54. </a>
    55. </div>
    56. </div>
    57.  
    58. <!-- FIN - Widget diaporama par onglet -->
    N.B. : les codes de la version française et de la version anglaise sont identiques. Seul l'appel au fichier .css est différent : chaque version possède son propre fichier .css pour permettre une personnalisation différente selon la version. Par défaut, l'apparence du widget sera identique sur les deux.


  • Étape 5
    Vous devez maintenant appliquer ce modèle tête de gondole. Rendez-vous, pour cela, à la fonction "Apparence" > "Modèles têtes de gondole". Choisissez, dans le premier menu déroulant, la page sur laquelle le widget sera placé (votre page d'accueil, une gamme ou un rayon), puis sélectionnez, dans le deuxième menu déroulant, le modèle tête de gondole que vous avez créé dans l'étape 4. Cochez ensuite l'option "Tête de gondole en haut de page" ou "Tête de gondole en bas de page" pour définir son emplacement. Cliquez enfin sur "Enregistrer".

  • Étape 6
    La dernière étape consiste à choisir les 4 articles qui seront affichés dans ce diaporama en tête de gondole. Rendez-vous à la fonction "Catalogue". Selon la page que vous avez choisie dans l'étape 5, cliquez sur "Gammes", "Rayons" ou "Accueil".
    Dans l'écran suivant :
    - si vous avez choisi une gamme ou un rayon : sélectionnez la gamme ou le rayon en question dans le menu déroulant, et cliquez sur "Modifier". Une nouvelle page apparaît : cliquez sur l'onglet "Tête de gondole" et choisissez les 4 articles à mettre en avant*. Cliquez enfin sur "Enregistrer".
    * N.B. : si vous avez des articles présents dans une gamme secondaire, en sélectionnant cette même gamme secondaire dans le menu déroulant de l'onglet "Tête de gondole", vos articles ne seront pas visibles . Pour qu'ils le soient, il vous faut sélectionner la gamme principale dans laquelle les articles se trouvent.
    - si vous avez choisi la page d'accueil : cliquez sur l'onglet "Tête de gondole" et sélectionnez les 4 articles à mettre en avant. Cliquez enfin sur "Enregistrer".


Personnalisation du widget (facultatif)

Il est possible de personnaliser l'apparence de ce widget.

Remarques concernant les extraits de codes :
Les numéros de lignes sont précisés à titre indicatif sur la base des fichiers téléchargés dans l'étape 1 d'intégration. Ces numéros peuvent varier, en fonction des modifications apportées aux fichiers ou du logiciel utilisé pour les éditer.
Les textes entourés de /* ... */ ou <! -- ... --> ou encore // ... // sont des commentaires. Ils sont là pour vous aider dans la compréhension du code. Une partie de code commentée ne sera pas visible sur votre site.

Modifier l'apparence de la zone de l'article sélectionné/affiché
  • Par défaut, la zone de l'article sélectionné/affiché s'affiche sur fond gris avec une couleur de police blanche. Vous pouvez modifier son apparence pour que le widget soit aux couleurs de votre site.
    Il vous faut, pour cela, éditer le fichier "diaporamaonglet_fr.css" pour la Version Française et le fichier "diaporamaonglet_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.

    - couleur de fond de la zone de l'article sélectionné/affiché : cherchez, sur la ligne 94, le code "background:#666666;". Modifiez le code couleur "#666666;" qui correspond au gris par celui de votre choix (défini en hexadécimale).
    - couleur du texte de la zone de l'article sélectionné/affiché : cherchez, sur la ligne 98, le code "color:#fff;". Modifiez le code couleur "#fff;" qui correspond au blanc par celui de votre choix (défini en hexadécimale).

    Enregistrez le(s) fichier(s) (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /diaporamaonglet, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Sélectionnez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Sur le site démo PowerBoutique, nous avons modifié la couleur de fond de la zone de l'article sélectionné/affiché en violet et la couleur du texte en rose pour la Version Française (fichier "diaporamaonglet_fr.css") :

Francais.gif
  1. #featured ul.ui-tabs-nav li.ui-tabs-selected a{      
  2. 	background:#612978;  /* "#666666;" devient "#612978;" - "#612978;" est du violet - couleur de fond de la zone de l'élément sélectionné */
  3. } 
  4.  
  5. #featured ul.ui-tabs-nav li.ui-tabs-selected a span{  
  6. 	color:#FEBFD2;  /* "#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte de la zone de l'élément sélectionné */
  7. }

Idem pour la Version Anglaise (fichier "diaporamaonglet_us.css") :

Anglais.gif
  1. #featured ul.ui-tabs-nav li.ui-tabs-selected a{      
  2. 	background:#612978;  /* "#666666;" devient "#612978;" - "#612978;" est du violet - couleur de l'élément sélectionné */
  3. } 
  4.  
  5. #featured ul.ui-tabs-nav li.ui-tabs-selected a span{  
  6. 	color:#FEBFD2;  /* "#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte de la zone de l'élément sélectionné */
  7. }

N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs



Modifier l'apparence de la zone de l'article survolé
  • Par défaut, la zone de l'article survolé s'affiche sur fond gris avec une couleur de police blanche. Vous pouvez modifier son apparence pour que le widget soit aux couleurs de votre site.
    Il vous faut, pour cela, éditer le fichier "diaporamaonglet_fr.css" pour la Version Française et le fichier "diaporamaonglet_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.

    - couleur du texte de la zone de l'article survolé : cherchez, sur la ligne 86, le code "color:#fff;". Modifiez le code couleur "#fff;" qui correspond au blanc par celui de votre choix (défini en hexadécimale).
    - couleur de fond de la zone de l'article survolé : cherchez, sur la ligne 90, le code "background:#666666;". Modifiez le code couleur "#666666;" qui correspond au gris par celui de votre choix (défini en hexadécimale).

    Enregistrez le(s) fichier(s) (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /diaporamaonglet, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Sélectionnez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Sur le site démo PowerBoutique, nous avons modifié la couleur de fond de la zone de l'article survolé en violet et la couleur du texte en rose pour la Version Française (fichier "diaporamaonglet_fr.css") :

Francais.gif
  1. #featured li.ui-tabs-nav-item a:hover span{          
  2. 	color:#FEBFD2;  /* "#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte de la zone de l'élément survolé */
  3. } 
  4.  
  5. #featured li.ui-tabs-nav-item a:hover{              
  6. 	background:#612978;  /* "#666666;" devient "#612978;" - "#612978;" est du violet - couleur de fond de la zone de l'élément survolé */
  7. }

Idem pour la Version Anglaise (fichier "diaporamaonglet_us.css") :

Anglais.gif
  1. #featured li.ui-tabs-nav-item a:hover span{          
  2. 	color:#FEBFD2;  /* "#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte de la zone de l'élément survolé */
  3. } 
  4.  
  5. #featured li.ui-tabs-nav-item a:hover{              
  6. 	background:#612978;  /* "#666666;" devient "#612978;" - "#612978;" est du violet - couleur de fond de la zone de l'élément survolé */
  7. }

N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs



Modifier l'apparence des éléments non sélectionnés et non survolés
  • Par défaut, les éléments non sélectionnés et non survolés s'affichent sur un fond défini dans l'id "encart_grand_titre_liste_produits" avec une couleur de police grise. Vous pouvez modifier leur apparence pour que le widget soit aux couleurs de votre site.
    Il vous faut, pour cela, éditer le fichier "diaporamaonglet_fr.css" pour la Version Française et le fichier "diaporamaonglet_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.

    - couleur du texte des éléments non sélectionnés et non survolés : cherchez, sur la ligne 50, le code "color:#666666;". Modifiez le code couleur "#666666;" qui correspond au gris par celui de votre choix (défini en hexadécimale).
    - couleur de fond des éléments non sélectionnés et non survolés : cherchez, sur la ligne 30, le code "/*background:#;*/".
    Cette ligne est en réalité un commentaire car la couleur de fond n'est pas définie ici mais dans l'id "encart_grand_titre_liste_produits". Si vous souhaitez forcer l'ajout d'une autre couleur, vous devez modifier cette ligne en la dé-commentant et en ajoutant le code couleur de votre choix (défini en hexadécimale).

    Enregistrez le(s) fichier(s) (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /diaporamaonglet, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Sélectionnez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Sur le site démo PowerBoutique, nous avons modifié la couleur de fond des éléments non sélectionnés et non survolés en blanc et la couleur du texte en lilas pour la Version Française (fichier "diaporamaonglet_fr.css") :

Francais.gif
  1. background:#fff;     /* "background:#;" devient "background:#fff;" - "#fff;" est du blanc - changement de la couleur de fond de la zone des éléments non sélectionnés et non survolés si on veut la différencier de encart_grand_titre_liste_produits */

Francais.gif
  1. color:#B666D2; /* "#666666;" devient "#B666D2;" - "#B666D2;" est du lilas - couleur du texte de la zone des éléments non sélectionnés et non survolés */

Idem pour la Version Anglaise (fichier "diaporamaonglet_us.css") :

Anglais.gif
  1. background:#fff;      /* "background:#;" devient "background:#fff;" - "#fff;" est du blanc - changement de la couleur de fond de la zone des éléments non sélectionnés et non survolés si on veut la différencier de encart_grand_titre_liste_produits */

Anglais.gif
  1. color:#B666D2; /* "#666666;" devient "#B666D2;" - "#B666D2;" est du lilas - couleur du texte de la zone des éléments non sélectionnés et non survolés */

N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs



Modifier l'apparence de la zone du titre et de la description située sous le visuel principal
  • Par défaut, la zone du titre et de la description située sous le visuel principal (celui correspondant à l'article sélectionné/affiché) s'affiche sur fond noir (avec une opacité) avec une couleur de police blanche. Vous pouvez modifier son apparence pour que le widget soit aux couleurs de votre site.
    Il vous faut, pour cela, éditer le fichier "diaporamaonglet_fr.css" pour la Version Française et le fichier "diaporamaonglet_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.

    - couleur de fond de la zone du titre et de la description située sous le visuel principal : cherchez, sur la ligne 116, le code "/*background:#000;*/". Modifiez le code couleur "#000;" qui correspond au noir par celui de votre choix (défini en hexadécimale).
    - couleur du texte du titre et de la description situés sous le visuel principal : cherchez, sur la ligne 123, le code "color:#fff;". Modifiez le code couleur "#fff;" qui correspond au blanc par celui de votre choix (défini en hexadécimale).

    Enregistrez le(s) fichier(s) (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /diaporamaonglet, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Sélectionnez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Sur le site démo PowerBoutique, nous avons modifié la couleur de fond de la zone du titre et de la description située sous le visuel principal en violet et la couleur du texte en rose pour la Version Française (fichier "diaporamaonglet_fr.css") :

Francais.gif
  1. background:#612978;     /* "background:#000;" devient "background:#612978;" - "#612978;" est du violet - couleur de fond de la zone du titre et de la description sous la grande image */

Francais.gif
  1. color:#FEBFD2; /* "color:#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte du titre et de la description sous la grande image */

Idem pour la Version Anglaise (fichier "diaporamaonglet_us.css") :

Anglais.gif
  1. background:#612978;      /* "background:#000;" devient "background:#612978;" - "#612978;" est du violet - couleur de fond de la zone du titre et de la description sous la grande image */

Anglais.gif
  1. color:#FEBFD2; /* "color:#fff;" devient "#FEBFD2;" - "#FEBFD2;" est du rose - couleur du texte du titre et de la description sous la grande image */

N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs



Modifier la couleur du bord principal
  • Par défaut, la couleur du bord principal est gris clair. Vous pouvez choisir de modifier cette couleur pour que le widget soit aux couleurs de votre site.
    Il vous faut, pour cela, éditer le fichier "diaporamaonglet_fr.css" pour la Version Française et le fichier "diaporamaonglet_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.

    Cherchez, sur la ligne 6, le code "border:1px solid #dedede;". Modifiez le code couleur "#dedede;" qui correspond au gris clair par celui de votre choix (défini en hexadécimale).

    Enregistrez le(s) fichier(s) (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /diaporamaonglet, cliquez sur le bouton "Ajouter", puis sur "Parcourir...". Sélectionnez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir" et enfin cliquez sur "OK".

Sur le site démo PowerBoutique, nous avons modifié la couleur du bord en violet pour la Version Française (fichier "diaporamaonglet_fr.css") :

Francais.gif
  1. border:1px solid #612978;  /* "#dedede;" devient "#612978;" - "#612978;" est du violet - bordure générale */


Idem pour la Version Anglaise (fichier "diaporamaonglet_us.css") :

Anglais.gif
  1. border:1px solid #612978;  /* "#dedede;" devient "#612978;" - "#612978;" est du violet - bordure générale */

N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs




Services d'intégration et de personnalisation des widgets PowerBoutique©

Nos équipes sont à votre disposition pour intervenir depuis l'intégration de ce widget jusqu'à sa personnalisation complète, selon vos besoins et les spécificités de votre site.
Contactez votre consultant e-business pour en savoir plus : cliquez ici.



Cet espace de documentation vise à vous aider dans la personnalisation avancée de votre site PowerBoutique©. L'Assistance Utilisateurs PowerBoutique© ne couvre pas l'utilisation que vous pouvez faire des informations issues de cette documentation. cf. Conditions d'utilisation