SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 100 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 25 octobre 2017

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 ?

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

  • PHANTOM (HTML5UP)

    18 juillet – 11 commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • ScolaSPIP 3

    21 mai 2012 – 448 commentaires

    Un plugin-squelette personnalisable pour sites Web d’établissements scolaires

  • Formulaire d’upload en html5

    27 avril 2015 – 93 commentaires

    Un formulaire d’upload en html5 pour l’interface admin de SPIP. Ce plugin ajoute un système d’upload moderne à SPIP. Il peut être utilisé pour l’upload de masse. Ce système est basé sur dropzonejs. Utilisation Espace privé de SPIP Dans l’espace (...)

  • Passer un site SPIP sous https://

    23 février 2017 – 42 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – 20 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)