[Tutoriel] [SMF2.x] Centrer la bannière (logo) dans le thème "Core"

[Zuki.]

Pour centrer la bannière (logo) dans le thème "Core".

Il faut se rendre dans l'index.template.php du thème "Core" => Admin/Configuration/Thème en cours

Dans "Réglages du thème - Core Theme" - "Modifier un Thème"  cliquer sur "Modifier index.template.php (le modèle principal)"

Là va apparaitre le fichier (découper en "tranches").

Rechercher la partie commençant par : "Commence à la ligne 174:" (le numéro peut varié - c'est la troisième fenêtre)

Voici la partie de code qui nous intéresse :

function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

   echo '
<div id="mainframe"', !empty($settings['forum_width']) ? ' style="width: ' . $settings['forum_width'] . '"' : '', '>
   <div class="tborder">
      <div class="catbg">
         <img class="floatright" id="smflogo" src="', $settings['images_url'], '/smflogo.gif" alt="Simple Machines Forum" />
         <h1 id="forum_name">';

   if (empty($context['header_logo_url_html_safe']))
      echo $context['forum_name_html_safe'];
   else
      echo '
            <img src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" />';

   echo '
         </h1>
      </div>';

En rouge, le codage pour le "smflogo" en haut à droite en entête.
En bleu, le codage pour la bannière à gauche ou le titre, si aucune bannière n'est mentionnée dans le réglage du forum.


Comment bien centrer la bannière :

Il va falloir d'une part supprimer le petit "smflogo" (à droite) pour libérer l'espace et modifier le codage de la bannière "pour lui dire" de se centrer.

Voici la partie de code à modifier :

function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

   echo '
<div id="mainframe"', !empty($settings['forum_width']) ? ' style="width: ' . $settings['forum_width'] . '"' : '', '>
   <div class="tborder">
      <div class="catbg">
         <img class="floatright" id="smflogo" src="', $settings['images_url'], '/smflogo.gif" alt="Simple Machines Forum" />
         <h1 id="forum_name">';

   if (empty($context['header_logo_url_html_safe']))
      echo $context['forum_name_html_safe'];
   else
      echo '
            <center><img src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" /></center>';

   echo '
         </h1>
      </div>';

1 - Supprimer la ligne en rouge : supprime le "smflogo"

2 - Rajouter une balise <center>...</center> en vert dans le code : elle permet de centrer la bannière.


Codage définitif :

function template_body_above()
{
   global $context, $settings, $options, $scripturl, $txt, $modSettings;

   echo '
<div id="mainframe"', !empty($settings['forum_width']) ? ' style="width: ' . $settings['forum_width'] . '"' : '', '>
   <div class="tborder">
      <div class="catbg">
         
         <h1 id="forum_name">';

   if (empty($context['header_logo_url_html_safe']))
      echo $context['forum_name_html_safe'];
   else
      echo '
            <center><img src="', $context['header_logo_url_html_safe'], '" alt="', $context['forum_name_html_safe'], '" /></center>';

   echo '
         </h1>
      </div>';

Solution intermédiaire pour faire disparaitre le "smflogo" sans supprimer la ligne de code.

Créer un "smflogo.gif" vide, c'est à dire sans image et transparent, de dimension 1 pixel X 1 pixel.

Remplacer le "smflogo" existant par cette nouvelle image "smflogo.gif" dans /Themes/core/images/smflogo.gif


Bonne modification.

Attention à bien respecter le codage, les  ' ; etc, ne sont pas là pour faire joli !

Vous trouverez en fichier joint un "smflogo.gif" de 1 px X 1 px

[tonton_jm]

Super tuto ...

Impeccable, j'ai appliqué ça sans aucun problème grâce à ces explications claires et nettes ...

Merci

[Sébastien53]

Le tuto est clair certes mais moi j'aimerais que ma bannière soit plus haute donc comment modifié la hauteur de celle ci ??

[maximus23]

Bonjour,

Celà se régle dans le fichier index.css de ton thème courant voir les id de class dans le fichier index.template pour les situer dans le css ou utiliser l'extention pour ceux qui sont sous FF pour les repérer

[Alain Rheault]

C,est un vieux sujet !  MAIS çà fonctionne encore comme un charme ! 

MERCI !!!