Squelette Sandwater

Attention ! Cette contribution modifie des fichiers du noyau de SPIP !

Même si elle a été testée par plusieurs utilisateurs nous ne pouvons garantir qu’il n’y aura pas d’effets secondaires dommageables sur votre SPIP. Conservez toujours les fichiers d’origine pour pouvoir revenir au noyau originel.

De plus, elle n’est compatible qu’avec une version précise de SPIP et sera perdue à la prochaine mise à jour : vous devrez donc recommencer.

Le squelette Sandwater est un squelette de type généraliste qui propose une navigation par onglets ainsi qu’une présentation sur 3 colonnes. La navigation se trouve dans les colonnes centrale et de droite, cette dernière permettant essentiellement la participation des visiteurs.

Ca fait déjà un petit moment que j’utilise SPIP avec plaisir et je voulais apporter ma petite pierre à l’édifice. Je me suis donc fait plaisir à créer ce squelette et j’espère qu’il pourra vous être utile pour certains de vos projets.

-  Valide et testé sur : SPIP 1.9.2 c
-  Auteur : Gilles TRAN
-  Licence : GPL
-  Utilisation : Débutant, Intermédiaire
-  Surcharge Core : fichier Extra (Il n’est néanmoins pas obligatoire de valider le plugin Champs homonymes et son extension)

Ce squelette est axé sur 3 colonnes et comprend :

-  Une navigation par onglets (horizontale)
-  Une navigation et des encarts pour une participation des visiteurs en colonne de droite
-  Les contenus (textes) en colonne de gauche
-  Une navigation croisée en colonne centrale

En voici une capture d’écran :

Pour permettre son utilisation voici les plugins qui y ont été ajouté :

-  Champs homonymes + extension, le champ homonymes permet la gestion des titres des onglets
-  Notation des articles
-  Thickbox2

Notation et Thickbox2 permettent d’ajouter des fonctionnalités agréables à la présentation des articles.

J’espère pouvoir ajouter d’autres plugins bientôt et faire évoluer ce squelette avec le temps.

Ce squelette nécessite l’ajout de mots-clés pour la gestion de l’apparition de certains contenus dans les pages. Voici ce qu’il faut faire :

Configuration :

Après avoir uploadé les fichiers et validé les plugins il vous faudra créer un nouveau groupe de mots-clés. Nommez le : « mise en page » et créez dedans les 3 mots clés suivants : « alaune », « onglet » et « unerubrique ».

Gérez vos onglets :

Pour ajouter un onglet à la navigation, il vous suffit d’ajouter le mot-clé à la rubrique de votre choix. Si votre titre de rubrique est trop long, ce qui risque souvent d’être le cas, éditez votre rubrique et utilisez le champs : « Nom court pour navigation » disponible en bas du formulaire de modification de rubrique (Il va de soit que si votre rubrique est vide, l’onglet n’apparaitra pas).

Affichez votre "une" :

Pour afficher le petit encart bleu dans la colonne centrale sur votre page d’accueil : pour cela ajoutez le mot-clé « alaune » à une brève, un article ou un site.

Affichez aussi une « une » par rubrique

C’est le même fonctionnement que pour la une de la page d’accueil, ajouter ici le mot-clé « unerubrique » à une brève, un article ou un site.

Caractéristiques techniques :

Ce squelette utilise des fonctionnalités javascript fournies par la librairie jQuery, installée en standard sur SPIP, un choix judicieux grâce auquel on peux se permettre de bénéficier de fonctionnalités simples, efficaces et en perpétuelle évolution des plugins proposés sur jquery et dont certaines extensions sont intégrées au squelette dont notamment :

-  jQuery Corners dont le plugin initial a été créé par Dave Methvin
-  un menu vertical inspiré du plugin Accordion
-  une galerie Thickbox pour la gestion des images d’articles (portfolio Spip article)

Pour les graphistes avertis et patient vous pouvez éventuellement changer les codes couleurs pour adapter le squelette à vos besoins.

L’interface graphique tourne autour de 7 couleurs dont 5 beiges et 2 bleus (ainsi que blanc et noir) et quelques gifs/jpeg/png facilement modifiable.

Pour vous donner une idée d’un autre thème possible autour de ce jeu de squelette vous pouvez aussi visualiser le thème : Gazonrose encore en cours de développement.

Discussion

10 discussions

  • 1

    Bonjour,

    Merci pour ce site, ainsi que les squelettes...
    je débute avec SPIP et je suis en train de réaliser ce site : http://www.duffyducks.com/spip

    j’aimerais savoir comment je peux faire pour :
    1- Tout mettre sur une seule colonne
    (alaune en bleu en tête de colonne, et la suite dessous)
    2-Modifier la largeur de colonne pour prendre toute la largeur restante
    3-Suppression de « Les derniers sites » ou déplacement en dessous des menus de droite

    dernier point : pour faire référence à l’auteur de ce squelletes, je vais rajouter une rubrique « mentions légales » avec un lien vers squelletes.com afin de remplacer ce que j’ai supprimé dans pied.html

    Merci d’avance pour les réponses

    • Bonjour,

      Je suis allé faire un tour sur votre site et je voudrais savoir si vous avez adapté le code du menu déroulant.
      En utilisant le inc-menu.html du squelette sandwater, lorsqu’on clique sur une rubrique contenat des sous rubrique, le menu se déroule laissant apparaitre les sous rubriques mais cela n’ouvre pas la rubrique.

      Suis-je clair ?
      Merci pour votre réponse,
      Pascal

    Répondre à ce message

  • Je suis en train d’utiliser cet squelette, mais on peut pas afficher les mots-clé (c’est super important pour notre site). Comment faire ?

    Répondre à ce message

  • bonjour,
    je vous remercie pour votre squelette que je trouve très beau et que j’utilise avec plaisir.
    tout se passe bien, je n’ai aucun problème. néanmoins j’aurais 2 questions :
    -  lorsque j’écris un article, je remplis le champ « descriptif rapide ». or ce descriptif rapide n’apparaît nul part (pas non plus dans la recherche, rien). est-ce normal ? aurais-je loupé une étape ? j’ai pourtant bien tout activé.
    -  j’ai changé la bannière (fd_header.gif) par une image d’une autre couleur. or la zone cliquable de chaque onglet est un rectangle de couleur beige, qui apparaît lorsqu’on change la bannière (beige) d’origine et qui ne fait pas très beau. est-il possible de rendre ces rectangles transparents ? plus petits ? arrondis ?

    je vous remercie pour votre squelette et vos réponses.

    Répondre à ce message

  • 1

    Bonjour,
    Superbe travail !
    Et quelle accessibilté !
    Bravo et Merci !
    Néanmoins, j’ai besoin d’un peu d’aide car je ne parviens pas à rendre le menu par onglet transparent.
    Les onglets sont encadrés, par dessus la photo de fond, par un cadre beige rectangulaire !
    Est-il possible de rendre ce cadre de fond beige transparent ? Si oui comment :-) ?
    Merci encore pour la qualité de votre travail !

    • klelugi

      Salut,

      Le menu est malheureusement codé d’une façon qui ne permet pas d’avoir des angles transparents.

      Néanmoins, je crois qu’il est possible de faire des changements mineurs pour y parvenir, il me semble que suivre le tutoriel sur les portes coulissantes pourrait t’apporter une réponse.

      Bon courage

    Répondre à ce message

  • 6

    Bonjour,

    J’ai commencé à installer et à tester en local votre super squelette et je m’interroge sur un élément du menu de la colonne de droite. Sur squelette.com j’ai vu qu’il y avait ce qui ressemble à une newsletter sous l’intitulé « Nouveaux squelettes » avec abonnement/désabonnement.

    Comment activer cette newsletter ? S’agit-il d’un plug-in spécifique ?

    D’avance merci

    • Il s’agit du plugin : Spip-liste qui ne fait pas parti de la configuration du squelette Sandwater de base, mais qu’il est toutefois très simple de mettre en oeuvre.

      La démarche est expliquée en détail sur le site éditeur de ce plugin très complet.

    • Bien compris, j’avais une grosse présomption sur la chose. Merci beaucoup.

    • Cela fonctionne-t-il avec un autre plugin de liste de diffusion comme CleverMail pour SPIP ?

    • Hello !!!

      Je viens d’installer SPip List sur Sandwater, le probleme, c’est que le bloq est beaucoup plus grand que l’espace qui lui est attribué ! Conclusion, selon les écrans, soit je doit faire défiler ma page à l’horizontale, soit ca renvoit tout en bas, mais dans tout les cas ma mise en page part dans tout les sens !
      (cf : http://grains.de.sel.free.fr )

      J’ai testé dans plusieurs page du squelette et du pluggins de modifier la largeur du bloc, mais ça n’y fait rien !
      Quelqu’un d’autre a t-il eu ce problème ?
      Quelqu’un a-t-il une solution ?

      Merci d’avance !

      Laure

    • Hello !!!

      Je viens d’installer SPip List sur Sandwater, le probleme, c’est que le bloq est beaucoup plus grand que l’espace qui lui est attribué ! Conclusion, selon les écrans, soit je doit faire défiler ma page à l’horizontale, soit ca renvoit tout en bas, mais dans tout les cas ma mise en page part dans tout les sens !
      (cf : http://grains.de.sel.free.fr )

      J’ai testé dans plusieurs page du squelette et du pluggins de modifier la largeur du bloc, mais ça n’y fait rien !
      Quelqu’un d’autre a t-il eu ce problème ?
      Quelqu’un a-t-il une solution ?

      Merci d’avance !

      Laure

    • Salut,

      Le probleme vient du fait que tu ajoutes une div avec la classe « cadre » que tu as d’ailleurs définie dans la page html elle-même, cette class à une largeur de div fixée à 500px d’ou ton problème.

      Il n’est pas nécessaire de faire une div class=« cadre » pour obtenir des coins arrondis, il te suffit de rajouter une ligne dans le fichier :

      /squelettes/js/ready.js

      en l’occurence ici :

      $(’.cadre’).corner() ;

      devrait convenir si tu supprimes le style dans le corps de page :

      .cadre {
      		/*border: 1px #000000 solid;*/
      		background-color:#FFFFFF;
      	        text-align: justify;
      	        width:500px;
      	        padding: 10px;
      	        margin-left: auto;
      	        margin-right: auto;
      	        margin-bottom: 10px;
      		-moz-border-radius: 6px;
      		border-radius: 6px;
      	}

    Répondre à ce message

  • gérard

    Bonjour,

    Premièrement BRAVO !
    Secundo : une petite question. je suis en train de l’installer dans une école primaire. Les élèves m’ont fait part de leurs remarques après utilisation. Il mentionne que lorsqu’ils insèrent une image dans le châpo de l’article elle apparait bien lorsque l’on clique sur l’article en question. Par contre, elle n’est pas présente lorsqu’on met cet article à la UNE ou même dans la page d’accueil. Seul le chapô apparaît mais sans l’image.
    Y-a-t-il une solution pour faire apparaître l’image avec le châpo tout le temps, même lorsqu’il est visible dans les parties "liste des derniers articles parus’ ou « autres artiles récents », etc....
    merci
    gérard

    Répondre à ce message

  • Bonjour, je suis novice sur spip et ses squelettes. J’ai installé le
    squelette Sandwater car je cherchais quelque choses de simple à
    utiliser.
    Mon problème est que les images de fond ne s’affichent pas et lorsque
    j’ajoute une image à un article, elle ne s’affiche pas non plus.
    Je précise également que j’ai installé tout ça de deux fois, sur un
    site distant et en local (pour effectuer des essais) avec easy php 1.8
    (tous droits autorisés sur les répertoires).

    Merci d’avance pour vos résponses.

    Répondre à ce message

  • 2
    TicTicTic

    Bonjour et encore bravo pour ce jeu de squelettes très complet et plutôt jolis ;-)

    Je me suis collé à la personnalisation et au relooking de la charte graphique et j’ai un petit souci pour comprendre comment sont gérés les coins arrondis des boîtes de texte. Je pensais qu’il s’agissait d’une image, mais je ne vois rien dans la CSS qui y fasse allusion ni dans les fichiers livrés pour ces squelettes. Serait-ce des attributs particuliers aux CSS ? Précisons que je ne suis pas un grand connaisseur de la question, alors je ne demande qu’à apprendre !

    Est-ce que vous pourriez me renseigner ?

    Merci de votre aide.

    • Les coins arrondis sont gérés par javascript et non par css. Pour intervenir sur les angles arrondis il faut donc modifier le fichier :
      ready.js qui selectionne les id des conteneurs sur lesquels il faut appliquer les coins arrondis.

      Si tu veux modifier les angles il faut donc modifier les propriétés de la fonction :

      corner()

    • TicTicTic

      Ah, c’est donc ça ! Je vais aller mettre le nez dans ready.js et corners.js qui gère la couleur des coins si je ne m’abuse... Le souci, c’est que je suis un cave en javascript... Mais bon, je pense que c’est faisable.

      En tout cas, mille merci pour ta réponse rapidissima ;-)

    Répondre à ce message

  • 6

    J’ai installé cet excellent squelette mais je n’arrive pas à changer le formulaire d’inscription qui invite à proposer des squelettes ... ce qui n’est pas l’objet de mon site . J’ai ouvert tous, mais tous les fichiers sans trouver la phrase que je voudrais supprimer. Il semble que le fichier inscription et le java qui l’anime appelle un message... mais ou est ce message. Une idée ? Merci

    • Salut,

      Je pense qu’il s’agit d’une phrase que tu pourras trouver dans les fichiers de langue situés dans le répertoire « squelettes » >> « lang » >> local_fr.php

      Bon courage

    • Merci du conseil. J’ai trouvé mais il me reste un autre mystère à éclaircir sur ce sympathique squelette. Le bloc « Ajouter aux favoris » ne devrait il pas être un lien dynamique qui permettrait une action ? Comment faire pour le mettre en oeuvre ? Merci encore.

    • Je pense que si tu veux un lien dynamique pour les favoris tu peux remplacer la fonction : favoris, qui se trouve dans le head de la page par ceci par exemple (pour le squelette rubrique) :

      function favoris() {
      if ( navigator.appName != 'Microsoft Internet Explorer' )
      { window.sidebar.addPanel("[(#TITRE|supprimer_numero|textebrut)] [(#NOM_SITE_SPIP|textebrut)]","#URL_SITE_SPIP/#URL_RUBRIQUE",""); }
      else { window.external.AddFavorite("#URL_SITE_SPIP/#URL_RUBRIQUE","[(#TITRE|supprimer_numero|textebrut)] [(#NOM_SITE_SPIP|textebrut)]"); } }
    • Je viens d’essayer de remplacer cette partie du code dans rubrique html mais ça ne change rien. Qu’est ce ’ajouter aux favoris" est censé faire ? Quelque chose m’échappe...

    • Cela permet à tes visiteurs de marquer cette page en favoris. Mais attention, cette fonctionnalité ne fonctionnera que si tu as javascript activé (Je n’ai malheureusement pas pris le temps de coder cela de façon non-obstrusif, peut-être une évolution future à prévoir...).

    • Peut être que ça ne marche qu’avec IE or je suis sur Mac et le modèle trop ancien de ce navigateur n’est pas vraiment utilisable. J’ai essayé de changer le nom (navigator.appName != ’firefox’ ) par exemple .. mais rien ne se passe à http://www.maxfilm.org/ . Pas grave. Je pensais que c’était un menu déroulant ou autre chose que je serais bien incapable de coder moi même. Merci encore pour cet excellent squelette.

    Répondre à ce message

  • 2

    Un squelette excellent, mais il est dommage que la syndication RSS ne soit pas proposée par défaut. Une évolution à prévoir ?

    • Salut,
      qu’entends-tu par syndication RSS ?

      -  un lien dans la page pour accéder au flux (backend) ?
      -  l’affichage des flux RSS de sites syndiqués ?

    • je pensais à un lien dans la page pour accéder au flux (backend).

    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