• Welcome to Simple Machines Community Forum. Please login or sign up.
October 28, 2021, 02:27:32 AM

News:

SMF 2.1 RC4 has been released! Try it out and help us test! :) Read more.


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

Started by Zuki., February 25, 2012, 02:53:12 PM

Previous topic - Next topic

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 :

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

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

Quote
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 :)

Pas de support par PM ou Courrier...Veuillez utiliser le forum pour vous avoir une réponse rapide à votre demande d'aide. Merci.
Amitiés et à Bientôt...
No support by PM or Mail...You will get better and faster responses in the support forums. Thank you.
Have a nice day...

Alain Rheault

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

MERCI !!!   8)

Advertisement: