Mettre une image de fond différente dans les cellulles...

[badibou]

Bonjour, j'ai cherché j'ai trouvé mais cela ça ne fonctionne pas...


Il y a ce Script:

Code:

        $(function(){
          $("dl.icon h3 a").each(function() {
            $(this).closest("li").addClass($(this).attr("href").replace(/^\/([fc][0-9]+)-.*$/, "$1"));
          });
        });

Et ce CSS:

Code:

        li.row.c3 {
        background: url(http://2img.net/i/fa/i/smiles/icon_mrgreen.png); }
        li.row.f5 {
        background:url(http://2img.net/i/fa/i/smiles/icon_clown.png); }

Et si j'ai bien compris ce qu'il faut faire.. il faut remplacer le c3 par la cellule et le f5 par la page.. ??

Aucune idée !!!

Est-il possible d'avoir + d'explication s'il-vous-plait ?

Cdt,

[Neptunia]

Bonjour ^^

c3 représente la 3e catégorie du forum
f5 le cinquieme forum

Exemple ici :
Gérer l'apparence de son forum -> forum.forumactif.com/f7-gerer-l-apparence-de-son-forum -> f7

Exemple sur le forum de votre profil :
Règles aide idées -> f21
Tennis -> f31
Canadiens -> f2

[badibou]

Merci de ta réponse Neptune !

donc dans mon cas canadiens=c3 ?

[Neptunia]

Nan, tu n'a pas de c3

Tu as un forum 2, 21 et 31
Donc ça donnerait niveau css quelque chose comme ceci :

Code:

        li.row.f2 {
        background: url(http://hebergeur.com/image_canadiens.png); }
        li.row.f21 {
        background:url(http://hebergeur.com/image_reglesaideidees.png); }
        li.row.f31 {
        background: url(http://hebergeur.com/image_tennis.png); }

[badibou]

ah ok! je catch !! je change les f !! c'est le c3 qui ma fudgé !!

[badibou]

fonctionne pas..

[badibou]

Bonjour,

Voici le message que j'ai lorsque je prend le code:

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Merci de m'aider !

cdt,

[Kaemyll]

Merci pour l'info coding ! Je prend également voir si je peux bien l'éditer pour mon forum à venir !

[badibou]

rebonjour,

Rien à faire l'image apparait pas !

cdt,

[badibou]

Up!

[[Nihil]]

Hello,

Si tu remplaces le javascript par celui ci, cela fonctionne-t-il mieux ?

Code:

$(function(){
    $(".hierarchy .forumtitle").each(function() {
        $(this).closest("li").addClass($(this).attr("href").replace(/^\/([fc][0-9]+)-.*$/, "$1"));
    });
});

[badibou]

Salut Nihil ! heu... non je test sur mon Forum test et rien...

[[Nihil]]

Tu veux bien faire quelque chose qui donnerai un résultat comme ceci ?



(il faut regarder le forum "Canadiens")

[badibou]

Salut ! c'est exactement ça !

[[Nihil]]

Alors le code javascript marche, par contre sur ton forum test plusieurs JS ont des erreurs qui peuvent bloquer l’exécution de la suite des autres javascript... Du coup on ne voit pas le fonctionnement.
De plus il faut penser à rajouter le CSS correspondant (voir les messages de Neptune)

Petit conseil, retire les javascript qui sont en trop que tu n'utilises plus :p !

[badibou]

Rebonjour !

J'ai enlevé tous les JS à l’exception de de celui-ci:

Code:

$(function(){
            $(".hierarchy .forumtitle").each(function() {
                $(this).closest("li").addClass($(this).attr("href").replace(/^\/([fc][0-9]+)-.*$/, "$1"));
            });
        });

et j'ai mis ceci dans le CSS:

Code:

li.row.c3 {
                li.row.f7-le-bistro {
                background: url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
                li.row.f21
                background:url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
                li.row.f31
                background: url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
      }

toujours rien..

Cdt,

[[Nihil]]

Ton CSS me semble invalide.
Cela devrait être :

Code:

li.row.f7 {
    background: url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
}

li.row.f21 {
    background: url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
}

li.row.f31 {
    background: url(http://i56.servimg.com/u/f56/18/10/14/65/ok14re10.jpg);
}

[badibou]

Bizarrement ca me donne un message d'erreur de CSS mais ça fonctionne !!!

Merci encore Nihil t'es vraiment super !!

[Self]

..	Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[badibou]

Il est résolu en parti.. le code marche mais mon panneau m'indique ceci...

Erreur détectée
Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

Pourquoi ?

Cdt,

[Self]

Bonjour,

Peut-être avez-vous mal copié le code, pourriez-vous nous copier/coller (en hide si vous voulez) votre code CSS ?

[badibou]

Voila !

[Self]

Bonjour,

Essayez de remplacer tout votre CSS par :

Code:

@import url(http://fonts.googleapis.com/css?family=Cabin);

a {
   -moz-transition:color 5s; /* Mozilla Firefox */
   -webkit-transition:color 5s; /* Safari et Google Chrome */
   -o-transition:color 5s; /* Opera */
   transition:color 5s;
}

a.forumlink span, a.forumtitle span{ display: none; }
a.forumlink img, a.forumtitle img{ display: inline!important; }

.panel.introduction{ background-color:#050D14; }

.navbar{ background-color: #000001; }

.navbar ul{
   padding-bottom : 8px;
   border-color:#3168B0;
}

#search-box{
   visibility:hidden;
}

.forumline{
   -moz-border-radius: 25px;
   border-radius: 25px;
}
      
.row1, .row2, .row3, .row3Right{
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.forabg{ border:none; }
          
.bouhautbas{
   bottom: 15px;
   right: 10px; /* remplacez left par right pour afficher les boutons à droite */
   position: fixed;
   z-index: 50;
}

.module{ background-color:#000001; }

#fa_toolbar, #fa_toolbar_hidden{
   background-image: url('http://i58.servimg.com/u/f58/18/12/26/07/animat10.gif');
   text-decoration: none !important;
}

#fa_toolbar #fa_magnifier, #fa_toolbar #fa_fb, #fa_toolbar #fa_twitter, #fa_toolbar #fa_gp, #fa_toolbar #fa_mail, #fa_toolbar #fa_rss, #fa_toolbar #fa_hide, #fa_toolbar_hidden #fa_show{
   background-image: url('http://i69.servimg.com/u/f69/18/12/26/07/13636110.png') !important;
   background-repeat: no-repeat;
   height: 15px !important;
   width: 15px !important;
}
      
#fa_share{ line-height: 15px !important; }
#fa_fb{ background-position: -43px -2px !important; }
#fa_twitter { background-position: -62px -2px !important; }
#fa_gp{ background-position: -81px -1px !important; }
#fa_mail{ background-position: -102px -1px !important; }
#fa_rss{ background-position: -123px -1px !important; }
#fa_magnifier{ background-position: -23px 0px !important; }
#fa_hide{ background-position: -142px -2px !important; }
#fa_show{ background-position: -162px -2px !important; margin-left: 12px; }

a.mainmenu[href="http://www.forumdessports.com/portal"] { display: none; }

#chatbox_header a.chat-title { color:transparent!important; }
#chatbox_header a.chat-title:before { content: "Sports-Box" ; color:#827f8f; }

.postprofile img:hover{
   -webkit-transform: rotate(-360deg);
   -moz-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
   transform: rotate(-360deg);
 
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -o-transition: all .6s;
   transition: all .6s;
}

a.sceditor-button.sceditor-button-date, a.sceditor-button.sceditor-button-time, a.sceditor-button.sceditor-button-fawow{ display:none; }



.postprofile dt img{
   border: 0px solid grey;  /*bordure*/
   border-radius: 5px;  /*coins arrondis*/
}

.fa_avatar{
   width: 25px;
   height: 25px;
   position: relative;
   top: -3px;
   margin-right: 5px;
   border-radius: 3px;
   margin-bottom: -10px;
}

#quick_reply #av_quickreply{
   display: table-cell;
   width: 100px;
}
      
#quick_reply #textarea_content{
   width: 800px !important;
   display: table;
}
      
#quick_reply #text_editor_controls{
   position: relative;
   left: 400px;
}

#left, #right{ display: none; }

hr{ border:1px solid #1B88DB; }

#first-post-br{ display:none; }
   
#chatbox .chatbox_row_1 span[title],#chatbox .chatbox_row_2 span[title]{ display:none; }

/*suppression des avatars*/
#latest_online_members .avatar-mini img{ display:none; }

/*le widget*/
#latest_online_members{
   padding:35px;
   height:35px;
   overflow-y:scroll;
   padding-left:1px;
   padding-top:2px;
}

/*la ligne de chaque membre*/
#latest_online_members .avatar-mini a{ word-wrap: break-word; }

#latest_online_members td{ float:left; }
    
#fa_search{ /*recherche toolbar*/ display:none !important; }

.topic-actions .search-box{ display: none; }

body.chatbox input#message{ width: 355px; }

.bistro{ transition-duration:1.1s; }
      
.bistro:hover{
   transform:scale(1.1);
   -ms-transform:scale(1.1);
   -webkit-transform:scale(1.1);
   transition-duration:1.1s;
   opacity: 0.8;
   -webkit-transition: opacity .10s ease-in-out;
   -moz-transition: opacity .10s ease-in-out;
   -ms-transition: opacity .10s ease-in-out;
   -o-transition: opacity .10s ease-in-out;
   transition: opacity .10s ease-in-out;
}

#logo-desc { height: 130px; }

/**barre du vote**/
 
.vote-count{
   background: url("http://i39.servimg.com/u/f39/18/10/14/65/nhl110.jpg")no-repeat scroll 0 0 transparent;
   color: #FE0101;
   font-size: 16px;
   font-weight: 700px;
   height: 30px;
   padding-top: 2px;
   text-align: center;
   width: 30px;
   margin-left:auto;
   margin-top: auto;
}

.lastpost-avatar img{
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   height: 36px;
   width: 72px;
   -webkit-transform: rotate(-360deg);
   -moz-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
   transform: rotate(-360deg);
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -o-transition: all .6s;
   transition: all .6s;
}

li.row.f7{ background: url(http://i39.servimg.com/u/f39/18/12/26/07/test110.jpg); }
li.row.f4{ background: url(http://i39.servimg.com/u/f39/18/12/26/07/habsbe10.png); }
li.row.f8{ background: url(http://i39.servimg.com/u/f39/18/12/26/07/tes10.jpg); }

ul.linklist li.rightside{ float:none; }
#page-footer, div.navbar, div.navbar ul.linklist{ text-align:center; }

.bodyline{ background-color: rgba(141, 210, 54, .8); }

[Neptunia]

Dans cette section il y avait de nombreuses erreurs

Code:

 .vote-count {
....sceditor-button.sceditor-button-dailymotion
        }
 .lastpost-avatar img {


- Un bloc vide ne comportant ni propriété, ni valeur (juste un identifiant CSS)
- Présence à plusieurs reprises de } qui ne fermaient rien puisque l'accolade ouvrante { était absente
- Présence d'un identifiant au milieu d'un bloc CSS entre { et } alors qu'un nom ou une liste d'identifiants doit impérativement commencer un bloc et être suivi de {, la ligne qui précède doit se terminer par }
C'était la raison de votre message d'erreur à l'enregistrement.

Le CSS de SeLfde4Th7 corrige toutes les erreurs mais il comporte encore deux blocs (consécutifs de surcroit pour .lastpost-avatar img
Comme ils comportent strictement les mêmes propriétés, le premier bloc est inutile puisque ce sont les valeurs du dernier bloc qui seront prises en compte.

[Self]

Le CSS de SeLfde4Th7 corrige toutes les erreurs mais il comporte encore deux blocs (consécutifs de surcroit pour .lastpost-avatar img
Comme ils comportent strictement les mêmes propriétés, le premier bloc est inutile puisque ce sont les valeurs du dernier bloc qui seront prises en compte.

Corrigé !
En fait il comporte les mêmes propriétés mais pas les mêmes valeurs, j'ai exclu le fait que ce qui est voulu est un effet au hover (passage du curseur sur l'élément) et ai donc retiré le premier bloc qui est (si besoin) :

Code:

.lastpost-avatar img{
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   height: 36px;
   width: 36px;
   -webkit-transform: rotate(-360deg);
   -moz-transform: rotate(-360deg);
   -o-transform: rotate(-360deg);
   transform: rotate(-360deg);
   -webkit-transition: all .6s;
   -moz-transition: all .6s;
   -o-transition: all .6s;
   transition: all .6s;
}

[badibou]

Tout semble ok ! merci !

Est-ce que je pourrait vous envoyer le CSS de mon site principal(celui-ci est celui de mon forum test) pour faire une correction puisque je ne suis pas sur que les 2 soient identique ? ?

 



Merci encore !

Cdt,

[Self]

L’outil suivant vous aidera certainement à le faire : http://jigsaw.w3.org/css-validator/#validate_by_input
Il faudra si je me rappel bien mettre la ligne suivante avant tout le CSS parce qu'il la supprimera :

Code:

@import url(http://fonts.googleapis.com/css?family=Cabin:700);

Bonne journée .

[badibou]

Un gros merci à Nihil et Neptune !