Mettre une image de fond aux "x messages x sujets" et "dernier message"
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Mettre une image de fond aux "x messages x sujets" et "dernier message"
Bonjour !
Je voudrais mettre une image de fond à ceci :
Comment faire ?
- version phpbb2
- je suis fondatrice
- j'ai modifié le template index_box
- CSS personnalisé
- chrome
Merci d'avance pour votre aide !
Je voudrais mettre une image de fond à ceci :
Comment faire ?
- version phpbb2
- je suis fondatrice
- j'ai modifié le template index_box
- CSS personnalisé
- chrome
Merci d'avance pour votre aide !
Dernière édition par Linpot le Dim 15 Juin 2014 - 21:36, édité 1 fois
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
Hello Linpot
Pour faire cela, tu vas devoir toucher au template index_box.
Il y a une balise td qui entoure les nouveaux messages ainsi que le dernier message, il faut lui rajouter une class.
Ensuite, dans le CSS, tu peux rajouter une image de fond avec la propriété background-image
Je t'ai fait une explication très rapide du fonctionnement, n'hésite pas à poster ton template modifié pour que l'on puisse t'aider !
Pour faire cela, tu vas devoir toucher au template index_box.
Il y a une balise td qui entoure les nouveaux messages ainsi que le dernier message, il faut lui rajouter une class.
Ensuite, dans le CSS, tu peux rajouter une image de fond avec la propriété background-image
Je t'ai fait une explication très rapide du fonctionnement, n'hésite pas à poster ton template modifié pour que l'on puisse t'aider !
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
Merci beaucoup de m'aider Nihil
Alors voilà mon template index_box :
Alors voilà mon template index_box :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div style="width: 935px; height: 370px; background-image: url('http://image.noelshack.com/fichiers/2014/21/1400527892-categorie-haut.png');" class="secondarytitle"><div style="padding-top: 20px; padding-left: 15px;">{catrow.tablehead.L_FORUM}</div></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<td class="row3 over" align="center" valign="middle" whidth="100" height="50">
<span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
<br> {catrow.forumrow.LAST_POST} </br></div> </span>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table><img src="http://image.noelshack.com/fichiers/2014/21/1400528465-categorie-bas.png" alt="" height="100" width="935" /><!-- END tablefoot --><!-- END catrow -->
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
Code pour mettre le fond sur toute la cellule :
Alors, la partie gérant l'affichage des derniers messages est celle ci (ligne 59) :
La balise td a déjà 2 classes, row3 et over. Je vais lui rajouter une classe "dernier_message".
C'est la seule modification à faire dans le template. Tu peux valider et publier le template normalement aucun changement n'est à constater .
Ensuite dans le CSS tu vas ajouter ceci :
Tu n'as plus qu'à remplacer http://placekitten.com/250/350 par le lien de ton image
Normalement tout fonctionne ! N'hésite pas si tu as une question ^^
Alors, la partie gérant l'affichage des derniers messages est celle ci (ligne 59) :
- Code:
<td class="row3 over" align="center" valign="middle" whidth="100" height="50">
<span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
<br> {catrow.forumrow.LAST_POST} </br></div> </span>
</td>
La balise td a déjà 2 classes, row3 et over. Je vais lui rajouter une classe "dernier_message".
- Code:
<td class="row3 over dernier_message" align="center" valign="middle" whidth="100" height="50">
<span class="gensmall"><div class="codage">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
<br> {catrow.forumrow.LAST_POST} </br></div> </span>
</td>
C'est la seule modification à faire dans le template. Tu peux valider et publier le template normalement aucun changement n'est à constater .
Ensuite dans le CSS tu vas ajouter ceci :
- Code:
.dernier_message {
background-image: url(http://placekitten.com/250/350);
background-repeat: no-repeat; /* pour eviter la répétition*/
}
Tu n'as plus qu'à remplacer http://placekitten.com/250/350 par le lien de ton image
Normalement tout fonctionne ! N'hésite pas si tu as une question ^^
Dernière édition par [Nihil] le Ven 13 Juin 2014 - 14:49, édité 1 fois
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
Bonjour,
Peut être que la classe codage existante ferait aussi sans modif de template (à voir)
.codage {
background-color: white;
background-image: url("http://placekitten.com/250/350");
background-repeat: no-repeat;
color: black;
height: 64px;
text-align: left;
width: 200px;
}
Peut être que la classe codage existante ferait aussi sans modif de template (à voir)
.codage {
background-color: white;
background-image: url("http://placekitten.com/250/350");
background-repeat: no-repeat;
color: black;
height: 64px;
text-align: left;
width: 200px;
}
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
AenigmA a écrit:Bonjour,
Peut être que la classe codage existante ferait aussi sans modif de template (à voir)
.codage {
background-color: white;
background-image: url("http://placekitten.com/250/350");
background-repeat: no-repeat;
color: black;
height: 64px;
text-align: left;
width: 200px;
}
Salut AenigmA,
Malheureusement on ne peut pas l'utiliser, elle ne prend pas toute la hauteur de la cellule. Voici le genre de résultat qu'on aurait (là c'est vite fait sans prendre en compte tout ce que tu as rajouté en plus) :
A part si j'ai mal compris la question et que Linpot voulait mettre le fond non pas sur toute la cellule mais juste sur l'élément ^^. Si c'est le cas, c'est effectivement plus simple comme cela.
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
J'avais prévu avec le height 64px Nihil
Dans ton code tu mets left normal donc, mets center
.codage {
background-color: white;
background-image: url("http://placekitten.com/250/350");
background-repeat: no-repeat;
color: black;
height: 64px;
text-align: center;
width: 200px;
}
Dans ton code tu mets left normal donc, mets center
.codage {
background-color: white;
background-image: url("http://placekitten.com/250/350");
background-repeat: no-repeat;
color: black;
height: 64px;
text-align: center;
width: 200px;
}
Re: Mettre une image de fond aux "x messages x sujets" et "dernier message"
Merci ! Je n'y avait pas pensé
Résolu, du coup !
Résolu, du coup !
Sujets similaires
» Image en fond de dernier message non apparante
» Pousser sur la droite les sujets/ messages/ dernier message
» image de fond dans le dernier nouveau message
» Mettre l'image New/Old au dessus du dernier message posté.
» Est-il possible de mettre l'icône des nouveaux messages sous le dernier message ?
» Pousser sur la droite les sujets/ messages/ dernier message
» image de fond dans le dernier nouveau message
» Mettre l'image New/Old au dessus du dernier message posté.
» Est-il possible de mettre l'icône des nouveaux messages sous le dernier message ?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum