Séparer les messages d'une ligne

Voir le sujet précédent Voir le sujet suivant Aller en bas

Séparer les messages d'une ligne

Icône par defaut le Mar 21 Aoû 2012 - 8:20
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
coucou ,

comment mettre une séparation entre les messages les ami(e)s :pale: .

Pour commencer on passe par le template: viewtopic_body
Le chemin d'accès :
Affichage/Templates/Général/viewtopic_body


Recherchez cette ligne:
Code:
<!-- BEGIN first_post_br -->

Juste au dessus collez ceci:
Code:
<tr><td colspan="5">  Message  suivant:</td></tr>
Astuce:
Déposez des espaces entre les mots afin qu'ils ne se collent pas.
Étant donné que les espaces ne s'affichent pas dans le mode de rédaction, je vous donne un lien pour
en insérer dans votre template:
http://milouze14.fr/Espace.html

Pense a enregistrer les modifications en cliquant respectivement sur et


Un aperçu du résultat :


Mais franchement , c'est moche comme tout moqueur .


Ben, on va attribuer une class et enfermer le texte entre un span


Code:
 <tr><td colspan="5"><div class="M14_sep_post">
<span>  Message  suivant:</span></div></td></tr>

On y retourne moqueur

Affichage/Templates/Général/viewtopic_body

Supprimez le code mentionné plus haut et insérez celui-ci:

Code:

 <tr><td colspan="5"><div class="M14_sep_post">
<span>  Message  suivant:</span></div></td></tr>

On attribue une class( M14_sep_post ) afin de lui donner une apparence et un emplacement précis dans la feuille de style.
Le texte et enfermé entre un span pour donner une apparence et un emplacement précis dans la feuille de style.


Pense a enregistrer les modifications en cliquant respectivement sur et

Allez, on file dans la feuille de style:

Affichage/Images et Couleurs/Couleurs/Feuille de style

Vous pouvez comme sur ce forum, appliquer une image de fond qui
va se répéter horizontalement et une image (la flèche ) qui restera fixe en lui donnant un emplacement bien définie par rapport
à la largeur de votre forum.


Avec une image de fond:
Code:

.M14_sep_post
{
height: 30px;/*la hauteur de la ligne*/
background: url(LE LIEN DE L IMAGE FIXE) no-repeat center center, /*le lien de la flèche qui sera centrée*/
url(LE LIEN DE L IMAGE DE FOND) repeat-x  ;/*le lien de l image de fond qui sera répétée horizontalement*/
}

Un aperçu du résultat :



Avec une couleur de fond:

Code:

.M14_sep_post
{
height: 30px;
background:#VOTRE COULEUR  url(LE LIEN DE L IMAGE FIXE) no-repeat center center; /*le lien de la flèche qui sera centrée*/
}
Un aperçu du résultat :



L'apparence et la position du texte:

Code:

.M14_sep_post span
{
color: #000000;/*de couleur noire*/
font-size:11px;/* une taille de police de11px*/
float:right;/* le bloc sera placé à droite*/
margin-right:52%;/*on déplace ensuite en mettant une marge de 52%*/
}

Si vous désirez mettre le texte à gauche:
le float:right; se transformera en float:left;
Ainsi que margin-right: passera en margin-left:

Le lien de l image:

Code:
http://i36.servimg.com/u/f36/11/26/21/37/arrowd10.png


Voilà, c'est tout pour le moment clin oeil .



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum