SPIP-Contrib

SPIP-Contrib

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

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

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

Japibas, squelette responsive

11 octobre 2013 – par AMBG – 85 commentaires

32 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 7 janvier à 12:49, par Régis D En réponse à : Japibas, squelette responsive

    Je n’arrive pas à afficher les articles syndiqués de sites extérieurs référencés et syndiqués.
    Ils devraient s’afficher en bas de la page d’accueil à la rubrique « nouveautés sur le web ». Merci pour votre aide.

    Répondre à ce message

  • Le 22 décembre 2016 à 12:33, par Ananda En réponse à : Japibas, squelette responsive

    Merci pour ce partage, mais pour ma part, grosse cata, quand je l’utilise pour mon site.

    Mise en page très farfelue, photos géantes, mais il faut dire que j’utilise bcp les tableaux.

    Et sur Iphone et Ipad, idem pour la cata !!

    Répondre à ce message

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

Répondre à cet article

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 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

  • Réservation d’événements

    16 mars 2015 – 206 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Agenda 2.0

    3 novembre 2008 – 1069 commentaires

    Voici la version pour SPIP 2.0 du Plugin Agenda pour SPIP 1.9.2, avec une interface remaniée pour encore plus de plaisir. Pour une documentation concernant l’utilisation d’Agenda 3 pour SPIP 3, veuillez pour l’instant vous référer à SPIP 3, Agenda (...)

  • Indexer : Installation et Configuration

    6 octobre 2014 – 39 commentaires

    Introduction Pour comprendre l’intérêt du plugin, nous invitons à lire l’article suivant Indexer : Introduction. Le fonctionnement de la boucle SPHINX est expliqué dans cet article : Indexer : La boucle SPHINX. La suite de l’article aborde (...)

  • GIS 4

    11 août 2012 – 1313 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 (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2058 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)