Jeudi 17 mai 2018 — Dernier ajout vendredi 18 mai 2018

Personnalisation du texte de la bannière Enregistrer au format PDF

0 vote

La bannière d’un site SoyezCréateurs (les bannières pourrait-on dire, puisqu’on peut en utiliser plusieurs) se gère principalement de façon automatique en fonction de la configuration du site.

Retour Sommaire

Partie automatique de la gestion

  • La taille de la fenêtre et donc du bandeau est donnée par Configuration > Configurer SoyezCréateurs > Positionnement > Largeur colonnes > largeur du conteneur.
  • Le nom du site qui s’affiche est celui qui est entré dans Configuration > Identité du site > Nom de votre site.
  • Le slogan (Configuration > Identité du site > Slogan s’affiche dessous avec une police réduite.
    Pour le diocèse il a été convenu d’afficher en priorité Diocèse de Saint-Brieuc et Tréguier.
  • Si on veut afficher le nom sur deux lignes, il faut insérer un retour à la ligne <br /> dans le Nom de votre site.
  • La partie gauche du bandeau affiche le logo, sur une largeur max de 200 px, à droite les outils s’affichent sur une largeur d’environ 180 px.
Retour Sommaire

Gestion de l’affichage du titre

On peut jouer sur :

  • le fond [1] du titre et sa couleur ;
  • la police du titre ;
  • sa couleur ;
  • sa taille ;
  • son contour ;
  • sa position ;

Tout se joue avec les feuilles de style CSS, dans le fichier (à créer s’il n’existe pas) /images/soyezcreateurs_perso.css. Tout se gère avec les sélecteurs #header h1.

La modification des feuilles de style peut se faire en éditant le squelette, accessible dans l’interface privée : Squelettes > Éditer le squelette (le plugin installé est SkelEditor).

Retour Sommaire

Le fond

On part du principe ici qu’on ne touche pas à la géométrie du fond. Il s’agit de la forme blanche sous le titre (ici sur le site de l’Hospitalité diocésaine).

Fond de titre
Fond de titre

La déclaration par défaut est

c’est à dire fond blanc et transparence de 40% (0 : transparence totale ; fond invisible ; 1, donc 100% : transparence nulle).

Retour Sommaire

La police du titre

Si on veut utiliser une police non courante, il faut l’installer. On se sert alors de WebFonts, appelé par Squelettes > WebFonts. On indique la police utilisée. Attention, si le nom est composé de plusieurs mots, mettre un + entre les mots. ne pas oublier de Valider le choix :

webFonts
webFonts

Ne pas utiliser de police Monotype qui n’est pas téléchargeable.

Une fois cette opération faite, la commande CSS est (2 exemples) :

Retour Sommaire

La couleur du titre

Du fait de la présence du lien hypertexte dans le titre, la couleur en prenant en compte la balise a des liens pour la déclaration color  :

Exemple avec le code hexadécimal de couleur #000080 :

Pour les codes des couleurs on pourra regarder la page Type_Color de Mozilla.

Bandeau avec police MedievalSharp et couleur de titre Navy (#000080)
Bandeau avec police MedievalSharp et couleur de titre Navy (#000080)
Retour Sommaire

La taille du texte

Elle se définit avec la déclaration font-size :

Exemple avec une taille de 2 em [2].

Faire attention de pas prendre un valeur qui augmenterait trop le titre et décalerait ensuite la boîtes des outils hors de la bannière.

Retour Sommaire

Le contour du titre

On utilise la déclaration text-shadow, qui est prévue au départ pour appliquer un effet d’ombrage au texte. La déclaration de base est text-shadow : Couleur Dx Dy Rayon, avec :

  • Couleur : le code de la couleur en hexadécimal
  • Dx décalage horizontal
  • Dy : décalage vertical
  • Rayon nul si omis.

L’article Générer un contour de lettre donne la façon de définir un contour de lettre de l’épaisseur et de la couleur qu’on veut. Dans la majotité des cas une épaisseur de 1px offre le meilleur rendu.

Retour Sommaire

La position du titre

Dans certains cas il est nécessaire de déplacer le titre, avec la déclaration margin.
Par exemple sur le site de la Communauté pastorale de Dinan : Bandeau de Dinan (mai 2018) Il faut lui indiquer une marge négative vers le haut. Pour Dinan la valeur est de -3px

Retour Sommaire

Application à ce site

Les déclaration du bandeau dans la feuille de style de ce site :

Retour Sommaire

[1Le background.

[2em est une unité relative de taille, dynamique, différente des pixels qui eux sont tributaires des écrans.