Nom du Squelette : sq-wellor
Version du squelette : 1.0
Auteur : Jead Wellor
Licence : Art Libre
Compatibilité SPIP : 1.9 / 1.9.1 / 1.9.2
Site exemple : Vision Humaine
Après de longues semaines de travail et d’expérimentation, le squelette « Wellor » est disponible en version 1.0, il s’inspire du squelette drop-zone-city (pour spip 1.4) dans le design néanmoins j’y ai rajouté de nombreuses fonction et j’ai revu le code de A à Z, pour se faire, je me suis notamment aidé de la version proposée sur le site du réseau Erasme pour leur version 1.8 modifiée. L’installation, très simple, ne diffère pas des autres squelettes, il suffit d’uploader les fichiers dans un dossier squelettes à la racine de votre spip ou dans squelette-test/sq-wellor si vous utilisez le switcher de squelettes. Je vais essayer de présenter les points importants pour son utilisation :
Compatibilité
Le squelette Wellor est compatible avec Firefox (navigateur utilisé lors de sa création), Opéra, et même Internet Explorer pour lequel un fichier css spécifique à été dédié afin de palier à ses bizarreries d’interprétation ;). D’après les tests que j’ai effectués, il tourne aussi bien sous Mac Os (j’ai testé sous un iMac 10.3.9) que sous Linux (testé sous Fedora Core 6) et Windows (testé avec un Windows media center). Bien que dans l’ensemble tout fonctionne et que tout soit parfaitement, il reste quelques petites différences, nottament sous IE Mac : le formulaire de recherche de la barre de menu qui se décale un peu vers le bas, sous Safari, le cadre autour des éléments du menu qui est plus « serré » que sous les autres navigateurs, etc...
Navigateur\Système | Linux | MacOs | Windows |
---|---|---|---|
Firefox 2.0 | oui | oui | oui |
Opéra 9 | oui | oui | oui |
Internet Explorer | - | V 5.2 | V 6/7 |
Netscape 7 | - | oui | oui |
Safari | - | oui | - |
D’autre part signalons que ce squelette est compatible avec les normes XHTML 1.0 transitional.
Les principales fonctionnalités
Entête
L’entête du squelette (fichier inc_entete) contient tout d’abord le nom de votre site ou son logo placé au dessus d’un fond gris argenté. Sur mon site, j’ai utilisé la police smudger taille 80, néanmoins, cette police n’étant pas un police normale du web, je ne peux la définir comme telle dans mon squelette, je vous conseille pour un plus beau design de créer un image avec le nom de votre site dans cette police (ou n’importe quelle autre) et de la définir comme le logo de votre site ou bien d’éditer l’image haut.jpg qui se trouve dans le répertoire IMG du squelette Wellor et de supprimer dans le fichier inc-entete les lignes suivantes :
#NOM_SITE_SPIP
et voila le tour est joué ! (normalement)
En dessous de ceci vient une petite phrase piochée au hasard (voir ci dessous dans la gestion des mots clés pour le paramétrage de ces phrases aléatoires).
Enfin vient une barre de menu avec un lien vers l’accueil, un vers la partie administrateur, vers le plan du site, le formulaire de contact et la page de lien.
Mots clés :
Le squelette est conçu pour fonctionner avec de nombreux mots clés :
pas_sommaire à un article ou à une brève permet de ne pas l’afficher dans la page d’accueil, mais aussi dans les pages plan et rubrique.
pas_menu appliqué à une rubrique permet de l’exclure de la liste des rubriques dans le menu en haut à droite, mais aussi de l’omettre dans le plan du site.
sommaire_edito définit l’éditorial du site (appliqué à un article) ce dernier apparaitra tout de la page sommaire en haut entouré d’un liserait bleu
sommaire_centre appliqué à un ou plusieurs articles permet de les mettre en valeur en les disposant en haut de la page de sommaire (juste en dessous de l’édito s’il existe)
sommaire_droite définit l’article qui sera placé juste en dessous du menu des rubriques dans la colonne de droite (il est entouré d’un liserait bleu)
rubrique_edito permet quand à lui de désigner l’article qui servira d’éditorial à la rubrique qui le contient (il est entouré d’un liserait bleu)
enfin vous pouvez définir un mot clé correspondant au nom d’un auteur pour définir l’article qui servira d’éditorial à sa page (par exemple si votre auteur s’appelle Winston Smith, il vous suffira de créer le mot clé Winston Smith (sans tiret) et de l’appliquer à l’article voulu !
citations Le mot clé citations doit être appliqué à l’article qui contient les phraes destinées à apparaitre alétoirement dans l’entête (voir ci-dessus). Les phrases que vous souhaitez voir apparaitre doivent être séparées par un \n. Dans le cas ou il n’existe pas d’artcle de citations, cet espace restera vide.
Répondre
La fonction répondre à un article ou à une brève à été rajouté par rapport au squelette drop-zone-city, d’autre part sur les pages articles, un lien à été rajouté dirigeant l’utilisateur vers une page ou il peut signaler une faute d’orthographe.
Recommandation
Un petit formulaire permettant au webnaute de recommander votre site à ses connaissances est disponible bas de page, si vous n’en voulez pas ou si vous trouvez qu’il prend trop de place, vous pouvez le remplacer par un simple lien vers spip.php ?page=recommandation
Formulaire de contact
Outre le signalement de fautes d’orthographes, un visiteur peut contacter les auteurs par deux autres moyens : le formulaire de contact présent sur la page de chaque auteur (dans la colonne de droite) ou la page « contact » qui reproduit tout simplement le formulaire de contact de l’auteur n)1, qui est logiquement le créateur du site.
Liens
Tous les liens de votre site (sites syndiqués, articles syndiqués) sont rassemblés dans une page « Liens » accessible via la barre de menu.
Personnalisation du squelette
Bien que tout soit fait pour rendre l’utilisation du squelette Wellor la plus simple possible, certaines personnalisations sont vivement conseillées
- Les pages de contact (contact, auteur, recommandation) permettant d’envoyer des messages aux auteurs du site n’ont pas besoin d’être modifiées, il est tout de même conseillé d’effectuer des vérifications.
- L’entête (voir plus haut)
- les petites phrases piochées au hasard et qui apparaissent juste au dessus de la barre de menu doivent être modifiée dans le fichier phrases.txt
- Vous pouvez personnaliser le bas de votre page (en dessous du script de personnalisation, remplacer les liens vers le squelette par un lien vers ce que vous voulez, par exemple comme sur mon site par un lien vers article de votre site...)
- Le fichier inc-head et se meta tags :
Le fichier inc-head contient les Meta tag, c’est à dire les informations d’indexation pour les moteurs de recherche (google and compagnie) vous pouvez personnaliser (et rajouter) tout ce qui se trouve entre [(#REM) meta tags] et [(#REM) Fièrement fabrique avec SPIP ], mais surtout évitez de tripatouiller le reste qui est crucial pour le bon fonctionnement du site
A faire
Il reste encore pas mal de boulot à faire pour donner un bon squelette, quels sont les objectifs des versions suivantes ?
- Passage aux normes XHTML 1.0 Strict (actuellement le squelette est aux normes XHTML 1.0 Transitionnal).
- Une simplification de l’entête.
- Fixage de tous les bugs que vous m’aurez signalés et rajout de ce que vous m’aurez suggéré.
- Transformer les formulaires « signaler un faute d’orthographe » et « recommandation » qui sont actuellement en php dans le squelette par des formulaires spip que je ne sais pas encore faire.
- Proposition de quelques pages personnalisées en harmonie avec le squelette pour les plugins (par exemple celui permettant de publier un article en étant simple visiteur nécessite deux pages, lesquelles bien sûr le design reste à faire).
Discussions par date d’activité
17 discussions
Bonsoir et encore félicitation de votre travail sur le Squelette Wellor :o))
cela fait qq temps que je tente d’utiliser le système de pagination de SPIP dans la page « rubrique », et qd je tente de l’introduire le mode debug s’enclenche et me signale que la boucle article est récursive et qu’il n’aime pas... d’ailleurs il n’y a pas de pagination...
mais en sortant de la boucle article, il n’aime pas non plus car alors il se dit « hors boucle »...
Merci d’avance de vos idées et suggestions :o)
Tout se joue dans rubrique.html, la première chose à faire, c’est de repérer cette balise qui traine dans un coin (l. 92)
et de la mettre tout en haut (avant #CACHE)
puis de repérer la fermeture (l. 134)
et de la mettre tout à la fin (après la fermeture du html)
On en profite ligne 6/7/8 pour enlever ce qui est inutile :
devient
Passons maintenant aux choses sérieuses...
ligne 95, on va travailler la boucle article en lui ajoutant un hors boucle afin de mettre la pagination. On oubliera pas (je pense que c’était la cause principale de votre problème) de mettre le tag pagination dans la boucle article :
on remplace donc
par
Et le tour est joué !
Merci ! :o)
Répondre à ce message
Bonjour,
j’ai un nouveau soucis et là, je n’ai pas trouvé de solution. Avec le plugin Diapo, l’affichage s’effectue mal dans la partie front office. Les icones du plugin ne sont pas visibles et les images "sortent du Bloc article et mordent sur les blocs du Menu latéral. Y a-t’il à redéfinir le
Le problème c’est que je ne connais pas du tout le plugin Diapo, je penses qu’il vaudrait mieux poser la question sur le forum associé au plugin, mais si tu ne trouves vraiment pas, je peux essayer...
Répondre à ce message
Bonsoir,
c’est encore moi, toujours en test de ce squelette ! Je ne trouve pas la balise #INSERT_HEAD qui doit me permettre d’utiliser le plugin diapo. Est-ce une erreur ma part ou y-a-t’il une façon de remédier à ça ?
Merci beaucoup.
Oups ! Désolé. Je viens de le trouver dans le fichier « inc-head.html ». Par contre, je ne comprends toujours pas comment utiliser le Plugin Diapo. Je ne comprends pas où inscrire le raccourci clavier. Chez moi, rien ne se passe. Les images téléchargées ne s’affichent pas du tout.
Merci encore.
Répondre à ce message
En test local, je trouve ce squelette intéressant.
Cependant, est-il possible d’avoir le texte de l’article limité à un certain nombre de caractères (ou de lignes) dans la page sommaire ? Pour l’instant, seul le titre s’affiche avec, au mieux le descriptif de ce dernier. Toutefois, tous mes articles ne disposent pas d’un descriptif, et je voudrais que le lecteurs aient une vision du contenu de chaque article.
Merci d’avance.
A priori ça serait possible,
Essaie de remplacer, dans sommaire.html, à la ligne 101 :
Par
Si ça marche ça devrait afficher le descriptifs si il existe ou dans le cas contraire les 300 premiers caractères de l’article.
Le seul truc c’est que je suis pas certain qu’on puisse mettre une balie avec des atribust dans un « sinon ».
N’hésite pas à me dire ce que ça donne,
Jead Wellor
Super ! ça marche de façon parfaite. Merci de cette extrême réactivité et de cette réponse technique pertinente.
Répondre à ce message
Bonjour Jead,
Merci déjà pour ce magnifique travail.
J’ai une question concernant les langues. Quels fichiers de Wellor dois-je paramétrer pour que les architectures soient exclusivement dans les langues choisies (je les ai séparés en secteur pour le français, l’anglais, l’allemand et le portugais) ?
Merci,
Liu Wei
Pour l’instant ce squelette n’est pas internationalisé, tous les mots qui apparaissent (ou presque) sont directement dans les fichiers .html... Je ne m’y connais pas trop en mutualisation, mais je crois que pour les squelette le mieux est de créer des fichiers local_fr.php local_en.php etc... qui assignent un mot ou un groupe de mot à un code. Voici la syntaxe :
ça c’était pour le français, à côté dans le local_en.php en mettrait
ainsi on mettra dans les fichiers.html du squelette le code
<:autre_article:>
et il apparaître Autres articles si on est français, Others article si on est en anglais.Je vous préviens juste qu’il faut bien faire attention à ne pas laisser d’espace avant et après les balises php dans les fichiers locaux sinon ça part en cacahuète ;)
Cool Jead, merci.
J’essaye cette méthode.
Répondre à ce message
Bonjour, :o)
je souhaite ajouter une balise meta keywords aux pages sur le principe des citations dans l’entête...
j’ai donc repris le même principe que j’ai tenté d’adapter :
Mais ça plante lamentablement...
Si vous aviez des idées cela serait tout simplement merveilleux...
Merci d’avance de vos réponses et suggestions. :o)
Chuis confuse, c’est tout bête, pas la peine de reprendre du php :
Voili voilou :o)
Répondre à ce message
Bonjour,
je voulais juste signaler que chez moi quand j’utilise un switcher de squelette genre Skthemes ou Habillages : tout le site est décalé à droite, je sais pas trop d’où ça vient. Si quelqu’un trouve, qu’il me le dise.
En attendant, faut mettre les mains dans le cambouilli pour tripatouiller un peu tout ça afin de donner quelque chose d’un peu présentable. ;)
On commence par ouvrir habillage.css
Dans body {} on remplace la margin par un padding de même valeur (apparement ya une grève des margin), on enlève margin-left et margin-right ainsi que la width.
Dans #entête {} on rajoute margin:auto ; de même dans .tab_menu{} on rajoute margin:auto ;
et voilà le tour est joué ya plus qu’à recommencer dans ie.css
Apparement ça pose pas de problème si on utilise pas de switcher de squelette donc c’est peut-être une modification à garder durablement
Répondre à ce message
Bonsoir ;o)
Encore mes félicitations pour votre travail avec Wellor :o)
L’utilisation d’articles éditos pour les rubriques étant d’ailleurs des plus sympathiques, je les utilise comme « slogan »... Mais du coup, il serait souhaitable de faire disparaître le lien vers les dits articles (de fait réduits au seul titre) du menu « Dans la même rubrique » de la page article...
J’ai bestialement tenté d’introduire le critère sur le titre_mot dans la boucle existante... Sans grand succès car soit on affiche plus rien, soit on n’affiche que cela...
Aussi, merci d’avance de vos suggestions :o))
Bonjour,
En fait l’idée avec les mots clés, ce n’est pas d’intégrer le critère correspondant dans la boucle ou on ne veut pas qu’ils apparaissent mais plutôt de les appeler dans une boucle qui n’affiche rien à l’utilisateur puis de dire aux autres boucles de ne pas appeler les articles déjà appeler. dans notre cas concrètement on va rajouter
n’importe où dans la page article au dessus de la boucle en question.
Pour des questions de clarté, je vous conseille de la mettre soit au tout début du code soit juste avant la boucle en question.
J’avoue que je serais assez curieux de découvrir vos sites...
Merci infiniment de votre réponse :o)
Pour les sites, dès qu’ils seront visibles en ligne, je les enregistrerais sur spip.net et puis je vous enverrais les adresses à partir du formulaire de contact :o)...
Ceci dit, au moins pour un (le premier qui sera en ligne dans quelques jours), la charte graphique est la même à 99% son aspect ayant immédiatement séduit la personne pour qui je le fais... (donc non ce ne sont pas ma photo ni mon numéro de téléphone sur le site, ce sont les siens :oD)
En effet, les couleurs sont exactement ce qu’elle veux et le haut met très bien en valeur son logo...
Je peux vous donner l’adresse provisoire via le formulaire de contact si vous y tenez mais cela me parait peu utile puisque dans qq jours les dns seront changés et le monde éblouï verra la version définitive en production (et surtout ne verra pas grande différence avec le Wellor d’origine)
Cependant au niveau code, il y a eu pas mal de changements que j’expliquerais dans une page de ce site, conformément à l’esprit des Logiciels Libres.
Pour le second, je reprendrais le Wellor modifié mais avec quelques simplifications et un changement de charte graphique ; les couleurs du logo et de la communication étant totalement différentes (c’est plutôt dans le blanc et vert !!!) ;o))
Je n’ai sûrement pas fini avec les questions à vous poser... Néanmoins encore merci de votre précieuse aide et de votre travail sur Wellor :o)
Répondre à ce message
Me r’voilà... :o))
Encore une question « de folie »...
lorsqu’on fait des listes à puces imbriquées :
et bien la puce de « truc 1 » s’affiche avec Firefox à peu près au milieu de la sous liste à puces (vers sous« truc 1.2 »)... Et de fait les puces semblent s’afficher systématiquement au milieu de la « ligne » concernée plutôt que au début...
Bref qd la « ligne » (au sens logique html d’une liste) est longue et tient sur 3 ou 4 lignes (au sens visuel du terme) et bien la puce n’est pas au niveau de la première mais vers la 2e ou 3e... Et j’aimerais qu’elle apparaisse comme sous IE au niveau de la 1re... Surtout qd il y a des sous listes...
On fait comment M’sieur ?
Merci d’avance de vos réponses ;o))
Mmmm c’est une pure question html/css ou mon squelette rentre en jeux ?
En tout cas je me suis moi même déjà posé la question, vous utilisez une puce normale ou une image comme puce ?
Si c’est le cas, on ne peut pas la placer facilement avec la propriété list-style-image, il vaut mieux utiliser background avec un code dans ce genre là :
Voilà toute ma science
C’est un souci que j’ai sur Wellor uniquement... Je ne me permettrais pas de poser une question ne le concernant pas ici...
Je n’utilise rien de particulier n’ayant rien changé à cela sur votre squelette (est ce une puce faite avec une image ?)
la puce en question se présente comme sur votre site, par exemple dans le pavé « Dernières discussions » devant « On a signé un bail de 5 ans, combiens en prime ? » non pas en face de la première ligne mais entre les deux... Du coup quant c long, voire avec une sous liste l’affichage n’est pas terrible et fait très « bug »
Merci d’avance de votre retour sur la question ;o)
ah oui, exacte, c’est vraiment tout bête ;)
dans habillage.css
il faut remplacer
par
On met tout simplement un top à la place du center dans le background-position.
Merci :o)) ça fonctionne tout à fait bien !
Répondre à ce message
Bonjour ;o)
Toujours en train de travailler sur Wellor, il semble que les caractères dans les tableaux s’affichent en beaucoup plus petit que le texte hors des tableaux...
Or j’ai besoin qu’ils soient aussi lisibles que le reste du texte... Où cela se trouve t’il dans le CSS et que faut il changer ?
Merci d’avance de vos réponses :o)
Oula...
Je n’ai absolument pas touché aux tableaux, c’est donc la configuration par défaut de SPIP qui, si je ne m’abuse, se trouve rangée quelque part dans Dist.
C’est tout ce que je sais, désolé :(
j’ai trouvé... :o)
dans « habillage.css » comme dans « ie.css »
vers la ligne 744, il faut placer
font-size: 1.27em;
dans
d’où :
1.27 étant la taille souhaitée de caractères... ;o))
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 : |