Widget Kit graphique Euro 2016 de Football

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Kit graphique Euro 2016 de Football » ?

Le championnat d'Europe de football aura lieu en France, du 10 juin au 10 juillet 2016.
Avec le widget « Kit graphique Euro 2016 de Football », vous ajoutez des éléments graphiques thématiques sur votre site pour l'habiller aux couleurs de cet événement sportif.
Ce widget inclut également un compte à rebours des matchs de l'équipe de France à venir, ou des prochaines grosses têtes d'affiches dans le cas où la France se voyait être éliminée de la compétition.

N.B. : si un fond de page (image et/ou couleur) est déjà appliqué à votre site, le widget se superposera à votre fond de page habituel.

Voir l'exemple

Voir le site démo Exemple du widget « Kit graphique Euro 2016 de Football »


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 31 mars 2016

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 "euro2016" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

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

  • Étape 4
    Créez un espace promotionnel* via la fonction "Apparence" > "Modèles de site". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" puis cliquez sur le bouton "Personnaliser". Dans l'écran suivant, cliquez sur le bouton "Nouvel espace promotionnel". Positionnez ensuite ce nouvel espace promotionnel le plus bas possible à l'aide du bouton Deplacer code dev.gif (cela n'a pas d'impact sur son affichage). Enregistrez son emplacement en cliquant sur le bouton Enregistrer position des blocs.png. Enfin, activez-le en cliquant sur le bouton Off.gif (qui passera alors en On.gif ).
    N.B. : renouvelez l'étape 4 si vous possédez un site multilingue, en prenant soin de sélectionner "site US" dans la fonction "Apparence" > "Modèles de site".
    N.B. : dans le cas où vous utilisez votre propre gabarit html pour personnaliser l'apparence de votre site, créez votre espace promotionnel via la fonction "Apparence" > "Outils Experts - Web-design" > "Intégration gabarits html" > bouton "Espaces promotionnels", puis éditez-le dans la fonction "Animation" > "Bloc libre - cms". Pour finir, appelez ce nouveau cms dans votre gabarit, le plus bas possible.
    *vous pouvez également utiliser un cms existant.

  • Étape 5
    Insérez ensuite le code de la Version Française dans l'espace promotionnel créé dans la Version Française* à l'aide du bouton Style edit fo.gif. Placez ce code dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : renouvelez l'étape 5 si vous possédez un site multilingue, en prenant soin de copier-coller le code dans l'espace promotionnel créé dans la Version Anglaise cette fois-ci.
    N.B. : l'espace promotionnel contenant ce code doit impérativement être appelé sur toutes vos pages pour que le widget fonctionne sur l'ensemble du site.
    *vous pouvez également insérer le code dans un cms existant.

    Version Française Francais.gif :
    1 <!-- DEBUT - Widget Kit graphique Euro 2016 de Football -->
    2 
    3 <link rel="stylesheet" type="text/css" href="../site/euro2016/euro2016.css">
    4 <script type="text/javascript" src="http://www.ph1.powerboutique.net/L19993/site/euro2016/date_match_evenement_euro_2016.js"></script>
    5 <script type="text/javascript" src="../site/euro2016/euro2016_fr.js"></script>
    6 
    7 <!-- FIN - Widget Kit graphique Euro 2016 de Football -->
    

    Version Anglaise Anglais.gif :
    1 <!-- DEBUT - Widget Kit graphique Euro 2016 de Football -->
    2 
    3 <link rel="stylesheet" type="text/css" href="../site/euro2016/euro2016.css">
    4 <script type="text/javascript" src="http://www.ph1.powerboutique.net/L19993/site/euro2016/date_match_evenement_euro_2016.js"></script>
    5 <script type="text/javascript" src="../site/euro2016/euro2016_us.js"></script>
    6 
    7 <!-- FIN - Widget Kit graphique Euro 2016 de Football -->
    


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 les couleurs et tailles de police du widget
  • Pour modifier les couleurs et les tailles de police du widget, il vous faut éditer le fichier "euro2016.css" pour la Version Française et la Version Anglaise.
    Ouvrez ce fichier (que vous avez téléchargé lors de l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce fichier, éditez la dernière version pour ne pas perdre vos modifications précédentes.

    Couleur des équipes et des chiffres :

    - Ligne 8 : "color:#FFF;". Modifiez le code couleur par défaut. Il est défini en hexadécimale. Pour information, "#FFF;" correspond au blanc.

    Couleur des initiales de durée :

    - Ligne 37 : "color:#515151;". Modifiez le code couleur par défaut. Il est défini en hexadécimale. Pour information, "#515151;" correspond à un gris clair.

    Taille de la police des chiffres :

    - Ligne 18 : "font-size:30px;". Modifiez le 30px par défaut. Il est défini en pixel.

    Taille de la police des équipes :

    - Ligne 28 : "font-size:20px;". Modifiez le 20px par défaut. Il est défini en pixel.

    Taille de la police des initiales de durée :

    - Ligne 38 : "font-size:24px;". Modifiez le 24px par défaut. Il est défini en pixel.

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

    Pour finir, enregistrez le fichier (gardez le format .css et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /paiementsansfrais, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le fichier que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".



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