SPIP-Contrib

SPIP-Contrib

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

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

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

Japibas, squelette responsive

11 octobre 2013 – par AMBG – 91 commentaires

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

    • Le 22 mars à 19:03, par Amire En réponse à : Japibas, squelette responsive

      Salut Pierre ,

      A tu résolu le problème de la taille des images ? de mon coté le problème est seulement sur chrome v 57. Avec les pages en arabe donc écriture du droite vers la gauche !

    • Le 24 mars à 12:10, par Amire En réponse à : Japibas, squelette responsive

      Salut Pierre,

      J’ai une bonne nouvelle pour toi. Pour faire paraitre les images avec le code il faut aller à layout.css dans le dossier css (le bloc_logo_article) est modifier la largeur « width » comme ci-dessous :

      .bloc_logo_article
      position : relative ;
      float : right ;
      margin : 0 2% 2% 3% ;
      padding : 0 ;
      width : 50% ;
      height : auto ;
      border : solid 4px #FFF ;
      -moz-box-shadow : 0px 0px 5px 1px #cfcfcf ;
      -webkit-box-shadow : 0px 0px 5px 1px #cfcfcf ;
      box-shadow : 0px 0px 5px 1px #cfcfcf ;
      filter : progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=NaN, Strength=5) ;

    • Le 24 mars à 12:47, par Amire En réponse à : Japibas, squelette responsive

      c’est encore mieux comme çà :

      1. width: auto /* j'ai passé de 35% à auto pour mieux afficher le logo */
      2. height: 50%; /* j'ai passé d'auto' à 50% pour mieux afficher le logo */

      Télécharger

    Répondre à ce message

  • Le 21 mars à 19:21, par Amire En réponse à : Japibas, squelette responsive

    Bonjour,

    Merci pour ce travail. je ne novice dans ce domaine ; le squelette est bien multilingue. pour le sens de l’écriture il reste toujours de la gauche vers la droite même pour la langue arabe. Aussi en concernant les traductions d’article. comment faire pour les afficher avec les titres des articles svp ? Merci.

    • Le 21 mars à 20:40, par Amire En réponse à : Japibas, squelette responsive

      C’est bon pour les traductions, j’ai utilisé le plugin « Traduction d’articles autrement »

      Pour la personnalisation des squelettes : j’ai crée un dossier squelettes à la racine de mon site et j’ai mis dedans les dossiers et les fichiers à personnaliser en commentant les lignes que j’ai changé (pour se rappeler ultérieurement).

    • Le 22 mars à 14:37, par Amire En réponse à : Japibas, squelette responsive

      Je poursuis,la personnalisation

      j’ai envie de changer la taille du texte dans mes paragraphes. quelqu’un sait sur quelle feuille je fais çà, et s’il y a de l’aide pour personnaliser les fonds ça sera bien aussi. Merci.

    Répondre à ce message

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

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

  • bigfoot

    16 juin 2015 – 60 commentaires

    Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript. Le constat de l’auteur du script : Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de (...)

  • Le Couteau Suisse

    4 mai 2007 – 1790 commentaires

    Ce plugin propose d’introduire facilement de simples fonctionnalités supplémentaires à SPIP et qui s’avèrent rapidement indispensables ! Par exemple : le contrôle de nombreuses variables « cachées » de SPIP, des améliorations ou facilités typographiques, (...)

  • Cours SPIP 3 pour rédacteur

    15 février 2012 – 13 commentaires

    Apprendre à utiliser SPIP 3.1 en 16 pages Ce cours vise à devenir rapidement autonome sous le logiciel Spip pour publier soi-même ses contenus sur Internet. Il s’agit de la mise du jour du Mode d’emploi SPIP 2 pour rédacteur . Le document a été (...)

  • ScolaSPIP 4

    19 janvier 2016 – 166 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • iTwX Mobile v.3

    16 juillet 2012 – 48 commentaires

    Jeu de squelettes SPIP pour Mobiles, optimisé pour smartphones et tablettes.