SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 199 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

  • Einsteiniumist (Squelette)

    23 avril 2013 – 81 commentaires

    Un squelette principalement conçu pour les sites de type blog et portfolio. Présentation : Adaptation pour Zpip du thème Wordpress Einsteiniumist conçu par Padd Solutions. Voir une démo du thème et du squelette Einsteiniumist. Ce squelette (...)

  • Plugin séances

    10 octobre 2010 – 85 commentaires

    Dans la gestion d’événements, il arrive d’avoir à mettre en rapport un spectacle (film, concert ou autre), un lieu et une date. Il est alors possible d’envisager plusieurs modes de présentation : pour un spectacle donné, les dates et lieux de celui-ci, (...)

  • Champs Extras 3

    16 janvier 2012 – 588 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaires

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)

  • Plugin Speedsyndic 2

    11 octobre 2010 – 24 commentaires

    Ce plugin est une version compatible spip 2.0.x / 2.1 du plugin Speedsyndic Note : Une bonne partie du texte ci-dessous a été pompé de cet article, expliquant la version précédente du plugin. je n’ai fait qu’adapter le code pour spip 2, ajouter une (...)

Ça spipe par là