SPIP-Contrib

SPIP-Contrib

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

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

Accueil > Thèmes > Marylou (thème)

Marylou (thème)

3 mai 2012 – par Yves Costiou – commentaires

8 votes

Présentation

Le thème Marylou a été construit sur la base d’un tutoriel de Mary Lou (d’où le nom du thème) publié sur codrops.

Merci à l’auteur pour son tutoriel très instructif, et j’ai tellement aimé la démo que j’en ai fait un thème

Ce tutoriel illustre les possibilités de CSS3, notamment en matière d’animation, de détection de la taille d’écran.

Le thème comporte 6 images de fond qui varient sans autres déclarations que celles de la feuille de style.

Les images fournies (licence CC BY-SA 2.0) sont de Mark Sebastian :
http://www.flickr.com/photos/markjsebastian/
http://www.markjsebastian.com/

Pour plus de lisibilité, ces images sont regroupées dans le dossier backgrounds et sont nommées uniquement par un chiffre (ordre d’apparition).

Les animations en CSS3 ne sont pas supportées par l’ensemble des navigateurs. Je vous invite à consulter le tableau suivant (issus de caniuse.com) pour vous en rendre compte :

Démonstration

http://zpip.spip.org/?var_theme=zpip-1/marylou

Captures

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

Dernière modification de cette page le 20 juin 2014

Retour en haut de la page

Vos commentaires

  • Le 14 juin 2013 à 13:19, par jawi En réponse à : Marylou (thème)

    Bonjour, je voudrais savoir s’il faut copier les dossiers et fichiers du thème dans le dossiers squelettes, donc je n’arrive pas à le faire marcher pour l’instant. C’est celle-là la solution ? Merci d’avance à tous

    Répondre à ce message

  • Le 5 janvier 2013 à 11:36, par spipfactory En réponse à : Marylou (thème)

    Bonjour

    fortement intéressé par ce thème pour réaliser un espace généalogique & famillial
    j’aurai besoin de 15 images dans l’animation ( la photographie ayant été inventé vers 1780 a peu prés)

    donc 15 images remonte sur la branche Arrière grand ...

    le pb c’est que je n’arrive pas a regler la tempo

    http://pastebin.com/C95Expgm,

    vous voyez pas comment faire merci

    Répondre à ce message

  • Le 29 juin 2012 à 10:56, par AlainF En réponse à : Marylou

    Bonjour,

    merci pour ce travail, je suis fier d’avoir pu l’adapter à ce site http://www.anim-16.com

    Ce thème est parfait pour faire comprendre que si certains sites semblent fades, c’est peut-être que certains décideurs n’osent pas se lâcher et ne savent pas laisser une certaine liberté aux webmestres.

    Utilisateur de Spip depuis 2005, bravo à tous.

    Alain

    • Le 29 juin 2012 à 11:10, par Yves Costiou En réponse à : Marylou

      Bonjour,

      heureux que le thème vous convienne. Par contre, je renouvelle ma mise en garde concernant l’utilisation des animations CSS3 : Tous les navigateurs ne les supportent pas encore.

    • Le 29 juin 2012 à 11:41, par AlainF En réponse à : Marylou

      Sous IE9 pas de changement de fond, j’ai donc choisi mon dernier background en fonction. Et c’est suffisant en attendant...

      Mais avec le bouton d’affichage de compatibilité, j’ai un soucis pour afficher l’avertissement :

      <!--[if lte IE 8]>
                      <style type="text/css">
                      #noiem { background: #fefefe[ url((#CHEMIN{noie.gif})) no-repeat 8px 8px; padding-left: 80px]; border: 3px solid #2D96E7; color: #fff; font-size: 14px; }
                      #noiem h1 { margin: 10px; padding: 0; color: #fF2222; font-size: 26px; font-weight: bold; }
                      #noiem p {  font-size: 20px; margin: 10px; padding: 0; }
                      #noiem p a { font-weight: bold; color: #006; text-decoration: underline; }
                      </style>
                      <div id="noiem">
                      <h1>Attention, votre Internet Explorer n'est pas à jour !</h1>
                      <p>Pour naviguer de façon plus satisfaisante sur ce site et le reste du Web, nous vous recommandons d'<strong>actualiser votre <a href="http://www.microsoft.com/france/windows/internet-explorer/">Internet Explorer</a></strong> ou d'essayer un autre navigateur populaire comme <a href="http://www.mozilla-europe.org/fr/firefox/">Firefox</a>, <a href="http://www.google.fr/chrome">Chrome</a>, <a href="http://www.opera.com/">Opera</a> ou <a href="http://www.apple.com/fr/safari/">Safari</a>.</p>
                      </div>
                      <![endif]-->

      L’avertissement s’affiche bien et aussitôt le style css change ?

      (J’ai choisi d’insérer ce code dans « squelettes/contenu/page-sommaire.html » avec Zpip, plutôt que de mettre le plugin NOIE)

      Malgré le changement de couleur dans le style, l’effet est toujours annulé et je m’embête avec firebug lite pour trouver la faille !

      Si quelqu’un connait une direction, par avance, merci

    • Le 29 juin 2012 à 11:51, par AlainF En réponse à : Marylou

      Je viens simplement de déplacer les commandes de style dans habillage.css et tout va bien, désolé du dérangement.

    Répondre à ce message

  • Le 22 mai 2012 à 12:54, par Shnoulle En réponse à : Marylou

    Ouah super !

    Merci ! ( pour le lien du tuto aussi ).

    Très joli !

    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

  • ScolaSPIP 4

    19 janvier 2016 – 163 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 (...)

  • Vérifier ses plugins avant un changement de version de SPIP

    28 mars – commentaire

    Lister la compatibilité des plugins avec une autre version de SPIP Ce plugin est le successeur du plugin Vérifier ses plugins pour le passage à SPIP 3.1. Il permet de vérifier si ces plugins sont compatibles avec des versions plus récentes de (...)

  • bigfoot

    16 juin 2015 – 58 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 (...)

  • Mailshot

    16 janvier 2013 – 254 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 (...)

  • SkelEditor 2.0

    1er mars 2010 – 74 commentaires

    La version remaniée et enrichie du plugin, pour SPIP 2.1, qui vous permet d’éditer votre squelette directement en ligne sans passer dans le FTP Ce plugin vous permet d’éditer les fichiers du squelette courant depuis l’interface privé. Cela peut (...)