SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 194 visiteurs en ce moment

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

Japibas, squelette responsive

11 octobre 2013 – par AMBG – 93 commentaires

34 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 17 avril à 13:25, par Amire En réponse à : Japibas, squelette responsive

    Bonjour,

    J’utilise Spip 3.1 le plugin lecteur multimédia. Le problème c’est que la vidéo déborde sur les petits écrans une partie de l’écran est caché et ça influence aussi le conteneur du site. J’ai appliqué des conseils que j’ai trouvé sur ce site.. Sans aboutir à la résolution de mon problème. Vos conseils seront les bienvenu. Merci.

    Répondre à ce message

  • Le 15 avril à 14:49, par Amire En réponse à : Japibas, squelette responsive

    Bonjour,

    J’utilise « Menu-deroulant » avec spip 3.1 et les squelettes Japibas pour un site multilingue.

    Chaque langue est représenté par une rubrique principale, exemple (Français) et les sou rubriques de la même langue. Le problème c’est quand je suis sur la page du français par exemple et je clique sur l’icône « English » qui représente la rubrique « anglais » et ses sou-rubrique. Une partie de la page (aside , le formulaire de contact reste en français) j’ai fais des essais avec le critère lang mais ça ne change rien. Voilà si vous pouvez aider svp. Merci.

    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 ?

    • 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

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

  • SPIP-Bible

    25 janvier 2010 – 90 commentaires

    Permet de citer rapidement des extraits de la Bible en utilisant un modèle dans le texte d’un article.

  • Pour un fonctionnement communautaire efficace dans la communauté SPIP

    24 mai – commentaires

    Où l’on propose de tester des nouvelles façons de prendre des décisions et d’avancer collectivement sur des projets SPIP, de manière transparente, en impliquant la communauté, et en étant plus accueillants pour les nouvelles personnes. Tout ça dans la (...)

  • Mailshot

    16 janvier 2013 – 258 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • Configurer Mailjet

    25 avril 2016 – 11 commentaires

    N’hésitez pas à relire le préambule de cette rubrique avant de créer un compte sur une plateforme tierce . Après avoir créé votre compte Étape 1 : Ajouter votre domaine Aller sur la page : https://app.mailjet.com/account/domain Suivre les (...)

  • GIS 4

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

Ça spipe par là