Squelette EasySqueletting

Le squelette EasySqueletting est un squelette de type généraliste, il propose une navigation sur 2 à 3 colonnes ainsi qu’une navigation horizontale par onglets. Les onglets sont des liens vers des rubriques que vous pouvez sélectionner manuellement. La principale caractéristique de ce squelette est que vous pouvez choisir en quelques clics toutes (ou presque toutes) les couleurs d’affichage de votre site.

L’essentiel de ce que vous permet ce système de template :

-  Vous pouvez choisir et changer toutes les couleurs de votre site à tout moment sans éditer le moindre fichier,
-  Vous pouvez créer et modifier votre entête grâce à un plugin fourni dans l’interface d’administration, cela vous débarasse du soucis de création de logo qui est souvent casse-tête,
-  Vous pouvez choisir des polices typographiques pour les titres des différentes sections pour egayer votre site,
-  Vous gérez simplement, par ajout de mots clés, les onglets affichés dans votre navigation horizontale,
-  Vous choisissez le coté ou se situe la navigation verticale,
-  et enfin, vous pouvez déterminer les dimensions (largeurs) des colones de votre site.

Voici quelques exemples de ce que vous pouvez obtenir :

A savoir sur ce squelette :

-  Valide et testé sur : SPIP 1.9.2 d
-  Auteur : Gilles TRAN
-  Licence : GPL
-  Utilisation : Débutant, Intermédiaire
-  Surcharge Core : fichier Extra

Le squelette easysqueletting utilisent la librairie javascript jQuery pour afficher les arrondis, grâce au plugin « jCorners », ainsi qu’un news-slider pour afficher les derniers articles en page d’accueil, grâce au plugin « jFlow »

Pour faire fonctionner ce squelette, il vous faut installer 3 plugins :

-  champs homonymes : qui vous permettra de gérer l’intitulé de vos onglets,
-  CFG : pour gérer toutes les variables d’affichage pour la feuille de style dynamique,
-  easysqueletting : le plugin qui couplé à CFG pemet le choix de toutes vos couleurs, typos,...

Notez de plus qu’il vous faut configurer SPIP de façon à pouvoir générer des images typographiques et des vignettes. Pour cela il faut se rendre sous : Configuration >> fonctions avancées >> choisir GD2.

Créer vos onglets

-  Pour créer vos onglets vous allez devoir créer un nouveau groupe de mots-clés nommé : « mise en page »
-  Puis créez un mot nommé : « onglet » (cet intitulé doit être respecté)
-  Adjoindre ce mot-clé aux rubriques que vous voulez voir apparaitre dans vos onglets
-  Editer la rubrique pour remplir le champs « Nom Onglet » nouvellement créé grâce au plugin champs homonymes, cela vous permet d’avoir un intitulé plus court pour le texte de votre onglet,
-  Profitez en pour remplir le champs « Nom Court » disponible pour les rubriques, articles, brèves et sites. Ce champs sera utilisé dans le fil d’ariane vous permettant ainsi d’avoir des fils d’ariane plus courts

Upload et pré-configuration de ce système de template

-  Téléchargez le zip, décompressez et uploadez les deux repertoires « squelettes » et « plugins » à la racine de votre site SPIP
-  Validez les 3 plugins (configuration >> plugins) puis
-  Rendez vous sur la page de configuration d’easysqueletting (configuration >> CFG >> Easy Squeletting)

Choix des couleurs, largeurs, typos et arrondis

Vous êtes maintenant sur la page ecrire/ ?exec=cfg&cfg=easysqueletting, vous disposez ici de plusieurs listes dépliantes pour chaque zone de configuration.

Afin de faire simple voici des captures d’écran d’un exemple de configuration pour chacune des caractéristiques de configuration du site.

Cliquez sur « Couleurs générales et arrondis ». Maintenant il vous faut remplir les cases, pour les couleurs vous pouvez cliquer sur la case « modifier » adjacente à chaque champs pour utiliser le sélectionneur de couleur. Il est bon de savoir que ce sélectionneur de couleur fonctionne mieux sous Firefox

Attention : Si vous essayez de prévisualiser votre site en cours de configuration, il vous faudra bien penser, après chaque modification de la page de configuration, à :

-  Vider le cache de SPIP et
-  Vider le cache de votre navigateur pour voir les modifications

Mise en garde : pensez à bien valider le formulaire, voir même à le valider après chaque étapes pour ne pas risquer de perdre votre configuration après un choix laborieux des couleurs.

Voici un aperçu de ce que vous pourriez obtenir après votre choix de couleurs :

-  Choix première couleur et deuxième couleur :

-  Choix des dimensions du site

Remarque : vous pouvez ici choisir le coté d’affichage de la colonne de navigation.

-  Choix des typos

Remarquez ici que vous pouvez spécifier 4 typos différentes : La première pour le texte de l’entête, la deuxième pour sa baseline (sous-titre), la troisième pour les titres des cadres de la colonne de navigation et la dernière pour les titres de la colonne de contenu

-  Choix des réglages pour les différentes typos du site

Entête

Baseline

Colonne de navigation

Colonne de contenu

Attention notez aussi : Pour voir apparaitre des articles en page d’accueil dans les deux cadres du haut il faut :

-  Que les articles soient publiés
-  Qu’ils aient un logo, sinon cela n’affichera rien...

Vous êtes maintenant fin prêt pour visualiser votre tout nouveau site et si demain vous voulez changer de thème de couleurs pour votre site vous pourrez le faire en quelques secondes.

Pour éditer, ajouter, modifier ou supprimer des styles utilisez de préférence la feuille de style : styles.css

Discussion

94 discussions

  • 1

    Bonjour à tous !!
    ça fait 2jours que j’éssaie d’utiliser EasySqueletting mais rien !!j’ai une page blanche et ça m’énerve !!!
    j’aimerais avoir si possible une installation détaillé de ce squelette

    • Salut,

      Je suis désolé que la méthode présentée ici ne te semble pas suffisament détaillée. Si certains points ne te semblent pas clairs, pourrais tu détaillé ce qui ne te semble pas clair ? Je me ferai fort d’essayer d’éclaircir tout ça

    Répondre à ce message

  • 1

    Salut,

    ce skelette a l’air vraiment surper sur les petites vignettes. bravissimo ! Mais j’ai pas trouvé dans le texte : y a t il un site démo exemple pour y gouter grandeur nature ?
    merci !!!

    Répondre à ce message

  • 1
    Aexchrist

    Bonjour j’ai utilidé EasySqueletting mais les couleur ne s’affiche pas je sais pas comment faire. je demande de l’aide

    • klelugi

      Bonjour,

      Pour pouvoir t’aider, il faut plus d’infos ;)

      Soit plus d’info sur le problème, soit une url pour qu’on puisse se rendre compte plus facilement du problème.

    Répondre à ce message

  • 1

    Bonjour,
    Après l’installation de easysqueletting et des deux autres plugins, j’ai bien accédé à l’interface comme indiqué plus haut.
    Cependant, les boutons devant servir à modifier les couleurs et la typographie semblent ne pas fonctionner. En effet, les boutons « modifier » ne réagissent pas.
    Y a t-il une manipulation précise à effectuer pour remédier au problème ?
    Je précise que l’hebergement s’effectue sur olympe-network.

    Merci d’avance.

    Trois

    • klelugi

      Ce qu’il faudrait faire, car je ne vois pas d’ou le problème peut venir, c’est essayer de passer par un autre navigateur si tu es sous IE6 ou 7 passes sous Firefox pour faire un test

    Répondre à ce message

  • 6

    Merci pour ce plugin !
    Par contre, j’ai eu quelques difficultés : je ne sais pas si c’est dû au fait que j’ai entré un en-tête avec des accents, ou si j’ai d’abord mis le squelette (tpl-easysqueletting) dans le répertoire plugins au lieu du répertoire squelettes, mais plus rien ne s’affichait sur la page CFG (à part le titre : configuration des modules).
    En fouillant un peu, le plugin champs homonymes ne me permet pas non plus d’avoir un champ « Nom Onglet »...
    Même en désactivant et supprimant le plugin de l’arborescence, impossible de revenir à la configuration du squelette par cfg (qui pourtant marchait bien !).
    J’ai donc dû ré-installer complètement spip en supprimant la base de donnée (je n’ai pas essayé les étapes intermédiaires)

    • klelugi

      Oups, oui dans le zip j’ai du oublié de renommer le répertoire : « tpl-easysqueletting » en « squelettes » pour faciliter l’installation. Désolé pour la gène occasionnée

    • Bonjour,

      Extra ce pluging !

      Même soucis, en configurant easysqueletting via cfg, brutalement, tout a disparu.
      Depuis, l’onglet cfg est vide et il ne reste que la barre de titre « Configuration des modules ».
      Impossible de revenir à configuration initiale malgré re-install SPIP et du pluging. Je ne vais pas réinitialiser ma base de données ;-)
      Donc pas eu le temps de tester SNIF SNIF :-(((
      Doit y avoir un bug .....

    • klelugi

      Il m’est difficile de pouvoir comprendre le problème sans voir comment cela c’est passé ni voir le résultat en réél...

      Je n’ai pas eu ce genre de problème et cfg a toujours bien accepter mes modifs...

      Sinon peut-être une piste :

      -  Avez vous bien spip 1.9.2 ?
      -  Avez vous configurer spip pour passer par la librairie GD (configuration >> fonctions avancées)
      -  Avez vous l’extension freetype activée sur votre hébergement (cela sert avec GD2 à afficher les images typo) ?

      Vu que dans l’admin il y a un affichage de deux de ces images typo, si vous ne pouvez les afficher c’est peut-etre que la fonction « image_typo » fait bugguer votre page...

      Ce n’est qu’une hypothèse bien sur sinon je ne vois pas

    • Merci de cette réponse rapide,

      1/ Oui SPIP 1.9.2 d
      2/ Je suis en local et je vois bien les 2 images ...
      Néanmoins, CFG est réapparu en activant/désactivant l’affichage « Méthode de fabrication des vignettes » ...
      Allez comprendre.
      Maintenant, ça marche et c’est trop beau !!!!!
      Merci bcp ;-)))))

    • klelugi

      Content que ca soit revenu

      Si tu as une url pour montrer ce que ca donne avc ta config à toi, hésites pas ;)

    • j’ai eu un nouveau problème d’affichage : le squelette était bizarre, et pour cause ! Je n’avais pas configuré les onglets.

      Mais champ homonyme ne me permettait pas de définir « nom onglet » dans les rubriques. J’ai donc désinstallé les plugins sauf cfg, les ai supprimé, puis installé et configuré d’abord champ homonyme avant easysquel.

      Je ne suis pas sure que cela aide pour votre problème, mais bon.

      (Au passage, n’oubliez pas de définir que les mots clés soient applicables aux rubriques, ce qui n’est pas dans la configuration de spip par défaut !)

    Répondre à ce message

  • 3

    Bonjour
    Ce squelette a l’air sympa.
    Mais je n’arrive pas à afficher.
    Il me dit

    Spip 1.9.2d debug monsite

    * Erreur(s) dans le squelette
    o Erreur : filtre « image_typo_entete » non défini,
    o Erreur : filtre « image_typo_baseline » non défini,
    o Erreur : filtre « image_typo_site » non défini,
    o Erreur : filtre « image_typo_site » non défini,
    o Erreur : filtre « image_typo_podcolorun » non défini,

    Pourtant j’ai suivi tout ce qu’il est écrit, la config etc, je pige pas trop. J’ai bien gd2 en méthode de fabrication des vignettes.
    Je suis novice.
    Si quelqu’un peu m’aider, merci.

    • klelugi

      Il faut penser à activer les plugins, sans le plugin easysqueletting activé tu ne pourra pas prendre en compte les fonctions que SPIP te réclame.

    • Oui j’ai bien activé les plugins. Les cases sont cachés, et je suis allé dans cfg pour mettre la config des polices etc, mais rien n’y fais. :(

    • Ah bin ça fonctionne maintenant, je sais pas trop comment ça se fait, peut etre parceque j’ai mis un jquery plugin ;
      Merci en tout cas
       ;)

    Répondre à ce message

  • 2

    Bonjour et bravo pour ce squelette,

    je l’ai installé en local et la feuille de style CSS n’apparaît pas sur le site public. seuls les titres apparaissent avec le bon fond couleur, le reste étant sur fond blanc.

    Merci de votre aide et encore chapeau pour ce super squelette qu’il me tarde d’essayer.

    Bien amicalement

    Franck

    • klelugi

      Il te faut soit vider le cache pour mettre à jour la feuille de style soit utiliser cette url :

      /spip.php ?page=persistant.css&var_mode=recalcul

      pour recalculer la feuille de style et être certain que tes modifs vont apparaitre.

      Puis pour le rechargement de la page tu dois aussi faire ctrl+F5 pour vider le cache du navigateur qui met la css en cache par défaut.

    • Malheureusement les tentatives ont été vaines et je reste toujours avec mon fond blanc. aurais-tu un mail afin que je puisse t’envoyer un screenshot de la situation.

      Merci par avance.

      Franck

      Mon mail : franck.viano@wanadoo.fr

    Répondre à ce message

  • 1

    Bonjour...
    Je suis peut-être plus nulle que la moyenne... mais j’ai tout installé comme il faut, tout paramétré comme c’est écrit, mais rien n’a changé dans mon site public... je recalcule, je vide la cache rien n’y fait...
    Je me demande : fallait-il avoir un squelette préalable ?
    Par exemple qu’est-ce qui détermine l’affichage deux à trois colonnes... On ne peut le choisir à la config... alors ?!
    Merci pour toutes réponses pouvant m’éclairer...
    et quand même félicitations pour le plugin... même s’il n’est pas à l’abris d’une mauvaise utilisation !!!

    • Bon autant pour moi, je me réponds à moi-même, free n’accepte pas le chmod... alors je ne peux autoriser mes fichiers comme préconiser ou en tout cas les manip’ pour y arriver me paraissent un peu barabares... merci quand même

    Répondre à ce message

  • 1

    Bonjour,
    Bravo pour ceux site.
    Mais j’ai beau cherché partout je ne trouve pas la solution à mon problème et vous semblez l’avoir (ou plutôt l’utiliser).
    Dans le menu à gauche le texte est automatique transformer en image (via du php je supose) mais les tutoriaux à ce propos sur le net sont trés vagues pouvez-vous m’indiquer précisément ou se trouve le code ou je ne sais pas m’expliquer, me l’envoyer.
    Merci ^^

    • klelugi

      Bonjour,

      Les images sont générées grâce à la fonction « image_typo » , à laquelle on peut passer diverses variables pour personnaliser la création de son image typographique.

      Si tu veux de bons exemples, je te conseille la lecture d’un excellent site qui propose des plugins et tutoriaux SPIP c’est ici

    Répondre à ce message

  • 1
    carpatag

    bonjour et bravo pour le concept mais j’ai juste un petit probleme , en effet apres config, ma page public ne prend pas en compte le squelette avec les css ??? Pourtant j’ai bien mis le l’ensemble du dossier tpl-easysqueletting dans suqelettes. Avez vous une petite idee du probleme ? MERCI

    • klelugi

      As tu une url ?

      Sinon il faut vérifier que le répertoire IMG/distant soit bien accessible en écriture (modifier les droits chmod sur ce répertoire).

      Ceci cause un problème pour la feuille de style qui génére des images en cache temporaire.

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom