SPIP-Contrib

SPIP-Contrib

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

290 Plugins, 198 contribs sur SPIP-Zone, 73 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 – 112 commentaires

20 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
Chargement en cours...

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 407 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)

  • SPIP 3.2, Agenda et FullCalendar

    6 juin – commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 22 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)

  • Nouvelle version - Modération de modifications

    29 janvier 2012 – 49 commentaires

    Suite à une migration depuis SPIP-Agora, j’ai développé ce plugin permettant de reprendre la fonctionnalité « Nouvelle version » inexistente sur SPIP2 ni sur SPIP3 Ce plugin permet d’étendre le work-flow de -rédaction-publication d’un article au cas d’un (...)

  • ScolaSPIP 4

    19 janvier 2016 – 358 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 (...)