SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 178 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 – 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.

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 15 juillet 2016

Retour en haut de la page

Vos commentaires

  • Le 14 novembre à 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 à 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 à 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 à 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 à 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

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • CKeditor 3.0

    4 octobre 2009 – 1217 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1284 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIPr

    23 mars 2015 – 75 commentaires

    SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP. Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide. Documentation source : (...)

Ça spipe par là