SPIP-Contrib

SPIP-Contrib

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

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

  • Indexer : La boucle SPHINX

    29 juin 2015 – commentaires

    Avant de commencer Pour comprendre l’intérêt du plugin, nous invitions à lire l’article suivant Indexer : Introduction. La configuration et l’installation du plugin sont expliquées dans l’article suivant : Indexer : Installation et Configuration (...)

  • Japibas, squelette responsive

    11 octobre 2013 – 85 commentaires

    Japibas est un squelette responsive, multilingue (français, anglais et espagnol), dont l’habillage conviendrait à un site de type blog ou webzine. Le graphisme est inspiré du template Wordpress Japibas réalisé par Jesper Johansen et distribué sous (...)

  • Wordpress 2 SPIP

    26 mars 2012 – 25 commentaires

    Que fait Wordpress 2 SPIP Il importe un site Wordpress 3.3.1 dans un site SPIP 2.1.12 vierge. Les deux sites doivent être sur la même base de données et les tables Wordpress doivent commencer par wp_ (cas d’une installation Wordpress par défaut). (...)

  • Photoswipe

    18 septembre 2016 – 17 commentaires

    Une lightbox javascript responsive. PhotoSwipe est une boîte multimédia — comme la Mediabox installée en série avec SPIP — qui permet de zoomer à la taille réelle des images et qui gère intelligemment les légendes. Le plugin est basé sur la librairie (...)

  • Spip2Spip

    21 février 2008 – 157 commentaires

    Spip2spip permet de synchroniser le contenu de plusieurs sites SPIP entre eux en étendant le principe de la syndication thématique. Les articles d’un SPIP sont récopiés d’un site à l’autre en conservant leur formatage (...)