Mettre un fond derrière l'ensemble des champs des catégories

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

Résolu Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 12:24

Bonjour,

J'aurai besoin de votre aide pour créer un fond global derrière l'ensemble des champs des catégories... Voici ce que j'ai codé jusqu'à maintenant :


Et voici ce que j'aimerai :


Un fond à l'arrière de tout ce que j'ai déjà codé et placé...
J'ai testé des choses mais ça ne marche pas et ça me transforme tout n'importe comment Confused 

Je vous donne mon code template :
Code:
<!-- BEGIN forumrow -->
 
     <tr>
     
          <td valign="top">
                  <div class="img_news"><img align="center" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                </td>
                 
      <td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
                 
      <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">navigation</div><div class="les_sous_forums" color="#fccda4"><span class="gensmall"><div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script><br/></div></span></div>
                </td>                 
               
                <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>
        </tr>   
 
   <!-- END forumrow -->
et le CSS au cas où :
Code:
.img_news {
margin-top:8px;
margin-left:18px;}

.statsmsg {
text-align:center;
background-color:#faeee6;
width:100%;}

.descy {
margin-left:18px;
margin-right:-25px;
width:350px;
margin-bottom:18px;
text-align:justify;}

.les_sous_forums {
border-right:1px solid #f4e0d3;
border-left:1px solid #f4e0d3;
width:100px;
padding-top:10px;
padding-left:15px;
height:auto;}

.headboxtitle2 {
margin-top:6px;
text-align:center;}

a.forumlink {
background-color:#e8cfbf;
width:100%;
  display:block;
padding-left:30px;
font-weight:normal;
font-family: georgia;
font-size: 16px;
font-style:italic;
letter-spacing: 0;
text-shadow: 1px 1px 0 #ffFFff;
text-transform:lowercase;
text-decoration: none;
color : #ac5b58;}
Vous remerciant d'avance pour votre aide ... Embarassed 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 12:37

Bonjour,

Alors je ne comprends pas très bien… Tu voudrais que chaque forum ait son propre cadre ?

Comme ceci :

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 12:46

Coucou,
Oui je voudrai qu'il y ait un seul et unique fond derrière mon image new/no new, titre description, sous forum, dernier message...
Et que ce fond soit répété à chaque différent forum Smile
C'est assez compliqué à expliquer Embarassed 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 12:57

D'accord. Alors je n'ai pas testé, mais si tu mets un class ici :
Code:
<!-- BEGIN forumrow -->
 
    <tr class="allo">
Tu devrais pouvoir personnaliser dans le CSS avec :
Code:
tr.allo {}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 13:03

Hum j'ai testé en mettant ce code CSS :

Code:
tr.allo {background-color:#faeee6;
border-left: 8px solid #f1e5eb;
border-right: 8px solid #f1e5eb;
-moz-border-radius: 30px;
border-radius: 30px;
margin-left:15px;
margin-right:15px;
margin-bottom:10px;}
et en faite maintenant le fond devient juste rose comme j'ai mi dans background... il n'y a pas la mise en forme tu sais ?

Ca fait ça :


Y a juste le fond qui change de couleur en faite le reste n'est pas pris en compte Crying or Very sad 

Et on peut pas créer une div ou quelque chose comme ça ? Embarassed 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 13:05

Je vois, c'est ce que je pensais…

Hmm pour la div, on ne peut pas le faire vu que là tu utilises un tableau (on peut pas faire table > div > tr > td…)

La solution, à la limite, même si c'est pas très très joli, ce serait de faire : div > table > tr > td… Je ne sais pas si tu me suis bien ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 13:16

Ah d'accord, je vois, je savais pas que l'on pouvait pas...
Et en faisant div > table... le résultat serait bon ? Pourquoi tu dis que ça serait pas très très joli ? Embarassed 

Peut être que mon codage en général est pas si bon, il existe peut être une autre façon de faire plus simple qui permettrait de faire avec une div simple ? Confused  Pas évident... Confused 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 13:21

Hmm attends je viens de réfléchir… Ce que je dis est bête. pas besoin de div si on met une table… peux-tu m'envoyer ton template complet je vais te montrer ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 13:21

Ah Smile D'accord Smile
Le voici :

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td class="gensmall" align="right" valign="bottom">
         <center><!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> •
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • 
         <!-- END switch_user_logged_in -->
                          <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><br /><br /></center>
      </td>
   </tr>
</table>
 

<!-- BEGIN catrow -->

   <!-- BEGIN tablehead --><img src="">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END tablehead -->

 
   <!-- BEGIN forumrow -->
 
     <tr class="allo">
     
          <td valign="top">
                  <div class="img_news"><img align="center" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
                </td>
                 
      <td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
                 
      <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">navigation</div><div class="les_sous_forums" color="#fccda4"><span class="gensmall"><div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script><br/></div></span></div>
                </td>                 
               
                <td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>
        </tr>   
 
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
   </table> <br>
   <!-- END tablefoot -->
       
        <!-- END catrow --> 
 
 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 13:35

Merci bien.

Alors, ce qu'on pourrait faire :
Code:
<!-- BEGIN tablehead --><img src="">
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
Après ceci, ajoute :
Code:
<tr><td>
Ensuite, après :
Code:
<!-- BEGIN forumrow -->
Ajoute :
Code:
<table>
Ensuite, avant :
Code:
<!-- END forumrow -->
ajoute :
Code:
</table>
Même chose après :
Code:
<!-- BEGIN tablefoot -->
Ajoute :
Code:
</td></tr>
Une fois tous ces petits changements faits, on passe à la suite pour créer les blocs.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 14:35

Voilà c'est fait Smile
Désolé j'étais partie manger... je suis de retour Smile

Voilà ce que ça donne après ces 1ers changements Smile


mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 14:43

Ici :
Code:
<td valign="top">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
Renseigne la largeur de la cellule :
Code:
<td valign="top" width="50%">
                  <span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
                  <div class="statsmsg"><span class="gensmall"><font color="#f9bdb9">STATS :: {catrow.forumrow.POSTS} messages ✖ {catrow.forumrow.TOPICS} sujets</font></span></div>
          <div class="descy"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                </td>
J'ai mis 50% par exemple, à toi de changer avec ce que tu veux

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 14:47

Très bien voilà c'est fait j'ai mi 55% Smile

Rendu :


Smile

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 14:49

En mettant un peu plus ça devrait le faire. Sinon il faut aussi renseigner la largeur pour ici :
Code:
<td valign="top">
                  <div style="background-color:#f4e0d3;padding-top:2px;padding-bottom:2px;padding-left:6px;padding-right:6px;font-family: georgia;font-size: 12px;font-style:italic;text-shadow: 1px 1px 0 #ffFFff;color:#c4a794;">last message</div><div class="headboxtitle2"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
                </td>

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 14:55

Voilà Smile


mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 14:58

On va faire un test :
Code:
<!-- BEGIN forumrow -->
 <table>
     <tr>
Ici, sur la table, mets la class de ton choix et essaye d'appliquer le CSS désiré pour créer les blocs

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 15:08

Ca fonctionne !!!! Very Happy Very Happy Very Happy Very Happy Merci beaucoup beaucoup pour ton aide une nouvelle fois Embarassed 



Avant de cloturer le sujet, j'aurai quelques questions à te demander pour finioler tout ça comme il faut Smile
- Quel code CSS il faut mettre pour faire un arrondi de tel px en haut à droite par exemple ? car tu vois sur le cap écran la barre de fond de last message dépasse donc je voudrais appliquer un arrondi Smile
- Dans le template, y a t il un code style "br" pour que chaque sous forum se mette à la ligne et pas l'un derrière l'autre...

Voilà merciii Very Happy Embarassed


mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 15:13

Ah super parce que j'étais pas très sûre de moi en voyant tes captures XD

Alors pour tes questions :
- pour l'arrondi on peut utiliser: border-radius:0px 0px 0px 0px; je t'explique => le premier zéro fait référence au bord haut gauche, ensuite les autres zéros, il faut les lire dans le sens des aiguilles d'une montre, donc le second c'est le bord haut droit, le 3ème bas droit et le 4ème bas gauche
si on veut appliquer un arrondi spécial sur le bord haut droit on doit utiliser : border-radius:50px 15px 50px 50px; => avec ça, tout sera arrondi à 50px sauf le bord haut droit

Dans le template, y a t il un code style "br" pour que chaque sous forum se mette à la ligne et pas l'un derrière l'autre...
Là par contre je ne comprends pas, tu aurais un exemple ?

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 15:22

D'accord merci beaucoup pour les arrondis Smile

Pour la question concernant les sous forum, en faite moi pour qu'ils se mettent les uns en dessous des autres, j'ai été "à l'ancienne" dans Général > Catégories & forums et à chaque 2e,3e,4e... sous forum j'ai ajouté < br> devant le nom... mais problème, voilà ce que ça donne quand je vais dans un forum qui contient plusieurs sous forums :


Le 2e comme j'ai mi un < br> le fond fait très caca du coup x)
Donc je me demandais s'il existait un moyen via le template de faire un retour à la ligne comme ça, sans que ça fasse des trucs moches comme ça ^^ comme j'avais demandé pour les champs du profil pour le retour à la ligne tu m'avais dit de mettre un < br> à la fin des variables, je sais pas si là ça marche de la même façon...

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 15:25

Si je comprends bien, je pense que tu peux mettre les sauts de ligne juste avant :
Code:
<span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Neptunia le Ven 23 Aoû 2013 - 15:32

Coucou ^^

Je m'incruste parce que ce qu'on obtient me rapproche énormément de ce que je souhaiterais faire.

Sinon pour la présentation des sous-fofos je pense avoir pigé.
Tu veux remplacer tes virgules par des sauts de ligne ?

<div class="supvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<script type="text/javascript">$('.supvirg').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
il te suffit de remplacer le contenu entre tes guillemets (chaine vide) par ce que tu veux !

Neptunia
+ Hyperactif +

Féminin
Messages : 10387
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 15:38

Merci beaucoup pour votre aide Smile
Oui j'aurai du formuler plus simplement pour les sous forums, remplacer les virgules par des sauts de ligne c'était beaucoup plus simple à comprendre pour toi Charlotte je m'en excuse ^^
Merci donc pour l'astuce AoF-Neptune Wink

Et mille fois merci à toi Charlotte pour cette patience avec moi que tu n'as pas perdu ^^ Smile Embarassed 

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par Matriochka le Ven 23 Aoû 2013 - 15:49

Ah oui d'accord, je n'avais pas compris ça ainsi en effet ^^' merci pour l'apport d'info, Neptune

Tout est OK donc ? plus de questions à ce sujet ? Smile

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un fond derrière l'ensemble des champs des catégories

Message par mimi_* le Ven 23 Aoû 2013 - 15:55

Yes tout est OK :)Merci mille fois pour ton aide ! Embarassed

mimi_*
***

Féminin
Messages : 163
Inscrit(e) le : 11/11/2008

http://ellejenifer.fr
mimi_* a été remercié(e) par l'auteur de ce sujet.

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


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