https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Le contenu de ce document est lié au framework de template Shape5 Vertex.

Le Framework Vertex est distribué sous licence GNU / GPL .
Toutes les images, CSS, PHP, et Javascript sont © Shape5 2012

Le Logiciel 'Vertex Framework’ est destiné à être utilisé dans Joomla! (1.6+)
(Joomla! est un logiciel libre sous licence GNU / GPL; Joomla! est disponible depuis www.joomla.org [http://www.joomla.org])

Configuration serveur requise

Le Framework Vertex nécessite la configuration suivante:

• PHP version 5.2.16 ou supérieure - http://www.php.net

• Joomla! 1.6.x ou supérieure - http://www.joomla.org


Compatibilité avec les navigateurs

Framework Vertex est compatible avec la plupart des navigateurs, y compris Internet Explorer (version 7.0+), Firefox, Chrome, Safari.


Installation

Veuillez vous référer à http://www.shape5.com/joomla_tutorials.html pour obtenir des instructions d'installation d'un Vertex Site Shaper (bundle incluant joomla + framework) ou simplement le template lui-même.


Téléchargement

La nouvelle version du Framework Vertex est disponible dans la rubrique Téléchargements de shape5.com une fois que vous êtes connecté :

http://www.shape5.com/component/option,com_docman/Itemid,96/task,cat_view/gid,190/

Veuillez vous reporter à la page suivante pour plus d'informations :

http://www.shape5.com/joomla/framework/vertex_framework.html

Chaque template construit avec Vertex est également fourni avec ses propres options spécifiques uniques applicables à ce template particulier comme des couleurs de surbrillance, des icônes de réseaux sociaux, et bien plus encore.

Ces caractéristiques sont en compléments des fonctions standard de Vertex, et sont toujours contrôlées par l'interface très conviviale de Vertex.

La capture d'écran ci-dessous est un exemple de template avec ces options :

tuto vertex1

Vue d'ensemble - fixe, fluide

Vertex comporte un bouton va-et-vient entre les mises en page fluides et fixes, donc si vous préférez une mise en page fluide, vous pouvez facilement passer à ce template.
Comme vous pouvez le voir sur la photo ci-dessous vous pouvez ajuster la largeur de chaque colonne sur la page, ainsi que la largeur du body et de largeur maximum du body. Enfin, nous avons prévu le chargement des articles avant les colonnes de gauche et de droite pour l'optimisation SEO. Ils sont repositionnés avec CSS donc visuellement vous ne voyez pas de différence dans la présentation.

Vue d'ensemble

Le système de menu S5 Flex est un plugin très puissant qui fournit des fonctionnalités bien au-delà de ce que le système standard de menu Joomla peut fournir. Ce plugin est destiné à être comme une extension du système de menu existant dans Joomla pour ajouter de nombreuses nouvelles fonctionnalités. Ce plugin ne peut être utilisé qu'avec des templates Shape5 spécialement conçus autour de ce plugin. Si un template est compatible avec ce plugin, cela sera précisé sur la page de démonstration du template ici http://demo.shape5.com.

Bref aperçu

Mises en page infinies :

Parce qu'il y a tellement de positions de module disponible dans de nombreuses zones différentes, le nombre de mises en page que vous pouvez créer sont illimitées! Une moyenne de 90 positions est comprise dans chaque design !

Par exemple, si vous voulez afficher votre contenu principal mais avoir toujours une colonne de modules sur le côté droit de votre site , publiez simplement vos modules dans la position right ou right_inset ou les deux. La même chose serait vraie à l'opposé, si vous voulez une colonne sur la gauche publiez vos modules dans left ou left_inset.

Bien sûr, vous pouvez choisir de ne pas avoir de colonne du tout.
Souvenez-vous, tout module non publié se repliera automatiquement et la région restante s'adaptera automatiquement. Il n'est pas nécessaire de choisir une mise en page prédéfinie pour l'ensemble de votre site, il suffit d'utiliser le pouvoir de repli des positions de module et de profiter des nombreuses quantités de positions de module pour créer la mise en page dont vous pouvez rêver! Assurez-vous de vérifier la disposition des modules ci-dessous.

Tous les modules sont entièrement repliable:

En quoi consiste exactement un module repliable? C'est très simple, chaque fois qu'un module n'est pas publié dans une position, cette position n'apparaît pas sur le frontend du template. Prenons l'exemple suivant :rangees vertex1

Cette rangée dispose de 6 emplacements de modules disponibles pour la publication. Disons que vous ne souhaitez publier que 4 de ces positions. Le template repliera automatiquement les modules que vous ne voulez pas utiliser et ajustera la taille des modules en conséquence:rangees vertex2

Si aucun module n'est publié sur la rangée, l'ensemble de la rangée elle-même ne s'affichera pas. Tout le bénéfice de cela est que vous pouvez assigner chaque module à ses propres pages, de sorte que la mise en page de votre site peut changer à chaque page!


Changer les tailles de Module

Le Framework Vertex vous permet d'ajuster la largeur des modules contenus dans une rangée de modules ou de la définir comme automatique. Par exemple, top_row1 contient 6 positions de module, si vous publiez des modules seulement dans top_row1_1 et top_row1_2 les modules seront chacun réglés à 50% de l'espace disponible ou vous pouvez choisir de définir les pourcentages manuellement comme 60 % et 40 %

.rangees vertex3

Vous pouvez facilement changer cela dans l'administration de Vertex sous les « rangées de ligne ». Si vous voulez régler manuellement les largeurs de rangées sans l'aide des curseurs, il suffit de cliquer sur la petite icône « engrenage » et vous serez en mesure d'entrer dans n'importe quel pourcentage de largeurs que vous désirez. Si un seul module est publié dans la rangée, la largeur devient automatiquement 100%.

Sous l'onglet général, vous pouvez activer la compression JS ou CSS pour Vertex afin de comprimer toutes les fichiers css et js inclus et utilisés dans Vertex. Cela permettra d'augmenter considérablement l'ensemble des performances sur votre site et de réduire la quantité d'appels à votre serveur. N'activez pas cette fonction lorsque votre site est encore en cours de développement, cela va mettre en cache vos fichiers jusqu'à ce qu'ils expirent, ce qui fait qu'il sera difficile de faire des modifications sur un site en développement.

general vertex1

JS Compression - L'activation de cette fonction va compresser tous les fichiers JS spécifiques de modèle en deux fichiers php cachés, un en haut et un en bas de la source du site.

CSS Compression - L'activation de cette fonction va compresser tous les fichiers CSS spécifiques de modèle en deux fichiers php cachés, un en haut et un en bas de la source du site.

En bas de cette zone générale se trouve l'endroit où vous pouvez ajouter n'importe quel script Google analytic ou tout autre code Javascript ou code que vous voulez ajouter à la fin du fichier index.php pour qu'il soit appelé au dessus de la balise </body>.Images Percentage Width – Pourcentage Largeur Images - Cette option permet de régler toutes les images de modules et d'articles uniquement comme le réglage de ce champ et ceci automatiquement.
Entrez un numéro de 1 à 100 pour l'activer. Il doit être utilisé en dernier recours, mais c'est proposé comme solution automatique.

Image Auto Height – Hauteur d'image Auto - Si une image a une largeur max activée, cela permettra que la hauteur s'ajuste automatiquement pour correspondre à la largeur de l'image. Par exemple, si vous avez une image qui fait 200px de large, et c'est à l'intérieur d'une balise div de 100px de large, l'appel max-width:100% définira l'image à 100px. Cette option fera en sorte que la hauteur de l'image reste proportionnelle à la nouvelle largeur. Nous ne pouvons envisager une raison qui ferait que ce ne serait pas utilisé, donc elle est activée par défaut.

Image Max Width – Largeur d'image Auto - Cette option permet de s'assurer que les images ne peuvent pas être plus large que leur espace disponible. L'activation de cette fonction permet de programmer les images pour un max-width de 100% (ce qui signifie 100 % de la largeur de l'élément qui l'englobe). Il est fortement recommandé de laisser cette option activée.

Hide Component Area: (Cachez zone de composants:)

Vous pouvez choisir d'afficher ou pas la zone de contenu/composant sur la page d'accueil. Si vous choisissez non, vous devez avoir un module publié dans l'une des rangées suivantes : middle_top, above_body, below_body, ou middle_bottom, sinon la mise en page ne se fera pas correctement car aucune colonne du milieu ne sera présente. Si vous cliquez sur non et désactivez tous les modules publiés sur les zones principales, du milieu du site c'est à dire: left, right, left_inset, above_body, etc. alors toute la section du milieu va disparaitre.

general vertex2


Optional Login and Register URLs: (URLs connexion et enregistrement facultatifs)

Par défaut, les liens de connexion et d'enregistrement qui se trouvent en bas de l'onglet général sont prévus pour fonctionner avec le module S5 Box. Cependant vous pouvez le remplacer en entrant simplement vos propres URLs vers lesquelles votre site redirigera les gens après le clic.

Les scripts mentionnés dans le présent article doivent être entrés dans l'afficheur de code source html de votre éditeur. Chaque JavaScript doit être activé sous l'onglet Javascripts dans la configuration.

Multibox

  • Prend en charge une variété de formats multimédia: images, flash, video, mp3s, html!

  • Auto détecte les formats ou vous pouvez spécifier le format

  • descriptions Html

  • Groupement d'images, vidéos, etc.

  • Active/désactive la superposition de page lorsque multibox apparaît (via les paramètres de template)

  • Active/désactive les contrôles (via les paramètres de template)

Pour activer multibox, utilisez ce qui suit autour de n'importe quelle image.
Voici 3 exemples de multibox utilisé sur certaines images :


<a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" title="Image Example #1:"> <img src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" title=" Image Example #2:"> <img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" title=" Image Example #3:"> <img src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>

Comment regrouper les images ci-dessus? :

Pour des images de groupe il suffit d'ajouter un nom à la balise rel, qui est appelée à l'intérieur de l<a>. Vous pouvez inventer n'importe quel nom, mais simplement être sûr d'utiliser le même nom dans toutes les images que vous voulez afficher dans un groupe particulier. Par exemple, pour ajouter des images dans un groupe nommé "firstset" vous le feriez à l'aide de ce qui suit rel="[firstset]" sur chaque élément:

<a href="http://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" rel="[firstset]" class="s5mb" title="Grouped Image Example #1:"> <img src="http://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" rel="[firstset]" class="s5mb" title="Grouped Image Example #2:"> <img src="http://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="http://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" rel="[firstset]" class="s5mb" title="Grouped Image Example #3:"> <img src="http://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>

Exemple Youtube :

Vous pouvez utiliser les formats vidéo suivants : flv, mov, wmv, real et swf. Il suffit d'insérer l'URL vers les vidéos dans le href du lien hypertexte, voici un exemple de la manière dont nous l'avons fait pour une vidéo Youtube:

<a href="http://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div>UP: Carl and Ellie </div>

Comment saisir l'URL vidéo de youtube convenablement ?:

Tutoriel Youtube: Il suffit de cliquer droit sur une vidéo youtube et de copier le code embed, ensuite collez-le dans un éditeur de texte, recherchez le embed src et utiliser cette URL dans votre lien hypertexte.

<embed src= http://www.youtube.com/v/VGiGHQeOqII

Exemple MP3:

<a href="http://www.shape5.com/demo/images/music.mp3" id="mb8" class="s5mb" title="Music">MP3 example</a> <div>mp3 example - CLICK ME</div>

Exemple d'iFrame :

<a href="http://www.getfirebug.com" rel="width:790,height:600" id="mb28" title="http://getfirebug.com/">iFrame/HTML Example - CLICK ME</a> <div>getfirebug.com</div>

Lazy Load (Chargement différé)

Le script de chargement différé est un excellent moyen d'économiser la bande passante et de charger vos pages beaucoup plus rapidement. Les images qui ne sont pas visibles lors du chargement de la page initiale ne sont pas chargées jusqu'à ce qu'elles arrivent dans la zone d'affichage principale. Une fois qu'une image arrive dans la vue, elle est alors téléchargée et apparaît dans un effet « fade ».

Le réglage est très facile! Par défaut, ce script est désactivé, afin de lui permettre de choisir tout simplement toutes les images ou d'images individuelles à partir de la liste déroulante, comme illustré ci-dessous, à partir de la page de configuration du template.

javascript vertex

« All Images » va charger chaque image standard sur la page avec lazy load. Il n'y a aucune configuration ou code supplémentaire à ajouter à cette configuration, cela se fera automatiquement.
« Individual images » sera utilisé si vous voulez que certaines images soit chargées avec ce script mais pas toutes. Pour ce faire, il suffit d'ajouter à l'image comme ceci:

<img class="s5_lazyload" src="/image.jpg"></img>

Tooltips : ( info-bulles )

Remarque - Le script infobulles est désactivé par défaut. Si vous souhaitez l'utiliser, vous devez activer ce script dans la zone de configuration du template. Cela comprend également les installations site shaper.

Image simple :

<a onmouseover="Tip('This is a sample tooltip.', WIDTH, 140, OPACITY, 80, ABOVE, true, OFFSETX, 1, FADEIN, 200, FADEOUT, 300,SHADOW, true, SHADOWCOLOR, '#000000',SHADOWWIDTH, 2, BGCOLOR, '#000000',BORDERCOLOR, '#000000',FONTCOLOR, '#FFFFFF', PADDING, 9)" href="http://www.shape5.com/demo/etensity/">

<img class="boxed2" alt="" src="http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg"/>

</a>

Image avec info-bulle :

<a href="/demo/salon_n_spa/index.htm" onmouseover="Tip('Image Demo

<img src=http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220 height=147>')">Demo 2 Image Tool Tip </a>

Image avec info-bulle :

<a href="#" onmouseover="Tip('Image Demo<br /> <br /><img src=http://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220 height=147>',SHADOW, true, BGCOLOR, '#000000', FADEIN, 400, FADEOUT, 400, SHADOWCOLOR, '#000000', BORDERCOLOR, '#000000',OPACITY, 90,FONTCOLOR, '#FFFFFF')"><strong>Demo 3 Image Tool Tip</strong></a>

Info Slide

Le script info slide (diapositive d'info) est une excellente façon d'afficher votre contenu à vos clients ! Cela place une zone de texte coulissant sur n'importe quelle image sur la page. Il peut être placé à l'intérieur du contenu ou des modules. Il s'adapte également automatiquement à n'importe quelle taille d'écran lors du redimensionnement de la fenêtre.Vous pouvez en avoir autant que ce dont vous avez besoin sur la même page. Pour utiliser cette fonctionnalité, votre code doit ressembler à ceci.

<div class="s5_is_slide">

<div class="s5_is_display">

<h3>Example Slide</h3>

This is dummy text. You can add any text or html markup here.

</div>

</div>

Il s'agit d'une option d'onglet latéral que vous pouvez activer et publier sur votre site et ainsi afficher dans une position fixe, soit sur la gauche, soit sur la droite de l'écran. La grande caractéristique de ces onglets fixes est que vous pouvez entrer n'importe quel texte et celui-ci est automatiquement tourné à la verticale! C'est excellent pour que les moteurs de recherche lisent votre texte et vous évite aussi les tracas de devoir créer une image avec le texte vertical pour la placer sur le côté de votre site. Les onglets sont publié tout le long et peuvent avoir les options suivantes qui sont modifiables via la zone de paramètres du template et peuvent se connecter à n'importe quelle URL que vous désirez.

Voici une liste rapide des caractéristiques:

  • Changer de fond dans n'importe quelle couleur hexadécimal

  • Modifier la bordure dans n'importe quelle couleur hexadécimal

  • Changer la police dans n'importe quelle couleur hexadécimal

  • Définir la position verticale de chaque onglet

  • Définir la hauteur de chaque onglet

  • Positionner chaque onglet à gauche ou à droite de l'écran

  • Ajouter une classe pour chaque onglet fixe pour permettre s5 box ou peut-être une lightbox ou une autre extension tierce.

  • Ajouter une URL pour chaque onglet fixe donc charger l'URL au clic

  • Saisir le texte que vous désirez

Le panneau déroulant S5 Drop Down lui-même contient six positions de module. Vous pouvez publier tous les modules que vous souhaitez dans ces positions. Il est fourni avec des fonctionnalités, assurez-vous donc de consulter la liste et l'écran ci-dessous.

drop down vertex1

  • Personnalise presque tout! Ombres, opacité, dégradé, bordures.

  • Contient 6 positions de module : drop_down_1, drop_down_2, drop_down_3, drop_down_4, drop_down_5 and drop_down_6

  • S'adapte automatiquement à la hauteur de votre contenu.

  • Définissez votre propre texte d'ouverture et de fermeture

  • disparaît automatiquement si aucun module n'y est publié

  • Et beaucoup plus de fonctionnalités !

    drop down vertex2

Comment Ajouter une Nouvelle Position de Module dans Vertex ?

1. Pour ajouter une nouvelle position du module à votre template, vous pouvez tout simplement utiliser le code suivant:

<?php s5_module_call('votreposition','notitle'); ?>

"votreposition" pourrait être remplacé par la nouvelle position de module que vous souhaitez ajouter, nous l'appellerons juste "votreposition" pour référence.

2. Ensuite, vous devrez ouvrir le fichier templatedetails.xml qui se trouve dans le dossier du template et rechercher :

<positions>

Vous devrez alors ajouter votre nouveau position ici ainsi dans votre zone d'administration de Joomla vous pourrez sélectionner votre position de module nouvellement ajoutée :

<position>votreposition</position>

3. Si vous voulez faire que cette nouvelle position de module s'éclipse si vide, il vous suffit de l'entourer avec

<?php if (s5_countmodules('yourposition') { ?>

comme suit:

<?php if (s5_check_module('yourposition')) {
s5_module_call('yourposition','notitle');
} ?>

Comment ajouter de nouvelles options d'Administration?

1. Ce qui suit va vous montrer comment ajouter une nouvelle option admin dans la zone "template specific" de la zone admin de Vertex. D'abord, vous aurez besoin d'ouvrir le fichier "specific.xml" qui se trouve ici:

\templates\templatename\xml\specific.xml

2. Ensuite, vous devrez ajouter votre nouvelle définition de nom de champ, vous en verrez plusieurs existant déjà, alors vous pouvez juste ajouter un nouveau n'importe où entre ceux qui sont actuellement répertoriés. Vous pouvez simplement ajouter un nom comme ci-dessous, en changeant “votrenom”par le nom dont vous voulez appeler votre nouvelle option:

<field name="xml_votrenom" type="text" default="" label="entrez votre description ici" description="entrer votre description ici pour votre nouvelle option" />

3. Lors de l'ajout d'options dans le vertex votre variable php sera tout ce qui sera après "xml_", Ainsi, dans l'exemple qui précède, vous pouvez déterminer que votre variable php sera “votrenom” ainsi en produisant le code ci dessous dans votre fichier index.php va alors afficher votre nouvelle option admin. C'est aussi simple que ça!

<?php echo $votrenom; ?>

4. Donc maintenant que vous avez votre nouvelle sortie d'option admin dans votre fichier index.php, vous pouvez vouloir la cacher et les DIV l'entourant si rien n'y est publié dans l'admin, donc pour ce faire vous aplliquez simplement la chose suivante :


<?php if ($votrenom != "") { ?>

<div>
<?php echo $votrenom; ?>
</div>

Tout ce que vous mettrez ici sera caché si rien n'est publié dans l'option d'admin que vous avez créé.

<?php } ?>

5. Peut-être vous voulez créer une option qui donne un choix dans l'admin à la place d'une simple boîte de texte brut, pour ce faire vous devrez effectuer ce qui suit : Le texte “description option ici” peut être changé pour tout ce que vous désirez mais “option1”qui est référencé par la valeur est ce que vous allez utiliser dans votre php est énoncé pour déterminer quel sera l'option de sortie :

<field name="xml_votrenom" type="select:list" default="horizontal" label="label here" description="description here">

<option value="option1">description option ici</option>
<option value="option2">description2 option ici </option>

</field>

Veullez donc noter dans le php ci-dessous que la déclaration d'instruction est comme elle est référencée dans les options de l'admin:


<?php if ($votrenom == "option1") { ?>

Pour l'utiliser dans votre fichier index.php, procédez comme suit et cela sera produit uniquement si l'option « 1 » a été sélectionnée dans la zone d'administration Vertex. :


<?php if ($votrenom == "option1") { ?>

<div>
<?php echo $votrenom; ?>
</div>

Tout ce que vous mettez ici sera caché si autre chose que option1 est sélectionné

<?php } ?>

6. Voici une liste de tous les types pris en charge dans les champs de Vertex, aussi bien que les champs implicites, que vous pouvez utiliser en créant ou modifiant des options admin :

type="radio" vars="yes:no|Yes:No" default="yes"
type="text"
type="menu_list" default="mainmenu"
type="select:list" default="automatic"
type="textarea" filter=”raw”
type="spacer"
type="text:6:6" default="838383" size="6"
type="multselect" default=""

Où sont définies toutes les fonctions de Joomla ?

Le fichier suivant est l'endroit où toutes les fonctions de Joomla sont définies, modules, sortie composant, etc. :

\templates\templatename\vertex\cms_core_functions.php

Cela afin qu'aucun appel Joomla ne soit effectué dans le fichier index.php.

Q. Le fichier de langue ne se charge pas dans le backend de Vertex?

A. Si vous avez créé le site avec jUpgrade.  Allez dans votre compte utilisateur, selectionnez Front end et Back end language et puis sauvez. Aller au gestionnaire de Template et c'est bien. Tout ce que vous devriez avoir à faire est de re-enregistrer votre profil d'utilisateur ce qui devrait clarifier les choses.


Q. L'interface de mon site est tout foiré, il n'y a pas de largeur?

A. Si vous venez d'installer le template n'oubliez pas de le sauvegarder également, pour que les paramètres puissent survenir et soient sauvés comme cela le frontend pourra les utiliser.

Q. Je ne peux pas enregistrer dans l'admin Vertex?

A. Assurez-vous que votre fichier vertex.json est accessible en écriture, tester avec CHMOD 777 pour en être sûr. Le fichier se trouve ici “templates/templatename/vertex.json”

Q. Multibox ne se charge pas dans IE8?

A. Assurez-vous que IE8 a flash d'installé.