SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 196 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > SoyezCreateurs > Personnalisation graphique du squelette SoyezCréateurs

Personnalisation graphique du squelette SoyezCréateurs

19 août 2009 – par RealET – 91 commentaires

18 votes

Il est possible de personnaliser l’affichage du squelette SoyezCréateurs de manière plus ou moins profonde.

Changement dans les couleurs via CFG

La page de CFG des couleurs de SoyezCreateurs : ecrire/?exec=cfg&cfg=soyezcreateurs_couleurs permet de changer largement les couleurs du site.

Faites vos essais...

Configuration des couleurs de SoyezCreateurs

Vous pouvez aussi utiliser des Jeux de couleurs pour SoyezCreateurs.

Logo et bannière du site

Le Logo du site est utilisé :

  • comme logo du site (des options de CFG permettent d’en préciser la position, voire de le masquer)
  • comme favicon du site
  • comme logo du flux RSS du site

Pour changer la bannière du site, il est possible

  • de choisir parmi les 3 proposées par défaut.
  • de dessiner sa propre bannière pour la placer dans le site

Une fois la bannière dessinée [1], il suffit de la placer comme logo de survol du site (via la page de configuration du site : ecrire/?exec=configuration.

Exemple : Grand Sud Animations

Le Logo du site est en particulier utilisé comme favicon du site.

Et le Logo de survol sert de bannière.

Exemple de logo et bannière d'un site

Attention : Si vous utilisez une bannière personnalisée, il faut que cette dernière intègre en « texte brulé » [2]

Bannière rotative

Il est aussi possible depuis la version 2.3.0 du squelette de disposer de plusieurs bannières pour le site, une nouvelle bannière tirée au hasard étant affichée à peut près à chaque nouvelle page (le cache de la bannière est à 1s).

Pour cela :

  • rendez-vous dans la page de gestion des mots clefs du site,
  • trouvez le groupe de mots clefs : _HeaderBanner
  • créez autant de mots clefs dans ce groupe que vous aurez de bannières
  • placez dans chacun de ces mots clefs vos bannières en tant que logo (normal) [3]

À noter : les bannière rotatives remplacent complètement l’éventuelle bannière unique du site qui aurait pu être définie dans la configuration du site.

Il est aussi possible :

  • d’affecter des bannières à une branche du site en mettant le mot clef de la bannière à la rubrique racine de la branche
  • de forcer certaines bannières à des pages spécifiques en mettant dans la « Bulle d’aide » le nom du template ciblé parmi :
    • Sommaire
    • Connexion
    • annuaire
    • Plan
    • InscriptionEvenement
    • mots_filtres
    • Liste_mail
    • ProposerEvenement
    • Sigles
    • Sites
    • Documents

Les bannières affectées à une zone spécifiques ne sont plus utilisables ailleurs.

Fond de page rotatif

Il est aussi possible depuis la version 3.5.3 (mars 2014) du squelette de disposer de plusieurs fonds de page pour le site, un nouveau fond de page tiré au hasard étant affichée à peut près à chaque nouvelle page (le cache est réglé à 1s).

Pour cela :

  • rendez-vous dans la page de gestion des mots clefs du site,
  • trouvez le groupe de mots clefs : _FondPage
  • créez autant de mots clefs dans ce groupe que vous aurez de fonds
  • placez dans chacun de ces mots clefs vos fonds en tant que logo (normal)

Il est aussi possible :

  • d’affecter des fonds à une branche du site en mettant le mot clef du fond à la rubrique racine de la branche
  • de forcer certains fonds à des pages spécifiques en mettant dans la « Bulle d’aide » le nom du template ciblé parmi :
    • Sommaire
    • Connexion
    • annuaire
    • Plan
    • InscriptionEvenement
    • mots_filtres
    • Liste_mail
    • ProposerEvenement
    • Sigles
    • Sites
    • Documents

Les fonds affectés à une zone spécifiques ne sont plus utilisables ailleurs.

Trame de fond

SoyezCréateurs pour SPIP 3 introduit la possibilité d’utiliser une trame de fond superposée à la bannière ou au fond de page.

Pour cela, il suffit de de mettre l’image servant de trame en logo de survol du mot clef contenant déjà l’image de fond en logo normal.

Surcharge personnalisée des CSS

Enfin, pour les plus aguerris, il est possible de surcharger les CSS du site.

Pour cela, créer un dossier squelettes/ à la racine du site.

Créer un dossier images/ dans ce dossier squelettes/

Dans squelettes/images/ :

  • stylessoyezcreateurs_perso.css est rajouté à la fin de la feuille de style du site
  • stylesportail_perso.css est rajouté à la fin de la feuille de style du mode portail
  • stylescommuniquant_perso.css est rajouté à la fin de la feuille de style du mode communiquant
  • favicon.ico permet d’avoir un favicon spécifique non calculé à partir du logo du site

Un outil pourra vous aider grandement dans ce travail sur les CSS : FireFox + FireBug.

Quelques exemples de personnalisation des CSS :

P.-S.

Comme la CSS est chargée à part de la page, ce n’est pas un recalcul seul de la page qui suffira : il faut aussi actualiser dans le navigateur.

En pratique, faites :

  • recalcul de la page (var_mode=recalcul à la fin de l’URL)
  • et quand c’est fait, F5 pour actualiser dans le navigateur chaque fois que vous avez besoin de voir la mise à jour de la CSS

Notes

[1Elle doit avoir la largeur définie dans la configuration du site : le squelette ne la redimensionne pas.

[2Texte brulé : terme utilisé par les graphistes pour indiquer du texte intégré au sein d’une image. Il est brulé au sens qu’il ne peux pas être changé sans changer l’image. Peut-être en rapport avec l’expression « bruler ses vaisseaux ».

[3Et comme pour la bannière unique du site, brûlez les textes que vous voulez afficher dans les bannières...

Dernière modification de cette page le 15 juillet 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 14 juillet à 20:52, par philippe49 En réponse à : Personnalisation graphique du squelette SoyezCréateurs

    Bonjour,
    je signale une petite anomalie que je viens de voir sur mon site avec Spip 3.1.6 après avoir fait la mise à jour en dernière version SoyezCréateurs Rebirth 4.1.2 [105319] :
    Je vois le message « [Crayons] Vous pouvez mettre une annonce vue sur toutes les pages [/Crayons] » sur la page d’accueil du site.
    La version 4.1.2 [105294] affiche la même anomalie.
    Problème résolu en remettant l’ancienne version SoyezCréateurs 4.1.0 [104940]

    Répondre à ce message

  • Le 28 novembre 2016 à 08:40, par pgiron En réponse à : Personnalisation graphique du squelette SoyezCréateurs

    La note de bas de page 4 n’aboutit à rien...

    Répondre à ce message

  • Le 17 septembre 2016 à 20:32, par preuilly En réponse à : Personnalisation graphique du squelette SoyezCréateurs

    bonjour, j’ai bien installé le plugin composition sur soyezcreateurs et cela fonctionne parfaitement. Par contre je n’arrive pas a mettre en place le code css comme indiqué dans le forum pour habiller mes pages html. Avec sarka j’utilisais le fichier perso.css dans squelettes/css.
    Dans le long listing dont vous m’indiquez le chemin je découvre mon code css noyé dans la masse sans que je puisse en déduire quelque chose en raison de mes compétences limité en ce domaine
    merci à vous si vous pouvez m’indiquer une piste ;

    • Le 17 septembre 2016 à 20:46, par RealET En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      La surcharge des CSS dans SC se fait par inclusion dans la CSS générale de la CSS perso, à la fin.
      Ça n’est pas exactement « noyé » mais je comprends l’idée ;-)

      Il y a dans SC quelque chose qui se rapproche des composition avec les mots clefs de _TypeRubrique et _TypeArticle (nom cité de mémoire).

      Est-ce qu’une de vos compositions est http://preuilly.preuillysurclaise.fr/liste-des-professionnels ?

      Si oui, elle n’est manifestement pas dans la charte du site ;-)
      Autrement dit, elle n’utilise pas les squelettes de SoyezCréateurs.
      C’est donc normal que les CSS ne soient pas appliquées

    • Le 21 septembre 2016 à 21:33, par preuilly En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      merci, j’ai utilisé le mot clé _TypeArticle, créé un mot clé pour mon fichier html et transformé ce fichier selon les normes soyez createurs et le css s’est appliqué sous firefox, google chrome et maxton mais pas sous opera. Ce qui ne saurais tarder. J’ai encore beaucoup à apprendre sur les mots clé de SC, je vais m’y atteler. Merci encore de cette aide.

    • Le 21 septembre 2016 à 22:09, par RealET En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      À ce que j’en vois, ça n’est plus le squelette SoyezCréateurs qui est utilisé là sur le site.

    • Le 6 octobre 2016 à 14:39, par preuilly En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      bonjour, j’ai tardé à répondre car je n’avais tout simplement pas de réponse. Depuis j’ai trouvé ce qui empêchait d’ intégrer mes anciennes pages compositions dans le format de soyezcréateurs sauf une car j’avais besoin de toute la largeur de l’écran. Je profite de ce mail pour poser une autre question. Comment puis je faire apparaitre le bouton « espace privé » autrement qu’en utilisant /ecrire. Ce qui semble compliqué pour certains rédacteurs. merci

    • Le 7 octobre 2016 à 00:07, par RealET En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      Bonjour,

      Manifestement, il y a un problème dans le fork des squelettes : en haut à gauche du site, je vois :
      " /> " />

      Sinon, les boutons d’admin pour les rédacteurs sont biens affichés s’ils ont le cookie de correspondance. (Je viens de tester en me connectant)

    • Le 10 octobre 2016 à 21:56, par preuilly En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      bonjour, en effet j’ai bien remarqué cette anomalie mais j’ai beau chercher je ne vois pas comment localiser l’erreur qui est à l’origine de cette surcharge malheureuse. J’ai fait quelques essais sur les css et fait un ajout au squelette sommaire mais ce ne semble pas en être la cause.

    Répondre à ce message

  • Le 16 septembre 2016 à 14:33, par preuilly En réponse à : Personnalisation graphique du squelette SoyezCréateurs

    bonjour, je viens d’installer le squelette soyez createur. J’utilise le plugin composition et je voulais appliquer les mêmes codes css que mon site actuel pour habiller mes fichier html . Pour cela j’ai copié le code dans un fichier nommé stylessoyezcreateurs_perso.css que j’ai inclus dans squelettes/images. Cela ne fonctionne pas quand je regarde dans firebug celui-ci ne détecte pas de fichier css. J’ai surement raté une étape. Merci de votre aide.
    Le site est en test ,

    un sous-domaine : preuilly.preuillysurclaise.fr

    Répondre à ce message

  • Le 14 août 2016 à 12:55, par philippe49 En réponse à : Personnalisation graphique du squelette SoyezCréateurs

    Bonjour,
    je viens de tester le plugin « Squelette SoyezCréateurs Rebirth 4.0.69 » (dernière version) :
    Bravo pour ce plugin : il fait tout ce que je souhaite.

    J’ai juste trouvé un détail qui me gêne :

    Dans l’onglet « Couleurs » de ’Configurer SoyezCréateurs’, il y a un champ titraille qui permet de modifier la couleur des caractères des titres.
    J’ai mis du rouge et les titres de niveau 1, niveau 2 et niveau 3 sont en rouge.

    Je souhaiterais que les titres de niveau 2 et niveau 3 n’aient pas la même couleur que le niveau 1.

    Avez-vous une solution ?
    Merci pour votre aide.

    • Le 14 août 2016 à 13:01, par RealET En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      Bonjour,

      Ravi que le squelette réponde à vos attentes !

      Pour une personnalisation plus poussée, il faut suivre les instructions du dernier titre de cette page : « Surcharge personnalisée des CSS ».

    • Le 14 août 2016 à 18:25, par philippe49 En réponse à : Personnalisation graphique du squelette SoyezCréateurs

      Merci RealET pour votre réponse :

      je viens de tester avec un fichier « stylessoyezcreateurs_perso.css » dans le répertoire \squelettes\images\ à la racine du site.

      Cela fonctionne parfaitement.

      Merci pour votre aide.

    Répondre à ce message

  • Le 16 novembre 2011 à 11:45, par Benoitos En réponse à : Personnalisation graphique du squelette SoyezCreateurs

    Bonjour,

    Je viens de faire une modification dans l’emplacement des rubriques avec les mots clés.
    Souci : la page d’accueil et certaines rubriques s’affichent « comme si elles ne trouvaient pas leur css » alors qu’apparemment il est bien appelé par la page.

    voici ces pages :
    http://www.journalatelier.fr/
    http://www.journalatelier.fr/-Ressources-.html
    http://www.journalatelier.fr/-L-Atelier-experimental-.html

    Je peux envoyer les modifs que j’ai réalisées sur les mots clés des rubriques si c’est nécessaire...

    • Le 16 novembre 2011 à 12:13, par RealET En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Rajouter ?var_mode=recalcul à chaque page a réglé le problème : c’était donc un problème de cache ;-)

      ==> Toujours vider le cache de SPIP avant de dire qu’il y a un problème ;-)

    • Le 16 novembre 2011 à 12:42, par Benoitos En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Merci Jack,

      J’avais vidé le cache plusieurs fois et c’est justement après l’avoir vidé que le problème apparaissait...

      Le menu qui permet le recalcul des pages n’apparait plus en haut dans le bandeau (et n’apparaissait pas avant de vider le cache)... Comment est-il possible de le « remettre » ?

      Donc même sans ce menu, si je comprends bien il suffit d’ajouter ?var_mode=recalcul à l’URL pour forcer le recalcul ? super !

    • Le 16 novembre 2011 à 13:09, par RealET En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Pour remettre les boutons d’admin s’ils ont disparu : accueil de ecrire/ et dans la colonne de gauche : activer le cookie de correspondance.

    • Le 16 novembre 2011 à 17:14, par Benoitos En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Mais c’est bien sûr !
      Celui là m’avait échappé, promis je fais un noeud à mon mouchoir !

    Répondre à ce message

  • Le 25 janvier 2014 à 09:47, par jp En réponse à : Personnalisation graphique du squelette SoyezCreateurs

    Bonjour,

    Je cherche a mettre une image en backgound dans le pied de page. J’ai essayé de le faire en surcharge CSS, mais sans succès. Quel est la bonne méthode svp ?

    Merci,

    Répondre à ce message

  • Le 30 octobre 2013 à 17:15, par benoitos En réponse à : Personnalisation graphique du squelette SoyezCreateurs

    Bonjour,
    J’utilise le squelette SoyezCreateurs et une rubrique complète ne s’affiche plus, pourriez vous me dire si cela provient du squelette ? Ou si vous en connaissez la cause. Voici la page en question : http://www.journalatelier.fr/spip.php?rubrique14

    • Le 31 octobre 2013 à 00:45, par RealET En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Bonsoir,

      Quelle version de PHP ?

      Est-ce que ça a déjà marché chez cet hébergeur ?

      Est-ce que tous les fichiers ont bien été transférés ?

      Que disent les logs d’erreur de PHP ?

    • Le 31 octobre 2013 à 18:00, par benoitos En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Bonsoir,
      La version est PHP 5.4 le site vient d’être transféré de chez vous à 1&1.
      Normalement tous les fichiers sont passés et la rubrique s’affichait précédemment.
      Je ne sais pas où se trouvent les logs d’erreur ?

    • Le 31 octobre 2013 à 18:19, par RealET En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Est-ce qu’il est possible de passer PHP en 5.3 chez 1a1 ?

      Il arrive qu’un transfert FTP se passe mal et que certains fichiers soient mal transférés.

      Je ne sais pas non plus où sont les logs d’erreurs chez 1&1 ;-)

    Répondre à ce message

  • Le 3 février 2013 à 18:43, par mathieugym En réponse à : Personnalisation graphique du squelette SoyezCreateurs

    Bonjour,

    Je souhaite modifier la couleur de fond des jours où il y a un évenement.

    En affichant la source, je remarque qu’il y a une classe nommée : class=« agendathismonth event »

    Or je ne trouve pas, dans aucun CSS, cette classe.
    Je trouve seulement td.agendathisday / td.agendathismonth / td.agendanotthismonth

    Comment modifier la couleur de fond d’un jour ayant un évenement ?

    MERCI

    • Le 3 février 2013 à 18:57, par RealET En réponse à : Personnalisation graphique du squelette SoyezCreateurs

      Bonjour,

      C’est une question de CSS, pas de SPIP.

      squelettes/images/stylessoyezcreateurs_perso.css permet de surcharger les CSS en y mettant tout ce que l’on peut écrire en langage CSS.

    Répondre à ce message

  • Le 20 octobre 2012 à 17:41, par Quentin En réponse à : Personnalisation graphique du squelette SoyezCreateurs

    Autre question :
    Je m’y prend peut être mal, mais je n’arrive pas à modifier la couleur du texte lorsqu’il y a une indexation dans un article. Le texte indéxé apparait toujours rouge et la puce bleue. Qq’un aurai une idée svp ?

    Merci

    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

  • Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

Ça spipe par là