Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


Fondateur

Milouze14

Message posté: le Mar 21 Aoû 2012 - 8:20
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 .





Fondateur des forums Milouze14

- Contact par MP -



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

  
  • © PunBB | Signaler un abus