Un cadre à sa CB et la déplacer au dessus du QEEL


Étape 1 - Préparation de l'image

Avant d'aller plus loin, il vous faudra avoir préparer votre image, la découpé et l'héberger. Prenez en note la largeur et la hauteur de votre découpe sur un bout de papier. Les tailles vous serviront plus loin.


Étape 2 - Préparation du template

Comme toute modification dans les templates, il vous faut être le Fondateur du Forum. Activez votre champs de recherche en pressant Ctrl + G en même temps. Vous aurez votre champs de recherche affiché dans votre navigateur.

Allez chercher le template index_body (Panneau d'administration / Affichage / Templates / Général) et pressez l'outil d'engrenage afin d'aller dans le fichier php de votre Forum.

Attention ce tutoriel touche la mise en place de la Chatbox se trouvant en pied de page et non en haut.

La ligne de code à trouver:

Code:

{CHATBOX_BOTTOM}

Dans ce bout de code, nous allons insérer 2 div. Dans ces 2 div, chacune aura sa propriété Css qui servira plus loin.

Code:

<div id="topline1"></div>
{CHATBOX_BOTTOM}
<div id="toppied1"></div>

Les div sert d'encadrement.

Maintenant, pour placer la Chat box au dessus de votre Qui est en ligne, couper / coller la ligne au dessus de cette ligne de code:

Code:

<!-- BEGIN disable_viewonline -->

Enregistrez et publiez votre modification.

Étape 3 - La mise en place du Css

Toujours dans Affichage, allez dans Couleurs et cliquez sur l'onglet Feuille de style Css. Vous allez ajouter le code suivant:

Code:

#topline1
{
background-color: transparent;
background-image: url("Lien de l'image");
height: Xpx;
border: none !important;
background-repeat: no-repeat;
margin-bottom: -23px;
}

#toppied1
{
background-color: transparent;
background-image: url("Lien de l'image");
height: Xpx;
border: none !important;
background-repeat: no-repeat;
margin-top: -22px;
}

Attention, ayez de bonne connaissance en Css, si jamais vous avez un décalage à droite ou à gauche, il vous faudra y remédier avec un ajout de propriété aux valeurs de Css donné.

Explication du Css

• background-color: transparent;
  Indique qu'il ne faut rien en arrière plan
  
  
• background-image: url("Lien de l'image");
  Indique l'url de direction de l'image
  
  
• height: Xpx;
  Indique la hauteur de l'image. Remplacez X par la valeur en pixel
  
  
• border: none !important;
  Indique qu'il ne doit pas avoir de bordure à l'image
  
  
• background-repeat: no-repeat;
  Indique que l'image ne doit en aucun cas se répéter
  
  
• margin-top: -22px;
  Indique que l'image doit monter en haut de 22 pixels

Citation :

Prenez garde à votre mise en forme. Si jamais votre image ne touche pas votre cadre, il faudra augmenter la valeur du margin-top. Si elle est trop haute, il faudra diminuer la taille du margin. Si vous avez un soucis avec la taille en largeur, ajoutez un width: Xpx;, en remplaçant X par la valeur de la taille de votre image.

Enregistrez votre Css et admirez votre travail.

Vous avez maintenant terminer de personnaliser votre Forum.