Multiflex 3 est un jeu de squelettes (XHTML Strict) hautement paramétrable (nécessite le plugin CFG) depuis l’interface privée de SPIP et facilement modulable grâce aux nombreuses noisettes utilisées possédant diverses options.
L’habillage graphique Multiflex 3 a été développé par G. Wolfgang. Les squelettes SPIP ont été réalisés avec la version 3.8 de Multiflex.
Attention : Ce squelette ne fonctionne actuellement qu’avec une version de SPIP >= 2
Paramétrages généraux
Les squelettes sont paramétrables de 2 façons :
- l’une par CFG, où l’on n’a aucunement besoin de toucher aux fichiers squelettes
- l’autre par surcharge des fichiers de ce jeu de squelettes (nous verrons plus loin).
Il faut donc aller dans « Configuration>CFG>Configuration du Squelette Multiflex » pour obtenir la page de paramétrage. On peut sur cette première page choisir des textes qui s’affichent dans l’en-tête. Il est possible d’utiliser la balise SPIP <multi>
pour un site multilingue.
Sur la gauche, une boite contenant des liens permet d’obtenir d’autres paramétrages. Commençons par « Multiflex Layout »
Choix du layout
Il est possible de sélectionner un en-tête différent, et un corps sur 1, 2 ou 3 colonnes. Ces modifications se passent sur la page de configuration CFG ’Multiflex Layout’ :
Ainsi, en sélectionnant un affichage sur « 2 colonnes inversées » et un en-tête avec simplement « bandeau + menu », on obtient ceci :
Sur cet exemple, il y a un trop grand nombre de rubriques donc le menu haut s’affiche sur 2 lignes ce qui est moins joli.
Tout en bas de la page, ce qui s’affiche lorsque l’on choisit 3 colonnes comme layout dans l’une des colonnes, s’affiche maintenant à la suite des liste d’articles (et à la suite de la première colonne - mais on peut choisir facilement entre l’un ou l’autre, cf. paramètres des noisettes plus bas) :
En sélectionnant un affichage « 1 colonne » avec « Titre + menu » pour l’en-tête, cela donne :
Choix de navigation
En allant sur le lien « Multiflex Navigation », il est possible de choisir quelques styles pour la navigation en colonne, ainsi que de définir 2 identifiants d’articles « Contact » et « A propos », liens qui se créeront alors dans l’en-tête du site.
Sur les captures précédentes, le style du menu était « Grille ». Voici « Puces », avec « Contact » non remplit (il n’apparait plus dans les liens à gauche de ’plan du site’) :
Choix de couleurs
Il est possible sur la page de configuration « Multiflex Couleurs » de proposer des couleurs pour les liens, les cadres de la troisième colonne ainsi qu’une teinte pour l’ensemble du site. Installer le plugin « Palette » vous permet de choisir des couleurs très facilement. Voici les valeurs par défaut :
Voici deux aperçus avec des valeurs différentes (il faut absolument vider le cache pour obtenir un recalcul des fichiers css compilés par SPIP) :
Surcharge et options des noisettes et squelettes
Ce squelette s’installant et s’activant comme un plugin (dans le dossier /plugins
) il est possible de surcharger ses fichiers dans son propre dossier squelettes.
Un fichier /plugins/squelette_multiflex/repertoire/fichier.ext
peut être copié et modifié dans /squelettes/repertoire/fichier.ext
, ce sera ce dernier qui sera lu par SPIP s’il existe.
Prenons l’exemple de l’affichage 2 colonnes qui place le contenu prévu normalement dans la 3è colonne à la suite des 2 premières. Ces informations sont donc affichées en double (page sommaire et rubriques) mais il est possible simplement de modifier cela.
Si vous copiez dans /squelettes
et éditez le fichier layouts/layout2.html
qui structure la page en 2 colonnes, vous verrez le code (s’il n’a pas changé depuis !) :
<!-- B. MAIN -->
<div class="main">
<!-- B.1 MAIN NAVIGATION -->
<div class="main-navigation">
<!-- Navigation Level 3 -->
<div class="round-border-topright"></div>
<INCLURE{fond=inc-colonne}{env}{mfx_supplements=oui}>
</div>
<!-- B.1 MAIN CONTENT -->
<div class="main-content">
<INCLURE{fond=inc-centre}{env}{mfx_supplements=oui}>
</div>
</div>
C’est la variable {mfx_supplements=oui}
qui indique que les supplements (ce qui devrait s’afficher dans la 3è colonne si l’on choisit cet affichage) doivent s’afficher... ou non. En mettant dans la partie navigation {mfx_supplements=non}
, les suppléments ne se mettront pas dans la colonne de navigation tout simplement.
Des noisettes en veux-tu en voilà !
Un certain nombre de noisettes (petits bouts de squelettes) sont présentes dans le répertoire /noisettes
de Multiflex. Elles recellent souvent des paramètres qu’il est possible d’utiliser lorsqu’on les appelle avec <INCLURE>
ou #INCLURE
Par exemple, voici un extrait de code présent (s’il n’a pas changé depuis) dans /noisettes/sommaire/centre.html
qui correspond à ce qui va s’afficher dans la colonne centrale de la page sommaire :
<!-- Pagetitle -->
<h1 class="pagetitle"><:multiflex:actualites:></h1>
[(#REM) Articles sur une colonne (div par article)]
[(#INCLURE{fond=noisettes/article/inc/intro_articles}{env}
{mfx_pagination_nombre=2}
{mfx_pagination_liens_pages=non}
{mfx_doublons=art_sommaire}
{mfx_unique=#HASH_DOUBLONS}
{mfx_afficher_lire_suite=oui}
{mfx_lien_sur_titre=oui}
{mfx_couper_texte=500}
)]
<div class="column2-unit-left">
[(#INCLURE{fond=noisettes/article/inc/intro_articles}{env}
{mfx_pagination_nombre=3}
{mfx_pagination_liens_pages=non}
{mfx_doublons=art_sommaire}
{mfx_unique=#HASH_DOUBLONS}
{mfx_afficher_lire_suite=oui}
{mfx_lien_sur_titre=oui}
{mfx_couper_texte=400}
)]
</div>
<div class="column2-unit-right">
[(#INCLURE{fond=noisettes/article/inc/intro_articles}{env}
{mfx_pagination_nombre=3}
{mfx_pagination_liens_pages=non}
{mfx_doublons=art_sommaire}
{mfx_unique=#HASH_DOUBLONS}
{mfx_afficher_lire_suite=oui}
{mfx_lien_sur_titre=oui}
{mfx_couper_texte=400}
)]
</div>
<!-- hr class="clear-contentunit" / -->
On peut observer que cette noisette appelle 3 fois la noisette noisettes/article/inc/intro_articles.html
avec des paramètres qui sont assez explicites.
Cela affiche 2 articles au centre, puis dessous, coupant la page en 2 colonnes, les 3 articles suivants sur une moitié gauche, puis les 3 articles suivants sur la moitié droite. Il est possible de créer 3 colonnes en utilisant les classes css "column3-unit-(left|middle|right)
Les paramètres disponibles sont généralement documentés dans la noisette qui les possède. Vous pouvez donc facilement créer de nouvelles noisettes ou modifier celles existantes pour agrémenter les squelettes.
Note sur les doublons
Les paramètres {mfx_doublons=art_sommaire}
et {mfx_unique=#HASH_DOUBLONS}
permettent de gérer des doublons entre squelettes appelés par une balise #INCLURE
, ce que ne permet pas SPIP actuellement (et pas <INCLURE>
non plus). Les balises permettant cela (#HASH_DOUBLONS
et ses compagnes non mentionnées ici) sont définies dans les fichier multiflex_fonctions.php
Exemple de surcharge : changer l’image du bandeau
Vous devez copier /plugins/multiflex3/img/bg_head_middle.jpg
dans votre dossier squelettes /squelettes/img/bg_head_middle.jpg
, puis modifiez cette image, qui doit être, par défaut de 900*150px.
Utiliser Multiflex 3 pour un site multilingue
Le squelette multiflex permet de gérer facilement un site multilingue. Il existe plusieurs méthodes pour activer le multilinguisme. J’en
présente une ici.
Evidemment avant tout le reste, le multilinguisme doit être activé dans Spip. L’approche utilisée ici repose sur des rubriques dont les titres sont traduits grâce aux balises - ces rubriques
contiennent les articles et leurs traductions.
Pour activer le multilinguisme dans le squelette,
- ajouter l’option $forcer_lang=true;
dans le fichier
/config/mes_options.php
Si vous n’avez pas de fichier mes_options.php
, vous pouvez le créer avec
le contenu suivant :
<?php
$forcer_lang=true;
?>
- créer un fichier entete_langues.html
dans le répertoire
/squelettes/noisettes/navigation
, ce fichier doit contenir :
<B_langues>
<!-- Navigation Level 0 -->
<div class="nav0">
<ul>
#MENU_LANG
</ul>
</div>
</B_langues>
Désormais, votre site basé sur Multiflex devrait fonctionner
correctement avec plusieurs langues.
Les mots-clés du squelette et leurs utilisations
Le comportement du squelette peut être adapté à l’aide de quelques mots-clés. Pour créer un mot-clé, entrer dans l’espace d’administration de votre site, onglet « Edition » puis « Mots-clés » et là choisir créer un nouveau mot-clé.
Il est ensuite possible d’affecter un mot-clé à un article (dans la fenêtre d’édition de l’article).
- Le mot-clé ’edito’ permet d’afficher un article « A la une » sur la page sommaire du site.
- Le mot-clé ’Pas_dans_le_menu’ permet de ne pas afficher dans le menu de navigation latéral les rubriques contenant ce mot-clé
Obtenir Multiflex 3 pour SPIP
Ce squelette est disponible en téléchargement sur la Zone :
- Zip : http://files.spip.org/spip-zone/squ...
- Svn : svn ://zone.spip.org/spip-zone/_squelettes_/oswd/3626_multiflex-3
- Sources : http://zone.spip.org/trac/spip-zone...
Dépendences :
Multiflex nécessite SPIP 2 ou SPIP 3, ainsi que 2 plugins :
Installation :
Multiflex s’installe comme un plugin dans le dossier /plugins
SPIP (>1.9.2) sait télécharger et installer automatiquement des plugins.
- créer un répertoire avec accès en écriture
/plugins/auto
- se rendre dans la partie privée dans « Configuration>Gestion des Plugins »
- en bas dans le cadre « Ajouter des plugins » se trouve le champ « Adresse du plugin ou de la liste » ; Y copier l’url d’exemple (http://files.spip.org/spip-zone/paquets.rss.xml.gz) puis valider
- une liste de plugins aparait dans le même cadre ; selectionner ’squelette_multiflex3’ et valider ;
- une procedure d’installation s’effectue.
- Refaire les points 4 et 5 avec les plugins nécessaires (CFG et Palette)
- Activer ensuite les plugins téléchargés, installés dans le répertoire ’auto’.
Pour modifier les configurations CFG de Multiflex, vous devez être déclaré ’webmaster’, ce qui se fait en ajoutant dans son fichier config/mes_options.php
le code php suivant :
// webmestres (auteurs 1 & 2 ici)
define('_ID_WEBMESTRES', '1:2');
Discussions par date d’activité
247 discussions
Bonjour,
Je voudrais savoir par quel moyen je peux avoir un agenda public sur mon site dans le style de ceci :
http://www.paroisse-benet.fr/spip.php?page=agenda
MAX
Répondre à ce message
J’ai juste ajouté le fichier de langue espagnol
Répondre à ce message
Bonjour,
j’ai un peu les boules. Je viens de faire mon site en interne avec wamp et maintenant que je le passe chez un hebergeur (o*h), il me raffraichi continuellement la page privé et public à chaque accès. Je suis obliger de virer le dossier du plugin en ftp pour récuperer l’accès :(
Ceci avec le squelette de base, même téléchargé en auto.
J’ai le message « site en cours » pdt.
Répondre à ce message
Bonjour et merci pour ce squelette.
Le site que je gère me pose des problèmes de stabilité. Je suis loin d’être un expert et je fais appel aux bonnes volontés pour me donner un coup de main.
Résumé des épisodes précédents :
1- J’ai installé un site sous spip 1.9 avec easysquelettes mais ce plugin posait des problèmes de compatibilité avec certaines fonctions dont j’avais besoin.
2- J’ai donc migré sous spip 2, enlevé easysquelettes et installé Multiflex3.
Aujourd’hui, le site est assez lent et instable. J’ai cru comprendre qu’il reste des éléments d’easysquellettes qui perturbent les choses. Exemple : « Site en travaux » quand on veut passer dans l’espace privé...
Exemple de message :
Comment m’y prendre pour nettoyer tout ça ?
D’avance merci !
Je poursuis : autres erreurs (un auteur passe de l’espace privé à l’espace public) :
Lire EasySqueletting bien sûr !
Répondre à ce message
Bonjour,
je recherche désormais comment avoir un fond de menu en image au lieu de couleur.
Je vois que c’est prévu par le squelette mais il ne prend en compte que la couleur :
.nav2 white-space:nowrap /*IE hack*/ ; float:left ; width:900px ; border:none ; background :[(#ENVmfx_cgbp)] [url((#GETurl_bg_head_bottom_nav))] no-repeat ; color :[(#ENVmfx_c75)] ; font-size:130% ; /*Color navigation bar normal mode*/
Comment faire svp ?
Répondre à ce message
allez voir les noisettes .... les réglages, ajustements et autres adaptations persos sont -presque- tous là.
les titres des chapitres sont très explicites. (article, rubrique, sommaire...)
Il y a juste une chose que je n’ai pas encore vue, c’est, si un article est une photo (pourquoi pas) comment faire pour l’afficher sans passer par la case « logo ».
M’est avis qu’il faut une nouvelle noisette... Y a un écureuil doué pour en écrire une ?
Bonjour, j’ai commencé a faire un site simple avec Multiflex, Mais là j’ai un problème : où sont les CSS ?
J’ai déjà modifié pas mal de noisettes, mais là je suis coincé pour l’aspect graphique.
Il y a bien un dossier css, mais dedans c’est des .css.html ! Comment dois-je faire alors pour modifier l’aspect graphique ?
c’est pareil. Pas d’inquiétude :)
ce sont bien ces fichiers qu’il te faut modifier.
agony
Répondre à ce message
Bonjour,
Je suis nouveau sur spip (je maîtrise en revanche les html/php/css) et j’aimerai pouvoir changer la couleur de fond de page (en #000000) mais je ne sais pas du tout comment m’y prendre. Si quelqu’un pouvait m’éclairer, ou me renvoyer vers un lien qui m’aurait échappé...
Merci. :)
Pour ceux qui cherchent à modifier la couleur de fond :
dans le fichier css/header.css.html
c’est dans Global, Non-Header puis dans body il y a :
background-color :[(#ENVmfx_c240)] ;
changer la valeur (240 correspond à du R240 V240 B240
++
Répondre à ce message
bonjour,
je me trouve confronté à un problème pour visualiser les images de mes articles en diaporama car je ne trouve pas où insérer la balise #insert_head.
en effet il n’y a pas de fichier inc-head dans ce squelette et malgré divers essais je ne trouve toujours pas.
merci d’avance de vos réponses.
Bonjour,
un rapide coup d’oeil a sommaire.html donne ligne 5 :
<INCLURE{fond=noisettes/_page/header}>
et le fichier noisettes/_page/header.html donne ligne 41
#INSERT_HEAD
merci beaucoup de ton aide achille, j’avais déjà trouvé ce fichier mais cela n’intègre pas pour autant le plugin voulu
J’ai trouvé une solution à l’utilisation de Thickbox. C’est un peu galère mais ça fonctionne : suffit de suivre les instructions à cette adresse : http://www.spip-zone.info/spip.php?article31 (notamment ce qui est inscrit dans la partie « mise en place dans les squelettes »). J’ai fait un essai, visible à l’adresse http://brunoarmand.free.fr/spip.php?article3
Faut entrer les adresses complètes, sinon, ça bugue... Si quelqu’un trouve mieux.
Répondre à ce message
Bonjour,
Merci tout d’abord pour ce template de site, complet, joli et propre (spipement parlant). C’est très plaisant de naviguer dans le code des noisettes, layouts et autres lang.
Malheureusement, j’ai un souci avec les feuilles de style. Je crois avoir pigé le mécanisme à base de theme.css.html + fichier X.css.html par lequel on construit une feuille de style X.css en interprétant les instructions/variables SPIP : astucieux !
#SET{css_perso, perso}
et collé l’appel[<link rel="stylesheet" type="text/css" media="screen,projection,print" href="(#URL_PAGE{theme.css, mfx_fichier=[(#GET{css_perso})]})" />]
dans noisettes/_page/header.htmlaprès tous les appels css et avant la balise
#INSERT_HEAD
.J’ai essayé préalablement d’écraser les fichiers css/filename.css.html et ça avait l’air d’être légèrement plus stable, au détriment de l’esthétique et de l’organisation du code.
Alors il est fort possible que mes connaissances rudimentaires en CSS soient en cause. Mais comme je travaille à partir du template Multiflex, un petit coup de main, un pointeur vers de la doc, une explication rationnelle seraient les bienvenus.
Merci et encore bravo pour ce template (je sais, ce n’est pas le vocable consacré :/ ).
gr.
P.S. : à quand l’adaptation de Multiflex 5.4 ! ;)
Répondre à ce message
Bonsoir,
je viens tout juste d’installer ce squelette pour un copain. Il adore, ouf ! Tant mieux.
J’ai néanmoins un petit problème pour afficher le petit logo dans le header dont la taille est de 60 x 40 px.
Je ne comprends pas pourquoi. Pour être sûr de ne pas me tromper, j’ai appelé mon fichier du même nom que celui par défaut, c’est à dire : « bg_head_top_logo.jpg » et je l’ai placé dans le dossier img du squelette.
Que faut-il faire pour qu’il apparaisse en ligne ? Je précise que j’ai vidé mes caches (navigateur et spip).
Merci de votre aide.
Philippe
Ce logo se définit si je ne me trompe dans Configuration > Contenu du site > Logo de ce site.
Personnellement, je rencontre le problème de la taille de ce logo. Il est tout petit. J’ai tenté de l’agrandir en modifiant le fichier header.css.html dans le dossier /squelette_multiflex3/css/ mais le site devient instable et je me retrouve généralement avec un « site en travaux ». Comment faire ?
Merci de votre aide,
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |