Marylou (thème)

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

Discussion

4 discussions

  • 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

  • spipfactory

    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

  • 3

    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

    • 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.

    • 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

    • 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

  • Ouah super !

    Merci ! ( pour le lien du tuto aussi ).

    Très joli !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom