SPIP-Contrib

SPIP-Contrib

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

273 Plugins, 191 contribs sur SPIP-Zone, 33 visiteurs en ce moment

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

Personnalisation graphique du squelette SoyezCreateurs

19 août 2009 – par RealET – 56 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

13 votes

Il est possible de personnaliser l’affichage du squelette SoyezCreateurs 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é parmis :
    • Sommaire
    • Connexion
    • annuaire
    • Plan
    • InscriptionEvenement
    • mots_filtres
    • Liste_mail
    • pb_paiement
    • ProposerEvenement
    • Sigles
    • Sites
    • Documents

Les bannières affectées à une zone spécifiques restent utilisables partout où il n’y a pas de restriction.

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/ [4] :

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

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, brulez les textes que vous voulez afficher dans les bannières...

Retour en haut de la page

Vos commentaires

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

  • Une licence pour un article

    18 avril 2007 – 25 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Sur une idée originale de erational, voici un plugin permettant de lier une licence à un article.

  • Plugin Parrainage

    6 novembre 2011 – <blink style='color:red;'>public|spip|ecrire:commentaire</blink>

    Permettre aux utilisateurs d’inviter leurs contacts à s’inscrire sur le site. Description Vous connaissez le web moderne et son cortège d’applis toujours en version « beta » et de buzz sur le dernier réseau à la mode ? Vous voulez vous aussi vous y (...)

  • Formulaire de contact libre

    27 avril 2011 – 36 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Dans SPIP il n’y a pas un formulaire de contact, mais autant de formulaires de contact que d’auteurs. Cette phrase de Romy, dans son article Une page de contact dans mon SPIP, pointe un petit manque de SPIP. La possibilité d’insérer rapidement un (...)

  • Plugin Mot de Passe Compliqué

    2 novembre 2007 – 16 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Ce plugin ajoute un testeur de complexité de mot de passes dans les formulaires de choix de mot de passe de SPIP.

  • Navigation AJAX

    31 janvier – 18 <blink style='color:red;'>public|spip|ecrire:commentaires</blink>

    Ce plugin permet de modifier automatiquement une parties des liens internes de manière à ce qu’ils ne déclenchent pas un chargement complet de la page cible, mais un chargement en AJAX de certains éléments spécifiés à l’avance. Il permet aussi de (...)