Fonds alternatifs adaptés aux sections du forum

[L'autre]

Salut à tous!

nous sommes toujours à essayer d'améliorer l'interface pour notre forum: http://www.otakujanaika.com/
et nous aurions voulu essayer d'obtenir un fond général qui varierait en fonction de la section du forum dans laquelle on se trouve!

Donc nous nous demandions si c'était possible (on en phpBB2) et si quelqu'un pouvait nous donner un coup de mains?

merci à vous!

[Self]

Bonjour,

Vous pouvez essayer le code javascript suivant à placer sur toutes les pages:

Code:

$(document).ready(function(){
    if(document.location.pathname == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
        $('body').css('background-image', 'url("http://placehold.it/1950x1080")');
    }else if(document.location.pathname == "/f23-jeux-videos"){
        $('body').css('background-image', 'url("http://placehold.it/1680x1050")');
    }
});

Le code se lit comme ça:

Code:

if(document.location.pathname == "/f7-plamo-x-figurines-x-garage-kits-x-dolls")

Si on est sur la page http://www.otakujanaika.com/f7-plamo-x-figurines-x-garage-kits-x-dolls

Code:

$('body').css('background-image', 'url("http://placehold.it/1950x1080")');

alors on change l'image de fond par l'image http://placehold.it/1950x1080 .

Code:

else if(document.location.pathname == "/f23-jeux-videos")

Sinon si on est sur la page http://www.otakujanaika.com/f23-jeux-videos

Code:

$('body').css('background-image', 'url("http://placehold.it/1680x1050")');

alors on change l'image de fond par l'image http://placehold.it/1680x1050 .

Cordialement .

[L'autre]

OMD!

j'essaie de me mettre au niveau!

Donc je commence par déposer ce code dans /module/HTML&Javascript/ --> créer un nouveau script:

Code:

$(document).ready(function(){
    if(document.location.pathname == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
        $('body').css('background-image', 'url("http://placehold.it/1950x1080")');
    }else if(document.location.pathname == "/f23-jeux-videos"){
        $('body').css('background-image', 'url("http://placehold.it/1680x1050")');
    }
});

en ajoutant autant de:

Code:

}else if(document.location.pathname == "/f23-jeux-videos"){
        $('body').css('background-image', 'url("http://placehold.it/1680x1050")');

que de page en changeant l'url à chaque ligne "else"
en y plaçant l'url de la nouvelle image de fond.

C'est bien ça?Merci beaucoup SeLfde4Th7!^^

[Self]

Re,

Tout d'abord je m'excuse car je vous ai donné un code incomplet .
Comme ça ce sera mieux:

Code:

$(document).ready(function(){
    var topicLocation = $('.nav a:last').attr('href');
    if(document.location.pathname && topicLocation  == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
       $('body').css('background-image', 'url("http://placehold.it/1950x1080")');
    }else if(document.location.pathname && topicLocation == "/f23-jeux-videos"){
       $('body').css('background-image', 'url("http://placehold.it/1680x1050")');
    }
});

Il n'y a pas de grands changements, ce qui nous importe c'est les liens commençant par /f qui sont donc les liens des différents forums de votre forum et ceux-ci url("http://placehold.it/1680x1050") qui sont les liens des images que vous désirez mettre suivant les forums dans lesquels vous naviguez .

Et les else if doivent être placés pour chaque forums dont vous désirez changer le fond de page.

[L'autre]

Ok chef, j'me lance!

[L'autre]

Désolé pour le double post.

Alors ça fonctionne super bien*-*, merci beaucoup pour votre aide!^-^
Comme la modif était dans un premier temps prévue pour une section inaccessible depuis l'extérieur, voilà une "F13"  



Je voudrais vous demander encore une petite chose, je peux prendre la part du gâteau avec la cerise?
On peut aussi rendre le header (le gros logo chargé avec la dame en combi moto et Nausicaa!) alternatif?

[L'autre]

Je me rends compte de comment fonctionne le code, et en fait il faut coder toute les pages (oui je sais vous l'aviez dit^^') mais n'est-il pas possible d'indiquer dans le code  qu'il faut appliquer les image à une racine précise pour toutes les pages affiliées qui subiront ainsi les même modifications?

edit:
Le code réagit bien mais quand je vais sur une page de topic à l’intérieur d'un forum, la page bien que référencer dans mon code java, n'affiche pas l’image de fond.
J'ai bien relu ma syntaxe du code, et je ne vois pas ce qui m'échappe... u_

[Self]

Bonjour,

Pour le header ça doit être possible.
Pour le reste si l'on peut trouver une trace de la racine sur chaque pages de celle-ci on peut, dans le dernier code que je vous ai donné c'est le cas:

Code:

var topicLocation = $('.nav a:last').attr('href');
    if(document.location.pathname && topicLocation  == "/f7-plamo-x-figurines-x-garage-kits-x-dolls")

Ici on stock dans la variable topicLocation le dernier lien de la navigation (que l'on peut voir au dessus de topic).
Si la location ou ce lien sont égale à /f7-plamo-x-figurines-x-garage-kits-x-dolls alors on excécute le contenu entre les accolades.

[L'autre]

Merci^^

Ça  je crois que j'ai compris, mais par contre c'est assez étrange parce que le fond appiqué au sous forum ne s'affiche pas pour le le sujet bien qu'il soit inscrit dans le code. Et quand je veux éditer un nouveau message dans ce sujet,
et bien là dans la page d'édition, le fond s'affiche...

[Self]

Bonjour,

D'après ce que je vois il n'y a pas de script actif sur les sujets ?
Pouvez vous temporairement adapter le script pour mettre une image de fond à un forum qu'il m'est possible de voir en tant qu'invité s'il vous plait .

[L'autre]

Ok, voilà: http://www.otakujanaika.com/f7-plamo-x-figurines-x-garage-kits-x-dolls

Code:

$(document).ready(function(){
            var topicLocation = $('.nav a:last').attr('href');
            if(document.location.pathname && topicLocation  == "/f17-undercover"){
               $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f25-projets"){
               $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
               $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
               $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }
        });

Et la ligne qui pose problème:

Code:

}else if(document.location.pathname && topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
               $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');

Merci beaucoup pour votre aide. : )

[Self]

Re,

Esssayez plutôt comme cela:

Code:

$(document).ready(function(){
    var topicLocation = $('.nav a:last').attr('href');
    if(document.location.pathname || topicLocation  == "/f17-undercover"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname || topicLocation == "/f25-projets"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname || topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname || topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }
});

Cordialement .

[L'autre]

Le fond alternatif s'applique sur le forum général maintenant!^^'

edit: je dois quitter mon post, je re dans une heure et demi! Merci!^^

[Self]

Re,

En prenant l'ancien code changer la ligne qui pose problème:

Code:

}else if(document.location.pathname && topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
    $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');

Par:

Code:

}else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
    $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');

[L'autre]

[de retour]
Donc voilà j'ai corrigé la ligne et ça fonctionne bien.
Par contre le fond alternatif est toujours affiché sur la page d’accueil à la place de l'image principale. : )

[Self]

Re,

Essayez en ajoutant derrière l'acollade du dernier else if :

Code:

else{
   $('body').css('background-image', 'url("Adresse de l image de base")');
}

[L'autre]

Pas d'évolution ^^":

Code:

$(document).ready(function(){
            var topicLocation = $('.nav a:last').attr('href');
            if(document.location.pathname || topicLocation  == "/f17-undercover"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname || topicLocation == "/f25-projets"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
            $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname || topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else{
           $('body').css('background-image', 'url("Adresse de l image de base")');
            }
        });

[Self]

Re,

Il faut remplacer Adresse de l image de base par l'adresse de l'image: http://www.asphyres.com/1114/wp-content/uploads/2014/02/OJKfond8.jpg
dans la dernière ligne que je vous ai dit d'ajouter.
J'ai oublié de le préciser dans mon précédent message, désoler .

[L'autre]

J'aurai dû comprendre, si je l'avais lu... meaculpa.
Malheureusement le problème persiste!

Code:

$(document).ready(function(){
            var topicLocation = $('.nav a:last').attr('href');
            if(document.location.pathname || topicLocation  == "/f17-undercover"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname || topicLocation == "/f25-projets"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
            $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname || topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else{
           $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/02/OJKfond8.jpg")');
            }
        });

[Self]

Re,

En prenant l'ancien code changer la ligne qui pose problème:

Code:

}else if(document.location.pathname && topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
    $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');

Par:

Code:

}else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
    $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');

Re,

Pardonnez moi, quand je parlais de l'ancien code dans le message cité au dessus c'était du code:

Code:

        $(document).ready(function(){
                    var topicLocation = $('.nav a:last').attr('href');
                    if(document.location.pathname && topicLocation  == "/f17-undercover"){
                      $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
                    }else if(document.location.pathname && topicLocation == "/f25-projets"){
                      $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
                    }else if(document.location.pathname && topicLocation == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
                      $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
                    }else if(document.location.pathname && topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
                      $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
                    }
                });

Ce qui devrait donner:

Code:

$(document).ready(function(){
    var topicLocation = $('.nav a:last').attr('href');
    if(document.location.pathname && topicLocation  == "/f17-undercover"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname && topicLocation == "/f25-projets"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }else if(document.location.pathname && topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
        $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
    }
});

puisque nous n'avons donc normalement pas besoin du else.

[L'autre]

Donc la fonctionne super bien!^_^

Bonjour,

Pour le reste si l'on peut trouver une trace de la racine sur chaque pages de celle-ci on peut, dans le dernier code que je vous ai donné c'est le cas:

Code:

var topicLocation = $('.nav a:last').attr('href');
    if(document.location.pathname && topicLocation  == "/f7-plamo-x-figurines-x-garage-kits-x-dolls")

Ici on stock dans la variable topicLocation le dernier lien de la navigation (que l'on peut voir au dessus de topic).
Si la location ou ce lien sont égale à /f7-plamo-x-figurines-x-garage-kits-x-dolls alors on excécute le contenu entre les accolades.

Par contre si j'ai bien compris grâce au "TopicLocation", je ne devrais pas à avoir à coder toutes les pages de chaque topic C'est bien ça?
(par ce que là je dois coder chaque page de topic). : )

Code:

$(document).ready(function(){
            var topicLocation = $('.nav a:last').attr('href');
            if(document.location.pathname && topicLocation  == "/f17-undercover"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f25-projets"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }
        })

[Self]

(par ce que là je dois coder chaque page de topic).

Re,

Vous parlez plutôt des sous forums, non ?
Parce que moi je voit très bien le fond sur les topics du forum /f7-plamo-x-figurines-x-garage-kits-x-dolls par contre si je vais dans le sous forum "Lien" ce n'est pas le cas parce que l'adresse de celui-ci est /f16-liens.

Cordialement .

[L'autre]

Alors je vous  ais fait une simulation pour que vous puissiez voir, on s'y perd dans tout ces forums de forums!^^'
Je me trompe certainement dans les termes, j'espère que vous allez réussir à me suivre:

le forum racine avec le fond alternatif: http://www.otakujanaika.com/f7-plamo-x-figurines-x-garage-kits-x-dolls
dans ce forum, un sujet (codé dans le script), le fond alternatif s'affiche: http://www.otakujanaika.com/t141-figures-previews
la page deux du sujet codé: http://www.otakujanaika.com/t141p15-figures-previews
et là le fond alternatif ne s'affiche.
n.b: j'ai coché l'option "toutes les pages"

Code:

$(document).ready(function(){
            var topicLocation = $('.nav a:last').attr('href');
            if(document.location.pathname && topicLocation  == "/f17-undercover"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f25-projets"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname == "/t432-orca-cuirasse-stabat-mater-classe-demeter-1-100"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/f7-plamo-x-figurines-x-garage-kits-x-dolls"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }else if(document.location.pathname && topicLocation == "/t141-figures-previews"){
                $('body').css('background-image', 'url("http://www.asphyres.com/1114/wp-content/uploads/2014/03/Undercover0.jpg")');
            }
        });


[Self]

Re,

Sur la deuxième, troisième, quatrième page, j'ai bien le bon fond de page, essayez de vider votre cache .

[L'autre]

Cache-cache? Ah oui exact!Vous êtes géniale, merci!!

Bon pour la suite on verra une autre fois, n'abusons pas des bonnes choses!

[Self]

Quelle est la suite ? Autant le faire maintenant si j'en est les capacités .

[L'autre]

La suite c'était de rendre le logo alternatif lui aussi! : )

[Self]

Re,

Il suffit normalement d'ajouter la ligne suivante (en sautant une ligne pour une meilleure lisibilité) au if et à chaque else if voulu:

Code:

$('#i_logo').attr('src', 'adresse de l image');

Cordialement .

[L'autre]

Fonctionnel!



Merci SeLFde!^v^

[Self]

Il n'y a pas de quoi !

Bonne soirée .