SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 251 visiteurs en ce moment

Accueil > Squelettes > Squelettes pour blog > Japibas > Japibas, squelette responsive

Japibas, squelette responsive

11 octobre 2013 – par AMBG – 82 commentaires

30 votes

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 licence GNU.

Voir le site de démo.

Téléchargement

Lien de téléchargement depuis la zone :
http://files.spip.org/spip-zone/japibas.zip

Installation et dépendances

Le squelette se présente sous forme de plugin et s’installe donc comme tous les plugins

Il intègre le plugin Menu déroulant 2 qu’il faudra également installer.

Pour s’assurer que tout fonctionne, on pensera à vider le cache.

A propos du layout

Le plugin reprend les squelettes et css de la dist et y ajoute de nouvelles classes. Ces dernières se trouvent pour l’essentiel à la fin du document css/layout.css.

Iconographie

Les icones auteur, date, messages ainsi que les boules de pagination sont affichées par une police de caractères.

La police utilisée est spip-icons.ttf (avec sa version eot) produite par nos soins et distribuée sous licence GNU. Elle se trouve dans le dossier css/fonts.

Ce choix permet de modifier l’aspect des icones (dimensions, couleurs etc.) sans passer par un logiciel d’édition d’images.

La classe css qui la gère est (css/layout.css) :

  1. .spip-icons {
  2. font-family: spip-icons !important;
  3. font-size: 1.8em;
  4. color: #000;
  5. vertical-align: middle; }
  6.  
  7. .spip-icons:hover {
  8. color: #8CA429; }

Télécharger

Et l’appel dans le squelette :

  1. <span class="spip-icons">A</span>

affichera l’icone .

  1. <span class="spip-icons">H</span>

affichera l’icone .

Tableau des correspondances icones > caractères.

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

Dernière modification de cette page le 13 janvier 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 14 juin à 16:09, par Yann En réponse à : Japibas, squelette responsive

    Le top serait que le plugin soit paramétrable dans l’interface d’administration : choix des couleurs, affichage ou pas des icônes de réseaux sociaux et renseignement des adresses correspondantes, etc... Ce serait beaucoup plus simple que d’aller farfouiller dans les css... surtout quand on n’y connait rien... :-)

    Répondre à ce message

  • Le 24 avril à 18:01, par Théo En réponse à : Japibas, squelette responsive

    Bonjour,

    A la racine j’ai un dossier : squelettes de japibas -> inclure -> footer.html

    A l’intérieur de ce fichier je n’arrive pas à donner un lien vers une page Facebook.

    A la place de la ligne :

    1. <img src="#CHEMIN{img/facebook.png}" alt="facebook" class="image_opacity" />

    J’ai mis :

    1. <a href="https://www.facebook.com/mapage"><img src="#CHEMIN{img/facebook.png}" alt="facebook" class="image_opacity" /></a>

    mais ça ne marche pas. C’est pourtant le bon fichier ?

    Répondre à ce message

  • Le 19 mars à 15:03, par Pierre COLLENOT En réponse à : Japibas, squelette responsive

    Bonjour,
    J’ai un souci au sujet de la taille des images.
    Comment faire pour que les images d’une page s’affichent à leur taille réelle, et pas à une taille agrandie ?
    Par exemple, sur cette page de mon site, les images ont une taille réelle de 80 x 77 px, et elles s’affichent en 500 x 481, ce qui donne un résultat catastrophique.
    J’ai vu que les images sont « class=ajustable ». Je suppose que c’est ce paramètre qui pose problème.
    Comment peut-on régler ce paramètre pour que les images conservent au maximum leur taille d’origine, et se réduisent éventuellement selon la taille de l’écran ?

    • Le 21 mars à 00:29, par Pierre COLLENOT En réponse à : Japibas, squelette responsive

      Je complète mon message au sujet de la taille d’affichage des images par une précision.

      Les images qui s’affichent en taille 500px au lieu de leur taille réelle sont celles qui sont situées dans les cellules d’un tableau spip (délimitées par le caractère | ).

      Celles qui sont dans une zone de texte standard s’affichent correctement.

      Comment faire pour que les images situées dans les cases d’un tableau s’affichent à leur taille réelle ?

    Répondre à ce message

  • Le 17 mars à 00:38, par Pierre COLLENOT En réponse à : Japibas, squelette responsive

    Bonjour

    Je cherche comment ajouter une image en bandeau supérieur de toutes les pages (pour remplacer le logo du site), image qui devrait faire toute la largeur de la page.
    Je suppose qu’on doit la placer dans le fichier « header » et faire un INCLURE, mais j’ai un doute.
    Le fichier header du plugin est fourni vide

    Quelqu’un peut-il m’indiquer
    -  si c’est bien dans le fichier « header » qu’il faut placer cette image
    -  quelle syntaxe utiliser pour qu’elle occupe toute la largeur de la page, et soit aussi « responsive » ?

    Je viens d’installer Japibas sur mon site, et je suis très content du résultat.
    Bravo pour ce plugin bien conçu.

    Répondre à ce message

  • Le 31 décembre 2015 à 08:11, par pgiron En réponse à : Japibas, squelette responsive

    Le site de démo ne fonctionne plus...

    Répondre à ce message

  • Le 6 septembre 2015 à 14:48, par flouvel En réponse à : Japibas, squelette responsive

    Bonjour,
    j’ai créé un jeu de squelettes à partir de semantic-ui.com (à partir de qcq composants de semantic-ui qui n’entraient pas en collision avec spip).
    Que pensez vous de ce choix ?
    Mon jeu de squelettes souffre de manques certains, après avoir « gulper » :
    -  je dois modifier la css pour supprimer le reset « *, » pour l’inclure séparément, et différemment, selon les squelettes sinon le plugin geoportail ne marche pas
    -  #EDIT ne marche pas (?)
    J’aurai aimé trouver une solution pour finir de régler ces problèmes et proposer un « produit » bien fini, mais je ne trouve pas (le temps) et je ne sais pas si c’est possible.
    Je ne peux donc que, si cela intéresse, proposer ce que j’ai fait et indiquer les qcq modifs à faire pour à partir de semantic-ui, gulp, créer un jeu de squelette responsive pour spip.
    site : bleaulib.org
    [je post sur le forum Japibas, faute d’un forum général squelette responsive. J’ai essayé japibas, mais je m’en sortais moins bien avec les images svg]

    • Le 15 novembre 2015 à 10:23, par flouvel En réponse à : Japibas, squelette responsive

      Rectification par rapport à mon message , #EDIT marche ,
      mais pour geoportail il faut bien mettre le reset *, à part .
      (il ya une nouvelle version de semantic ui , un jour peut être je parviendrai à proposer un produit bien fini à base de semantic ui, mais est-ce un bon choix ?...)

    Répondre à ce message

  • Le 25 juin 2015 à 10:00, par herensuge En réponse à : Japibas, squelette responsive

    Chers camarades.
    Je ne peux pas trouver où définir les adresses des icônes de Twitter, Google +, etc.
    Quelqu’un peut me aider ?
    Merci !

    • Le 24 août 2015 à 21:41, par Magic Beurt En réponse à : Japibas, squelette responsive

      Les liens vers Twitter, Facebook, Google+, etc..... se trouvent dans plugins/japibas/inclure/footer.html, à partir de la ligne 78.

    • Le 19 septembre 2015 à 00:29, par herensug-e En réponse à : Japibas, squelette responsive

      merci beaucoup

    Répondre à ce message

  • Le 9 février 2014 à 18:15, par Patrick En réponse à : Japibas, squelette responsive

    Bonsoir,
    J’ai réussi à changer le vert du menu dans le menu des rubriques (ligne 405 du layout.css), mais comment peut on changer le bleu de la rubrique survolée ?
    Merci pour ce plugin.

    • Le 18 mai 2014 à 23:04, par L Verdier En réponse à : Japibas, squelette responsive

      Bonsoir,
      Merci pour ce squelette. J’ai aussi modifié la ligne 405 de layout.css :


      .menu_select
      display : none ;
      padding : 1% 1% 0 1% ;
      background : #a93434 ;
      color : #FFF ;
      border : 0 ;
      ...


      Mais le fond reste vert :-(. je ne comprends pas !

    • Le 19 mai 2014 à 07:01, par Patrick En réponse à : Japibas, squelette responsive

      Bonjour,
      Je me demande s’il ne s’agit pas d’une couleur système...
      Chez moi, ça reste bleu quelque soit le navigateur.
      Bonne journée

    • Le 20 mai 2014 à 08:23, par L Verdier En réponse à : Japibas, squelette responsive

      J’ai trouvé, il s’agit de la css typo ligne 319

    • Le 20 mai 2014 à 09:51, par L Verdier En réponse à : Japibas, squelette responsive

      Quelques informations complémentaires :
      -  Couleur Onglet actif : typo.css ligne 319
      -  Image fond fil ariane : back_vert.png
      -  Couleur fond entête : layout.css : 195, remplaçable par image : background : url(img/Entete.jpg) ;
      -  couleur survol menu : ligne6, a hover menuder.css

    • Le 8 août 2015 à 19:15, par Théo En réponse à : Japibas, squelette responsive

      Bonjour,

      Et pour changer le noir en tête de la page… j’ai cherché sur le fichier layout.css

      }

      .entete_noire1 {
         background: #000;
         width: 100%;
         padding: 1.25em 0 0 0;
         margin-bottom: 0;
         overflow: hidden; }

      (lignes 190 à 197) mais c’est sans effet sur #000. Cette couleur ne change pas.

      A défaut de changer la couleur, comment mettre une image en tête ?

      Merci d’avance si quelqu’un pouvait m’aider. Je galère :(

    Répondre à ce message

  • Le 24 mai 2015 à 12:17, par Théo En réponse à : Japibas, squelette responsive

    Oui, c’est un squelette « adaptatif » très souple et très bien fait.

    Juste pour info, j’aurais souhaité changer la couleur « noir » dans le bandeau d’en-tête ou bien y mettre une image (avec le plugin « Adaptive Images »).

    Où trouver le fichier à modifier ? et d’abord est-ce possible ?

    Merci des réponses.

    Répondre à ce message

  • Le 19 octobre 2013 à 18:57, par Tetralemme En réponse à : Japibas, squelette responsive

    Ce serait bien, un « plan du site »...

    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

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là