Créer son skin

De OviWiki
Aller à : navigation, rechercher

Les skins sont des thèmes graphiques pouvant être appliqués aux sites créés avec Ovidentia. Ils sont personnalisables afin de pouvoir correspondre au mieux à vos attentes pour l'apparence de vos pages et de leurs structures.

Un skin est principalement constitué de fichiers HTML, OvML, JavaScript et d'images.

Sommaire

Gestion

Il est possible pour un site de posséder plusieurs skins administrables via l'interface d'Ovidentia.

Administrateur

Installer un skin

Pour installer un skin, rendez-vous dans le menu Administration > Ajouter/Supprimer des programmes > Skins puis cliquez sur Charger un nouveau skin. Sélectionnez le fichier au format .zip contenant le skin puis cliquez sur Déposer.

Si l'opération s'est bien déroulée, le skin est désormais utilisable sur le site web.

Liste des skins installés

Pour accéder à la liste des skins installés, rendez-vous dans le menu Administration > Ajouter/Supprimer des programmes > Skins.

Skin appliqué au site

Skin non modularisé

Afin de modifier le skin appliqué au site web, rendez-vous dans le menu Administration > Sites, choisissez le site dont vous souhaitez modifier le skin dans la liste de vos sites puis cliquez sur Configuration du site. Vous pourrez alors, à la ligne Skin, sélectionner celui qui doit être appliqué au site pour les utilisateurs non connectés ou les utilisateurs connectés n'ayant pas modifié le style appliqué au site.

La première liste contient les noms des différents skins disponibles sur le site. La seconde permet de choisir quel fichier CSS doit être utilisé comme feuille de style principale.

Modification du skin appliqué au site

Skin modularisé

Si votre skin est un module, il est possible de le sélectionner depuis la liste des modules. Rendez-vous dans le menu Administration > Ajouter / Supprimer des programmes > Skins puis cliquez sur le lien Etoile Utiliser ce thème de la ligne correspondant au skin que vous souhaitez appliquer.

Skin modularisé

Attention, ce lien n'apparaît pas si l'utilisateur sur lequel vous êtes connecté utilise le skin de la ligne concernée. Il vous faut alors changer le skin de l'utilisateur, sachant qu'il est préférable de conserver le skin du site.

Droit de modification de skin aux utilisateurs

Afin d'autoriser ou d'interdire aux utilisateurs connectés de choisir le skin qu'ils souhaitent appliquer au site web, rendez-vous dans le menu Administration > Sites, choisissez le site dont vous souhaitez modifier le skin dans la liste de vos sites puis cliquez sur Options de l'utilisateur. Vous pourrez alors, à la ligne L'utilisateur peut choisir son skin, choisir d'autoriser ou non l'utilisateur à choisir le skin qu'il souhaite voir appliqué au site web lorsqu'il est connecté.

La modification du skin effectuée par un utilisateur n'est visible que par celui-ci quand il est connecté.

Droit de modification de skin aux utilisateurs.png

Utilisateur

La modification du style pour un utilisateur n'est possible que si l'administrateur l'a permis.

Afin de modifier le skin appliqué au site web lorsque vous êtes connecté, rendez-vous dans le menu Utilisateur > Options. Vous pourrez alors, à la section Mise à jour du skin, sélectionner celui qui doit être appliqué au site lorsque vous êtes connecté. Cliquez sur Mise à jour du skin afin de valider la modification.

La modification du skin effectuée n'est visible que par vous quand vous êtes connecté.

Modification du skin pour l'utilisateur connecté

Créer un skin

Structure

Les skins disponibles sur votre site internet sont stockés dans le dossier skins, enfant direct du dossier contenant votre site créé avec Ovidentia.

Attention à ne pas confondre le dossier skins à la racine de votre site avec le dossier ovidentia > skins. Ce dernier contient le skin de base d'Ovidentia. Vos skins personnalisés sont placés à la racine du site pour ne pas être supprimés à chaque mise à jour du noyau.

Les skins sont composés de trois sous-dossiers obligatoires :

  • ovml : ce dossier contient les fichiers OvML (Ovidentia Markup Language) permettant la génération dynamique de contenu. Il contient également parfois les styles spécifiques des "modules" OvML afin de pouvoir être exportés plus facilement. Ces styles peuvent également être indiqués directement dans le fichier OvML.
  • styles : ce dossier contient les feuilles de style de votre site web.
  • templates : ce dossier contient les templates personnalisés.

D'autres sous-dossiers facultatifs peuvent également apparaître dans le skin comme les dossiers :

  • images : ce dossier contient les images nécessaires à la personnalisation du skin (et non pas les images de contenu).
  • scripts : ce dossier contient les fichiers JavaScript.

L'arborescence de votre skin ressemblera donc généralement à la suivante :

Arborescence d'un skin

Personnalisation

Partir d'un thème existant semble être un bon moyen de débuter la création d'un nouveau skin. Cela permet de poser une structure proche de celle que l'on souhaite en minimisant le nombre de modifications à effectuer.

Templates

Les fichiers contenus dans le dossier template sont des gabarits pour les différentes pages du site. Ils permettent de créer la structure des pages de votre site internet.

Leur intérêt réside dans la séparation qu'ils permettent entre le traitement des données effectué par PHP et leur affichage.

Un mini-langage de programmation a été créé pour ces templates permettant de dynamiser votre site.

Patrons d'affichage

Les patrons d'affichage permettent de créer plusieurs apparences pour une même page.

Les patrons d'affichage se font sous forme de commentaires HTML.

La création d'un patron d'affichage se fait de la manière suivante :

<source lang="html4strict">

   Votre code

</source>

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la variable.

Certains templates nécessitent deux patrons d'affichage car ils gèrent deux écrans différents. Par exemple, le template topicsdisplay.html contient deux patrons par défaut : un pour lister les différents articles du thème et un pour afficher un article en particulier.

<source lang="html4strict">

   Votre code
   Votre code

</source>

Liste des templates possédant des patrons d'affichage

Mini-langage de templates

Le mini-langage de templates permet de dynamiser le contenu de la page grâce à l'utilisation de variables.

Affichage d'une variable

Les variables qu'il est possible d'afficher dépendent de la classe qui appelle le template.

Néanmoins, il existe des variables accessibles depuis tous les templates :

L'affichage d'une variable dans un template se fait de la manière suivante :

{ variable }

Exemple :

{ babSlogan }
Condition

Les conditions se font sous forme de commentaires HTML.

La vérification de l'existence d'une variable ou du fait qu'elle soit vide se fait de la manière suivante :

<source lang="ovml">

   Votre code

</source>

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la variable.

Il est également possible de comparer la valeur d'une variable avec une autre variable :

<source lang="ovml">

   Votre code

</source>

Les différents opérateurs de comparaison existant sont les suivants :

Liste des opérateurs utilisables dans le mini-langage de templates
Symbole Signification
== Egal à
!= Différent de
> Supérieur à
< Inférieur à
>= Supérieur ou égal à
<= Inférieur ou égal à

De la même manière, il est possible de comparer la valeur d'une variable avec une chaîne de caractères ou un nombre :

<source lang="ovml">

   Votre code

</source>

Vous pouvez également tester si une variable est vide :

<source lang="ovml">

   Votre code

</source>

Enfin, il est possible de gérer l'inverse d'une condition grâce au mot-clé else : <source lang="ovml">

   Votre code si la condition est validée
   Votre code si la condition n'est pas validée

</source>

Exemples :

<source lang="ovml">

   Bienvenue { BAB_SESS_USER }.
   Bienvenue Invité.

</source>

<source lang="ovml">

   Vous êtes sur la page d'accueil.

</source>

<source lang="ovml">

   Menu :

</source>

Boucle

Les boucles se font sous forme de commentaires HTML.

Dans certains templates, il est possible d'utiliser des boucles, mais pas dans tous.

Les boucles correspondent à des fonctions appelées jusqu'à ce que celles-ci ne renvoient plus rien. Il n'est actuellement pas possible de connaître la liste des fonctions utilisables dans chaque template via une documentation, mais il est possible de voir les fonctions utilisées dans les templates déjà existants.

Utilisation

L'utilisation d'une boucle se fait de la manière suivante :

<source lang="html4strict">

   Votre code

</source>

Attention, il ne faut pas oublier de ne pas mettre d'espace avant le dièse (#) et d'en mettre un après le nom de la fonction.

Chaque boucle permet l'utilisation de variables particulières.

Exemple :

Dans le template adminsection.html :

<source lang="html4strict">

  • <a href="{ val }">{ key }</a>

</source>

Dépendance

Certaines boucles sont dépendantes d'une autre boucle et ne peuvent être appelées qu'à l'intérieur de ces boucles dont elles dépendent.

Il suffit pour cela d'imbriquer les deux boucles concernées.

Exemple :

Dans le template topicsdisplay.html :

<source lang="html4strict">

   Tags :
  • <a href="{ searchurl }">{ tagname }</a>

</source>

Une liste des boucles et de leurs variables utilisables dans les templates est disponible afin de vous renseigner sur les boucles existantes selon le template.

Templates modifiables

La liste des templates modifiables ainsi que leurs fonctions respectives est disponible dans la liste des fichiers templates modifiables dans les skins.

Pour récupérer les templates originaux, rendez-vous à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans skins / ovidentia / templates. De là, vous pourrez récupérer les templates que vous souhaitez modifier.

Les variables utilisables sont généralement indiquées dans des commentaires HTML situés en haut de ces fichiers de template modifiables.

Attention, en réalité, tous les templates sont modifiables, mais il est conseillé de ne modifier que les templates de la liste donnée ci-dessus afin de permettre les améliorations des templates lors des mises à jour d'Ovidentia. Les templates de la liste ci-dessus peuvent en revanche être modifiés sans crainte.

page.html

Rendre son skin compatible avec la réécriture d'URL

Afin de rendre son skin compatible avec la réécriture d'URL, il est nécessaire de modifier la balise head de votre fichier page.html en ajoutant un élément de type base.

<source lang="html4strict"> <head>

   <base href="{ babUrlScript }" />

</head> </source>

Cela permet de convertir toutes les chemins relatifs en chemins absolus afin d'éviter les requêtes vers des fichiers inexistants.


Un exemple de <head> complet :

<source lang="html4strict"> <head>

   <meta http-equiv="Content-type" content="{ sContent }"/>
   <base href="{ babUrlScript }" />
   <title>{ babSiteName } - { pageTitle }</title>
   <meta name="keywords" content="{ pageKeywords }" />
   <meta name="description" content="{ pageDescription }" />
   <meta name="generator" content="Ovidentia" />
   
   <link rel="canonical" href="{ canonicalUrl }" />
   <link rel="image_src" href="{ imageUrl }" />
   <script type="text/javascript" src="{ babOvidentiaJs }"></script>
   <script type="text/javascript"></script>
   <link rel="stylesheet" type="text/css" href="{ babCssPath }" media="screen" title="Default" />
   { babHeadStyleSheets }

</head> </source>

OvML

Les fichiers contenus dans le dossier OvML sont des morceaux de pages plus ou moins conséquents qui pourront être intégrés sur différentes pages de votre site. Il permet également de générer du contenu de manière dynamique.

Le langage OvML

L'OvML est, à l'instar du (x)HTML et du XML, un langage à balises. La différence réside dans le fait que c'est un langage compilé par PHP qui permettra par la suite de générer du contenu.

Conventions de nommage

Il existe trois types de composants en OvML : les variables, les fonctions et les containers. Par convention, les composants d'un même type commenceront tous par les même lettres :

  • les variables : OV
  • les fonctions : OF
  • les containers : OC
Variables
Déclaration

Pour déclarer une variable ou pour affecter une nouvelle valeur à une variable existante, on utilise la fonction PutVar.

<source lang="ovml"> <OFPutVar name="nom_de_la_variable" value="valeur"> </source>

Vous remarquerez que bien qu'il s'agit d'un élément auto-fermant (il n'a pas besoin de balise de fermeture comme pour <br />, <img src="" alt="" />, etc.), on ne met pas le slash (/) de fermeture.

Les variables peuvent contenir des nombres ou bien des chaînes de caractères.

Exemple :

<source lang="ovml"> <OFPutVar name="Compteur" value="0"> </source>

Affichage

Pour afficher une variable, il suffit de l'appeler dans une balise avec le préfixe des variables OV.

<source lang="ovml"> <OVnom_de_la_variable> </source>

Comme pour la fonction de déclaration, l'affichage d'une variable est un élément auto-fermant ne nécessitant pas de slash (/) de fermeture.

Exemple :

<source lang="ovml"> <OVCompteur> </source>

Quelques opérations de traitement peuvent être utilisées sur les variables, par exemple l'attribut strcase permet de modifier la casse d'une variable.

<source lang="ovml"> <OFPutVar name="Nom" value="Dupont"> <OVNom strcase="upper"> </source>

Ce code affichera la chaîne de caractère suivante :

DUPONT

Pour une liste complète des attributs utilisables sur les variables, consultez la documentation OvML.

Fonctions

Les fonctions permettent de réaliser diverses opérations autonomes ou liées aux variables. Bien qu'étant auto-fermantes, elles ne nécessitent pas de slash (/) lors de leur utilisation.

Elles peuvent prendre divers attributs obligatoires ou optionnels selon la fonction appelée.

Par exemple, la fonction IfNotIsSet permet d'affecter une valeur à une variable si celle-ci n'est pas déclarée. Toutes les fonctions sont précédées du préfixe OF et contenues dans une balise lors de leur appel.

<source lang="ovml"> <OFIfNotIsSet name="nom_de_la_variable" value="valeur"> </source>

Pour une liste complète des fonctions, consultez la documentation OvML.

Opérations arithmétiques

Un type de fonctions couramment utilisé concerne les opérations arithmétiques sur les variables. Ces fonctions possèdent toutes le préfixe AO (pour Arithmetic Operator).

Exemple :

<source lang="ovml"> <OFAOAddition expr1="valeur" expr2="valeur" saveas="nom_de_la_variable"> </source>

Pour effectuer des opérations sur des nombres décimaux, la virgule doit être remplacée par un point.

<source lang="ovml"> <OFAOAddition expr1="1" expr2="1.5" saveas="Variable"> <OVVariable> </source>

2.5

Si l'une des valeurs envoyée au paramètre expr1 ou expr2 est une chaîne de caractères ne démarrant pas par un nombre, alors sa valeur sera substituée par 0.

Exemple :

<source lang="ovml"> <OFAOAddition expr1="Dupont" expr2="1" saveas="Variable"> <OVVariable> </source>

1

"Dupont" n'étant pas une chaîne de caractères débutant par un nombre, il a été remplacé par la valeur 0, Variable valait donc 0 + 1 = 1.

Si la chaîne de caractères envoyée débute par un nombre, alors ce nombre substituera la chaîne de caractères.

Exemple :

<source lang="ovml"> <OFAOAddition expr1="5Dupont" expr2="1" saveas="Variable"> <OVVariable> </source>

6

"5Dupont" débutant étant une chaîne de caractères débutant par un nombre, elle a été remplacée par la valeur 0, Variable valait donc 5 + 1 = 6.

Une opération impossible renverra un résultat vide. Cela peut arriver lors d'une division par 0 ou lors du calcul d'un nombre modulo un nombre décimal.

Exemple :

<source lang="ovml"> <OFAOAddition expr1="10" expr2="0" saveas="Variable"> <OVVariable> </source>

Ce code n'affichera rien car l'opération n'est pas valide.

Containers

Les containers sont des éléments à balises ouvrantes et fermantes. Ils sont précédés par le préfixe OC lors de leur appel.

Les containers possèdent deux fonctions principales : ils permettent de gérer les conditions dans un code et de lister des éléments issus de la base de données.

Pour une liste complète des containers, consultez la documentation OvML.

Condition

Les conditions permettent de générer du code si une condition est réalisée. Ils sont tous précédés du préfixe If. Par exemple, le container IfEqual permet de vérifier l'égalité entre deux valeurs.

Exemple :

<source lang="ovml"> <OCIfEqual expr1="0" expr2="1">

   Ce code sera affiché si 0 et 1 sont égaux, c'est à dire jamais.

</OCIfEqual> </source>

Il existe ainsi neuf containers permettant d'effectuer des tests. Voici la liste de ceux-ci.

Liste des containers de test
Tests de comparaison
Container Condition Utilisation
OCIfEqual Vrai si expr1 est égal à expr2 <source lang="ovml">

<OCIfEqual expr1="1" expr2="1">Vrai</OCIfEqual> <OCIfEqual expr1="0" expr2="1">Faux</OCIfEqual> </source>

OCIfNotEqual Vrai si expr1 est différent expr2 <source lang="ovml">

<OCIfNotEqual expr1="0" expr2="1">Vrai</OCIfNotEqual> <OCIfNotEqual expr1="1" expr2="1">Faux</OCIfNotEqual> </source>

OCIfLessThan Vrai si expr1 plus petit strictement que expr2 <source lang="ovml">

<OCIfLessThan expr1="0" expr2="1">Vrai</OCIfLessThan> <OCIfLessThan expr1="1" expr2="1">Faux</OCIfLessThan> <OCIfLessThan expr1="2" expr2="1">Faux</OCIfLessThan> </source>

OCIfLessThanOrEqual Vrai si expr1 plus petit ou égal que expr2 <source lang="ovml">

<OCIfLessThanOrEqual expr1="0" expr2="1">Vrai</OCIfLessThanOrEqual> <OCIfLessThanOrEqual expr1="1" expr2="1">Vrai</OCIfLessThanOrEqual> <OCIfLessThanOrEqual expr1="2" expr2="1">Faux</OCIfLessThanOrEqual> </source>

OCIfGreaterThan Vrai si expr1 plus grande strictement que expr2 <source lang="ovml">

<OCIfGreaterThan expr1="2" expr2="1">Vrai</OCIfGreaterThan> <OCIfGreaterThan expr1="1" expr2="1">Faux</OCIfGreaterThan> <OCIfGreaterThan expr1="0" expr2="1">Faux</OCIfGreaterThan> </source>

OCIfGreaterThanOrEqual Vrai si expr1 plus grande ou égal que expr2 <source lang="ovml">

<OCIfGreaterThanOrEqual expr1="2" expr2="1">Vrai</OCIfGreaterThanOrEqual> <OCIfGreaterThanOrEqual expr1="1" expr2="1">Vrai</OCIfGreaterThanOrEqual> <OCIfGreaterThanOrEqual expr1="0" expr2="1">Faux</OCIfGreaterThanOrEqual> </source>

Tests d'existence
Container Condition Utilisation
OCIfIsSet Vrai si la variable est déclarée <source lang="ovml">

<OFPutVar name="Nom" value="Dupont">

<OCIfIsSet name="Nom">Vrai</OCIfIsSet> <OCIfIsSet name="Prénom">Faux</OCIfIsSet> </source>

OCIfNotIsSet Vrai si la variable n'est pas déclarée <source lang="ovml">

<OFPutVar name="Nom" value="Dupont">

<OCIfNotIsSet name="Prénom">Vrai</OCIfNotIsSet> <OCIfNotIsSet name="Nom">Faux</OCIfNotIsSet> </source>

Test d'appartenance à un groupe
Container Condition Utilisation
OCIfUserMemberOfGroups Vrai si la personne fait parti du groupe indiqué <source lang="ovml">

<OCIfLessThan groupid="1">Vrai</OCIfLessThan> </source>

Listage d'éléments

Les containers permettant de lister des éléments sont beaucoup plus nombreux. Ce sont eux qui vont permettre de récupérer du contenu dans la base de données.

Généralement, on distingue ceux qui récupèrent plusieurs éléments de ceux qui n'en récupèrent qu'un seul grâce à leur nom. Les containers récupérant plusieurs éléments sont souvent au pluriel et ceux ne récupérant qu'un seul élément sont souvent au singulier.

Comme pour les fonctions, des paramètres peuvent être nécessaires aux containers pour pouvoir fonctionner comme vous le souhaiter. Ces paramètres sont indiqués dans la documentation OvML.

Chaque container permet d'accéder à des variables selon l'élément courant. Ces variables sont définies dans la documentation OvML et dépendent du container utilisé.

Exemple :

<source lang="ovml">

    <OCArticles topicid="1" rows="5">
  • <OVArticleTitle>
  •    </OCArticles>
    

</source>

<source lang="ovml">

    <OCArticle articleid="1">
  • <OVArticleTitle>
  •    </OCArticle>
    

</source>

Voici une liste des "familles" de containers ainsi que de courtes descriptions sur leurs fonctions.

Liste des familles de containers
Famille Sujet
OCArticle* Articles, les thèmes d'articles et les catégories
OCDbDirectory* Annuaires stockés en base de données
OCDelegation* Délégations des utilisateurs
OCCalendar* Agendas
OCFaq* Faqs
OCFolder*, OCFile* Fichiers uploadés
OCForum*, OCThread, OCPost* Posts, sujets et forums
OCRecent* Dernières modifications sur le site internet
OCSitemap* Arborescence du site
OCWaiting* Éléments en attendant d'approbation
Emboîtement de containers

Il peut arriver d'avoir besoin d'emboîter deux containers du même type. Dans ce cas, il est nécessaire de bien identifier chaque container à l'aide d'un paramètre qui servira d'identifiant, sans quoi, des problèmes peuvent survenir.

Le problème apparu va être montré à l'aide d'un exemple. Je souhaite afficher un message en fonction du nom et du prénom de quelqu'un. Je fais un test pour comparer son nom puis un autre dedans pour comparer son prénom (dans la pratique, ce cas de figure n'apparaîtra sûrement jamais, mais c'est à vous de voir ce que vous souhaitez faire !).

Avec le code ci-dessous, je m'attends à voir s'afficher Ah ! Vous êtes de la famille ! étant donné que le nom est bien Dupont mais que le prénom n'est pas Michel.

<source lang="ovml"> <OCIfEqual expr1="Dupont" expr2="Dupont">

   <OCIfEqual expr1="Jean" expr2="Michel">
       Bonjour Michel ! Comment vas-tu ?
</OCIfEqual> <OCIfNotEqual expr1="Jean" expr2="Michel"> Ah ! Vous êtes de la famille !
</OCIfNotEqual>

</OCIfEqual> <OCIfNotEqual expr1="Dupont" expr2="Dupont">

   Mais qui êtes-vous ?

</OCIfNotEqual> </source>

Bonjour Michel ! Comment vas-tu ?
Ah ! Vous êtes de la famille !

Comme vous le voyez, le premier message s'est affiché, malgré le fait que le prénom ne soit pas Michel. Pour résoudre ce problème, il suffit, comme dit précédemment, d'ajouter un attribut aux containers emboîtés pour permettre de les distinguer.

<source lang="ovml"> <OCIfEqual expr1="Dupont" expr2="Dupont" i10>

   <OCIfEqual expr1="Jean" expr2="Michel" i20>
       Bonjour Michel ! Comment vas-tu ?
</OCIfEqual i20> <OCIfNotEqual expr1="Jean" expr2="Michel" i20> Ah ! Vous êtes de la famille !
</OCIfNotEqual i20>

</OCIfEqual i10> <OCIfNotEqual expr1="Dupont" expr2="Dupont" i10>

   Mais qui êtes-vous ?

</OCIfNotEqual i10> </source>

Ah ! Vous êtes de la famille !

Grâce à l'ajout de ces attributs, seul le message attendu apparaît. Par sécurité, il est conseillé de toujours rajouter un attribut d'identification à un container.

Note de l'auteur : Pour ma part, les containers de tests (OCIf*) ont un identifiant commençant par i et les autres commencent par c. Ensuite, j'incrémente de 10 unités à chaque nouveau sous-container. Cela me permet de différencier rapidement les tests des données et d'introduire facilement un nouveau container entre deux si besoin.

Utilisation des variables dans les fonctions et containers

Il est possible d'utiliser la valeur d'une variable comme paramètre pour une fonction ou un container. Il suffit pour cela de mettre le code permettant d'afficher la variable à la place de la valeur du paramètre.

Exemple :

<source lang="ovml"> <OFPutVar name="Age" value="20">

<OCIfLessThan expr1="<OVAge>" expr2="18" i10>

   Vous êtes mineur.

</OCIfLessThan i10> <OCIfGreaterThanOrEqual expr1="<OVAge>" expr2="18" i10>

   Vous êtes majeur.

</OCIfGreaterThanOrEqual i10> </source>

Vous êtes majeur.

Vous pouvez également utiliser des attributs sur ces variables.

Exemple :

<source lang="ovml"> <OFPutVar name="Nom" value="Dupont">

<OCIfEqual expr1="<OVNom strcase="upper">" expr2="DUPONT" i10>

   Bienvenue cher ami !

</OCIfEqual i10> <OCIfNotEqual expr1="<OVNom strcase="upper">" expr2="DUPONT" i10>

   Imposteur !

</OCIfNotEqual i10> </source>

Bienvenue cher ami !
Documentation

Une documentation sur les variables, fonctions et containers est disponible sur la page de documentation sur l'OvML.

Fichiers OvML

Pages d'accueil

Il existe deux fichiers OvML importants. Il s'agit des pages d'accueil. Ovidentia possède deux pages d'accueil, une publique accessible aux utilisateurs non connectés et une privée accessible aux utilisateurs connectés.

Ces deux pages sont personnalisables et sont générées grâce à l'OvML, elles sont donc logiquement situées dans le dossier ovml du skin, il s'agit des fichiers private.html et public.html, respectivement associées à la page d'accueil privée et à la page d'accueil publique.

Si vous supprimez ces deux fichiers, alors ce sera le template entry.html qui sera utilisé.

Insertion dans une page

Pour pouvoir être utilisé, un fichier OvML doit être situé dans le dossier ovml de votre skin, sans quoi il ne sera pas possible de l'utiliser.

Bien que l'insertion d'un fichier OvML depuis un article à l'aide de l'interface graphique filtre les fichiers selon leur extension, un fichier OvML peut toutefois posséder n'importe quelle extension (ou aucune) sans altérer son interprétation.

Mini langage de templates

L'insertion d'un fichier OvML dans un template se fait de la manière suivante :

{ $OVML(chemin/vers/mon/fichier.ovml) }

Le chemin est relatif au dossier ovml de votre skin (et non pas au template qui l'appelle). Le fichier appelé ci-dessus sera donc situé dans le dossier ovml/chemin/vers/mon/fichier.ovml de votre skin.

Exemple :

{ $OVML(carrousel.ovml) }
Article

L'insertion d'un fichier OvML dans un article peut se faire de deux façons différentes.

Soit en insérant le code suivant dans l'article :

$OVML(chemin/vers/mon/fichier.ovml)

Le chemin est relatif au dossier ovml de votre skin.

Soit en cliquant sur le bouton Bouton "Ovidentia" de l'éditeur de texte WYSIWYG sur l'éditeur WYSIWIG. Une pop-up s'ouvre permettant d'effectuer plusieurs actions, cliquez sur Bouton d'insertion d'un fichier OvML dans un article Insérer un fichier OvML. L'arborescence du dossier ovml de votre skin apparait alors listant ses dossiers et la liste des fichiers .ovml, .oml, .html et .htm. Il suffit alors de cliquer sur le fichier souhaité.

Fichier OvML

L'insertion d'un fichier OvML dans un second fichier OvML se fait à l'aide de la fonction Include du langage OvML.

<source lang="ovml"> <OFInclude file="chemin/vers/mon/fichier.ovml"> </source>

Le chemin est relatif au dossier ovml de votre skin (et non pas au fichier OvML qui l'appelle).

Appel direct

Il est également possible d'appeler un fichier OvML directement grâce à une URL particulière.

L'URL suivante permet d'afficher un fichier OvML inclu dans le template page.html.

http://votre-nom-de-domaine.com/index.php?tg=oml&file=chemin/vers/mon/fichier.ovml

Pour n'afficher que le contenu du fichier OvML sans template, il faut rajouter un paramètre à l'URL.

http://votre-nom-de-domaine.com/index.php?tg=oml&file=chemin/vers/mon/fichier.ovml&echo=1

Feuilles de style

Les feuilles de style doivent être situées dans le dossier styles de votre skin. Pour des raisons de performance, il est préférable de regrouper toutes les règles dans une seule feuille de style.

Attention, toutes les feuilles de style situées dans à la racine du sous-dossier style de votre skin seront listées lors de la modification du skin par l'administrateur ou un utilisateur. Il est donc préférable de créer une seule feuille de style à la racine puis de les mettre dans un sous-dossier du dossier style (à moins que vous ne souhaitiez proposer plusieurs variantes de votre skin, comme plusieurs largeurs différentes).

Différents médias

Il est important pour certains sites de gérer plusieurs types de médias. Pour ce faire, l'utilisation de media queries devient indispensable.

Certains sites auront besoin d'être responsive et d'autres devront pouvoir être imprimés correctement. Il vous revient donc le choix de regrouper toutes les feuilles de style en une seule prenant en compte tous les médias ou de les diviser en plusieurs feuilles de style. Dans le second cas, il est conseillé de créer un sous-répertoire medias dans le dossier styles de votre skin afin de ne pas proposer aux utilisateurs du site internet dans les options les feuilles de styles liées à d'autre médias.

Encodage du skin

Cette fonctionnalité est disponible à partir de la version 7 d'Ovidentia.

Dans le fichier templates / page.html de votre skin, situez la balise meta définissant le type de contenu.

<source lang="html4strict"> <meta http-equiv="Content-type" content="{ sContent }" /> </source>

Modifiez sa valeur pour qu'elle corresponde à l'encodage utilisé.

<source lang="html4strict"> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-15" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </source>

Si vous utilisez HTML5, la définition de la balise meta pour préciser l'encodage est désormais raccourcie.

<source lang="html4strict"> <meta charset="iso-8859-15"> <meta charset="utf-8"> </source>

Pour qu'un skin soit compatible avec plusieurs encodages, il est nécessaire que celui-ci ne contienne que des caractères ASCII.

Exemple :

Déposé par Cantico

doit être remplacé par

D&eacute;pos&eacute; par Cantico

Créer un module depuis son skin

Depuis la version 6.7.92 d'Ovidentia, un skin doit être converti en module afin d'être compatible avec les futures versions.

Terminologie

Dans Ovidentia, les modules sont constitués de plusieurs répertoires situés à divers endroits de l'arborescence. Le répertoire du skin est l'un d'entre eux.

Les différents répertoires composant un module sont listés dans l'article sur la structure des répertoires d'un module.

Le nom du skin devient le nom du module. Par convention, les modules contenant un skin ont un nom préfixé par theme_. Le noyau est maintenant distribué avec le module theme_default en cas de nouvelle installation.

Le nom donné au répertoire du skin sera le nom du module.

Créer le module

Pour créer le module, rendez-vous à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans addons et créez un dossier ayant le même nom que votre skin.

Arborescence d'un skin/module

Dans ce répertoire, deux fichiers sont obligatoires, il s'agit de addonini.php et init.php.

addonini.php

Le fichier addonini.php permet de donner des informations sur votre skin qui pourront être exploitées par Ovidentia, telles que son nom, sa version, son auteur, ses dépendances, etc.

N'hésitez pas à aller voir la liste des variables du fichier addonini.php ainsi que ses différentes parties.

Exemple :

<source lang="ini"> [general] name = "ovidentia_sw" version = "1.0" description = "Ovidentia skin base" description.fr = "Base de skin Ovidentia" icon = "icon.png" image = "thumbnail.png" delete = "1" addon_access_control = "0" ov_version = "7.0" author = "Cantico" encoding = "UTF-8" mysql_character_set_database = "latin1,utf8" php_version = "5.1.0" </source>

ini.php

Si aucun traitement PHP ne doit être effectué par le module, alors le fichier init.php peut rester vide.

Aperçu du skin

Il est possible de créer un aperçu de votre skin dans la liste des modules en l'illustrant par une icône ainsi qu'un aperçu miniature.

Icône

L'icône ajoutée à votre skin sera affichée dans la liste des skins accessibles depuis Administration > Ajouter / Supprimer des programmes > Skins.

Cela permet notamment de retrouver votre skin plus rapidement parmi une longue liste de skins.

Skin icône

Pour ce faire, modifiez le fichier addonini.php de votre skin en déclarant la variable icon dans la section general, la valeur de cette variable devra correspondre au nom de l'image représentant votre skin :

<source lang="ini"> [general] ... icon = "icon.png" </source>

Rendez-vous ensuite à la racine de votre site. Vous avez normalement un ou plusieurs dossiers nommés ovidentia-numero-de-version, ouvrez celui avec le dernier numéro de version. Rendez-vous ensuite dans skins / ovidentia / images / addons et créez un dossier ayant le même nom que votre skin.

Arborescence des images représentant un skin

Il vous suffit ensuite d'enregistrer votre image dans le dossier que vous venez de créer en la nommant avec la valeur affectée à la variable icon dans le fichier addonini.php.

Dans un souci d'ergonomie, nous vous conseillons de ne pas dépasser une taille de 50*50 pixels pour votre icône.

Aperçu miniature

L'aperçu miniature ajouté à votre skin sera affiché dans les détails de votre skin accessibles depuis Administration > Ajouter / Supprimer des programmes > Skins puis en cliquant sur le nom de votre skin.

Cela permet à l'utilisateur d'avoir un aperçu du skin.

Miniature d'un skin

La procédure à suivre est la même que pour l'ajout d'une icône à votre skin, mais le nom de la variable à déclarer dans le fichier addonini.php sera image à la place de icon.

Dans un souci d'ergonomie, nous vous conseillons de ne pas dépasser une taille de 200*150 pixels pour votre miniature.

Configuration du skin

Il est possible lorsque votre skin est un module d'ajouter une page de configuration pour celui-ci qui sera accessible depuis Administration > Ajouter / Supprimer des programmes > Skins sur la ligne de votre skin.

Skin configurable

Pour ce faire, modifiez le fichier addonini.php de votre skin en déclarant la variable configuration_page dans la section general, la valeur de cette variable devra correspondre au nom de la page :

<source lang="ini"> [general] ... configuration_page = "configuration" </source>

Ici, configuration_page valant "configuration", la page appelée sera configuration.php. Vous pouvez y mettre le code PHP que vous souhaitez.

Consultez la page d'accueil du wiki d'Ovidentia pour accéder aux documentations des différentes API disponibles.

Arborescence complète

Voici un aperçu récapitulant l'arborescence complète d'un skin modularisé.

Arborescence complète d'un skin modularisé