SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 186 visiteurs en ce moment

Accueil > Thèmes > Generic (thème SPIPr pour SPIPr-dist)

Generic (thème SPIPr pour SPIPr-dist)

15 juillet 2016 – par Alexandre Tomas – 10 commentaires

5 votes

Generic est un thème responsive SPIPr pour le squelette SPIPr-dist. La couleur générale est facilement et librement configurable. En version ordinateur les bordures sont visibles et le fond s’adapte, de plus les sous-menus sont pris en charge aussi bien avec un écran de taille réduite qu’avec un écran normal.

Description du thème

Le thème Generic répond à un besoin de thème avec bordures et qui soit responsive à l’image de ce que propose SPIPr dans sa distribution.

C’est un thème sans prétention aucune et juste fait pour être générique d’où son nom.

Le thème Generic comprend en résumé :

  • une image d’arrière plan qui s’adapte et qui disparaît en mode réduit,
  • des bordures qui disparaissent en mode réduit,
  • un haut de page et un pied de page en dégradé de gris,
  • un menu responsive sous forme de barre de menu en mode ordinateur et sous forme de « hamburger » en mode réduit, menu gérant les sous-menus de premier niveau dans les deux modes,
  • une flèche pointant à droite ou en bas, respectivement quand le sous-menu est fermé ou quand le sous-menu est ouvert,
  • un dégradé de gris pour l’article hero,
  • des liens à la couleur générale du site.

Capture et démo

Vous pouvez voir le thème en action ici sur un site de test.

Description des fichiers du plugin

Le style de ce thème a été réalisé à partir :

  • du fichier variables.less du thème Readable v2.1.1,
  • du fichier bootswatch.less du thème United v2.1.1,

tous deux des thèmes originellement proposés avec la distribution SPIPr.

Partant donc de ces deux feuilles de style qui proposent déjà au départ une idée proche du résultat voulu, Generic ajoute une nouvelle feuille de style theme.less qui complète et ou modifie un certain nombre de configurations. Tous les ajouts sont proposés sous formes de chapitres et commentés.

Quant au fichier variables.less, son contenu d’origine a été laissé à l’identique (comme bootswatch.less) comme base de personnalisation, et c’est tout à la fin qu’ont été rajoutées les nouvelles personnalisations et autres nouvelles variables utilisées dans theme.less.

Dans le dossier head_js le fichier dist.html définit les chemins d’accès des fichiers javascript dans Bootstrap indispensables au fonctionnement des sous-menus, fichier qui viendra surcharger celui vide de SPIPr-dist, fonctionnement que vous connaissez si vous êtes familiers de SPIP.

Enfin le thème Generic surcharge le body.html de SPIPr-dist à l’identique.

Démarche de réalisation

Comme évoqué plus haut, ce thème a été réalisé au départ sur la base d’autres thèmes qui correspondaient en partie au cahier des charges, afin de gagner du temps.

Attendu qu’il est parfois difficile de reprendre le projet d’autrui ou même son propre projet après quelques mois, le fichier theme.less a été abondamment commenté afin de faciliter les modifications éventuelles.

Installation

Le plugin Generic s’installe et s’active comme n’importe quel autre plugin.

Au préalable vous n’avez qu’à installer SPIPr-dist depuis l’interface Installer des plugins de SPIP, SPIP se chargera d’installer automatiquement également les plugins complémentaires Z-core, LESS CSS, Comments et Bootstrap, tous indispensables à SPIPr. Vous devrez également installer le plugin Menus pour lequel SPIP installera aussi automatiquement le plugin complémentaire Saisie pour formulaires.

En créant votre menu depuis l’espace privé et grâce au plugin Menus, n’oubliez pas de lui donner l’identifiant barrenav.

Personnalisations

Le thème comprend arbitrairement un haut de page ainsi qu’un pied de page en gris dégradé. Mais une bonne idée serait de personnaliser ces derniers avec par exemple quatre images de fond à peu près semblables et compatibles avec les quatre modes d’affichages respectifs en fonction de la taille de l’écran. Il faudra alors penser à adapter la couleur des textes de ces éléments de sorte que les textes puissent se distinguer de leur arrière plan. Vous pourrez opérer toutes vos personnalisations dans le fichier theme.less.

Pour changer la couleur ainsi que l’aspect général du site tout entier, il suffit de changer la valeur de @linkColor tout à la fin du fichier variables.less, fichier qui contient lui-même à la fin de nouvelles variables utilisées dans theme.less.

Attention si vous changez de couleur, n’oubliez pas de vider le cache de SPIP y compris celui des images calculées automatiquement.

Problèmes connus

Il se peut qu’avec le jeu des surcharges multiples, les marges et les largeurs puissent être modifiées inopinément en mode ordinateur [1]. Si vous ne trouvez pas le ou les plugin(s) impliqué(s), vous pourrez alors facilement modifier celles-ci dans le fichier theme.less en n’oubliant pas de le faire pour les trois tailles d’écran prévues dans ce thème pour le mode ordinateur.

Sur un smartphone sous Android -je ne sais pas pour les autres- que l’on soit dans le mode réduit et normal du smartphone ou en mode ordinateur simulé, quand on appuie [2] sur un lien qui ne sert qu’à déplier ou à replier un menu (donc qui ne provoque pas le chargement d’une nouvelle page), on constate que le changement de couleur défini par la pseudo-classe d’action CSS :hover reste persistant. Cette persistance d’effet cesse si l’on appuie ailleurs, tout comme pour un :focus. Vous pourrez constater vous-mêmes la différence de comportement de l’entrée qui contient un sous-menu en mode réduit (avec le menu hamburger) selon que l’on se trouve sur un smartphone ou sur un ordinateur [3]. Ce n’est en soi pas vraiment gênant mais c’est certainement perfectible.

Voir en ligne : http://plugins.spip.net/theme_generic

Notes

[1La seule fois où le problème est survenu, le présent thème cohabitait avec d’autres thèmes dans le dossier themes de SPIPr, mais c’était bien le seul à être activé. Rien ne dit que le problème ait pu venir de là, mais le premier réflexe est d’écarter toutes les causes possibles et de repartir surtout d’une configuration la plus simple possible afin d’obtenir une vue meilleure des mécanismes de surcharge en jeu.

[2Oui, on ne clique pas sur un smartphone...

[3Vous pourrez constater ce même comportement en principe sur d’autres thèmes Bootstrap.

Dernière modification de cette page le 11 avril 2017

Retour en haut de la page

Vos commentaires

  • Le 5 juillet à 12:06, par Emilie En réponse à : Generic (thème SPIPr pour SPIPr-dist)

    Bonjour,
    Je ne suis pas vraiment utilisatrice de Spip mais on m’a donné, il y a 2j, pour mission de refondre un site web basé sur Spip. Je ne connais donc pas encore très bien le fonctionnement.
    J’essaie d’appliquer le thème Generic, ou un autre, peu importe, et cela ne modifie pas l’interface du site. Je pense que c’est parce que mon prédécesseur a modifié tous les squelettes disponibles. Mais étant novice, je ne sais pas si je peux les ’réinitialiser’, manuellement ou automatiquement, ou s’il y a un autre moyen de régler mon problème.

    Autre chose : je voulais donc installer le thème Generic mais je ne le vois pas dans la liste accessible avec le plugin Zen-Garden. Je suppose qu’il faut jouer avec le plugin Menus, mais je n’ai pas encore cherché comment l’utiliser (déjà, appliquer un thème quelconque ça m’aiderait).

    Merci d’avance.

    • Le 5 juillet à 12:11, par Maïeul En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Est-ce qu’on pourrait avoir l’adresse du site pour avoir une idée des soucis ?

      Il faut savoir qu’en SPIP on distingue :
      -  le squelette, qui concerne la structuration du contenu
      -  le thème, qui concerne l’affichage du contenu.

      Un thème est prévu pour un squelette, mais un squelette peut avoir plusieurs thèmes

      Donc si tu appliques un thème sans le squelette correspondant, cela ne risque de rien donné. Ici en l’occurence le thème est pour le squeletter spipr

    • Le 5 juillet à 12:17, par Emilie En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Le site que je modifie est un site inutilisé mais quasi identique au projet final (enfin bref), le voilà : http://www.clubsciences.u-psud.fr

      J’ai saisi la nuance mais je ne sais toujours pas trop ce que je dois faire. J’ai bel et bien un jeu de squelette spipr, dans le dossier du plugins.

    • Le 5 juillet à 12:25, par Maïeul En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Oui, alors effectivement la personne avait fait ses propres squelettes, qui du coup l’emportent sur ceux installés sous forme de plugins. Au niveau du serveur ftp, tu as un dossier squelettes. Celui-ci contient touts les squelettes personnalisés par ton prédecesseur.

      Donc tu peux effacer le dossier squelettes (attention ! pas le dossier squelettes-dist), après avoir fait une sauvegarde. Après il faudra que tu vide le cache de SPIP et cela devrait marcher.

    • Le 5 juillet à 12:35, par Emilie En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Merci beaucoup, ça marche. J’y avais pensé mais je n’étais pas allée au bout de mon idée.

      Maintenant, il ne me reste qu’à comprendre l’utilisation du Menu.

      Merci pour l’aide apportée !

    Répondre à ce message

  • Le 14 novembre 2016 à 16:02, par robert46 En réponse à : Generic (thème SPIPr pour SPIPr-dist)

    Ok.

    Dans ce squelette, je n’ai laissé que

    1. <div class="liste long articles">
    2. <INCLURE{fond=liste/articles-resume,articles_exclus=#GET{exclus},env,ajax} />
    3. </div>

    Télécharger

    et alors je n’ai plus que les derniers articles classés anti-chronologiquement (et les autres en me servant des boutons en bas), et c’est ce que je voulais.

    Merci.

    Répondre à ce message

  • Le 14 novembre 2016 à 00:47, par robert46 En réponse à : Generic (thème SPIPr pour SPIPr-dist)

    Bonjour.

    J’ai installé en local le thème « Generic » et ça marche bien et il est « responsive », ce qui en fait tout l’intérêt, mais la page d’accueil affiche un article que je ne choisis pas. J’ai cherché comment il était arrivé là, mais je n’ai pas trouvé.

    Comment contrôler le contenu de la page d’accueil ?

    Je voudrai que seuls les derniers articles s’affichent.

    Merci d’avance.

    • Le 14 novembre 2016 à 10:23, par DD En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Dans le squelette par défaut de SpipR content/sommaire.html il y a cette boucle :

      <BOUCLE_art(ARTICLES){par hasard}{0,1}>
                      <INCLURE{fond=inclure/article-hero,id_article,env,ajax} />
                      #SET{exclus,#LISTE{#ID_ARTICLE}}
                      </BOUCLE_art>

      que tu peux adapter à tes besoins.

    Répondre à ce message

  • Le 27 août 2016 à 00:31, par Renee Picard En réponse à : Generic (thème SPIPr pour SPIPr-dist)

    Merci pour ce plugin. J’ai bien installé le plugin menus avec id : barrenav mais le squelette ne le prend pas en compte. J’aimerais avoir certaines rubriques avec ses articles en déroulant.

    • Le 5 septembre 2016 à 23:05, par Renee Picard En réponse à : Generic (thème SPIPr pour SPIPr-dist)

      Résolu avec une nouvelle installation et le menu deroulant fonctionne très bien sur toutes les tailles. Merci

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Massicot

    7 octobre 2015 – 70 commentaires

    Recadrez et redimensionnez vos images directement dans l’espace privé de SPIP ! Inspiré par le plugin photospip, ce plugin plus minimaliste permet de recadrer et redimensionner les images dans l’espace privé de SPIP. Une fois le plugin installé (...)

  • Plugin « masquer »

    7 juillet 2010 – 26 commentaires

    Ce plugin permet de masquer sur le site public un contenu auquel le mot-clé « masquer » a été attribué. Le contenu, rendu invisible sur le site public, est cependant toujours présent et accessible à vos visiteurs si vous leur donnez le bon lien. Il (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1377 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Einsteiniumist (Squelette)

    23 avril 2013 – 80 commentaires

    Un squelette principalement conçu pour les sites de type blog et portfolio. Présentation : Adaptation pour Zpip du thème Wordpress Einsteiniumist conçu par Padd Solutions. Voir une démo du thème et du squelette Einsteiniumist. Ce squelette (...)

  • LESS pour SPIP : Less-CSS (anciennement LESSpip)

    5 novembre 2010 – 46 commentaires

    Less-CSS (Anciennement LESSpip) est un plugin intégrant facilement le logiciel LESS dans SPIP. LESS est une extension de CSS ajoutant les variables, les classes, les opérations, les imbrications au langage. Facilitant ainsi l’écriture de (...)

Ça spipe par là