1 CSS : Personnaliser le message d'accueil (phpbb3) 11/2/2009, 14:27
Ce tutoriel a été publié par ze_chaofan sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum. |
Hello everybody !
Voici comment personnaliser votre message d'accueil sous phpbb3.
Pour ceci, rendez-vous dans votre gestion des couleurs, basculez sur l'onglet CSS, et collez y ces codes :
Pour modifier l'ensemble du message :
.introduction {
background-image: url("adresse_url_de_l'image");
background-repeat: repeat;
background-position: top left;
background-color: #ffffff;
color: #000000;
}
Pour modifier le titre du message :
.introduction .h3 {
background-image: url("adresse_url_de_l'image");
background-repeat: repeat;
background-position: top left;
background-color: #ffffff;
color: #000000;
padding: 5px;
border-bottom: none;
}
En vert :
- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y
En orange :
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez center
En rouge :
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center
En marron :
- Modifiez #ffffff par la couleur de fond que vous souhaitez attribuer à la zone
En violet :
- Modifiez #000000 par la couleur que vous souhaitez donner au texte
>> Concernant le titre du message :
Appliquer une image ou un couleur de fond fera apparaitre une barre derrière le titre. J'ai pris la liberté d'ajouter ces petites lignes :
> padding: 5px;
Cette ligne agrandi légèrement la hauteur de la barre, pour plus d'esthétique, mais retirez-la si vous ne désirez pas avoir un barre plus épaisse que la normale, ou encore modifiez la valeur comme vous le souhaitez.
> border-bottom: none;
Cette ligne retire la bordure en dessous de la barre et du titre. Retirez cette ligne si vous voulez faire apparaître la bordure.
--------------------------------------------------
Petit exemple de cette fameuse barre dans un message d'accueil personnalisé :
Voilà, une autre astuce qui vous sera, je l'espère, utile !
Dernière édition par ze_chaofan le 11/2/2009, 17:01, édité 3 fois