SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 252 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

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 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, (...)

  • Adaptive Images

    15 novembre 2013 – 69 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, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là