changer de background selon la page (Créer un compte)

Accueil › Forums › WordPress › changer de background selon la page
  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • 14 mai 2011 à 15 h 00 min #495015
    system7
    Membre
    Padawan WordPress
    54 contributions

    Bonjour,

    Je souhaiterais savoir comment est-il possible de modifier le background de ma

    selon la page que l’on visite sur mon site ;
    Plus concrètement, j’aimerais pouvoir remplacer l’espèce de gribouillage orange et vert (image ci-dessous) par un autre quand on clique par exemple sur la page « contact » au lieu de « présentation », et ainsi pouvoir avoir un background différent pour chaque page de mon site !

    1120050177.jpg

    Autrement dit, dans quel(s) fichier(s) dois-je intervenir ? Sachant que pour l’instant j’ai placé le background via le fichier css de mon thème, et je ne sais pas si je dois créer un fichier css pour chacune de mes pages, où si une fonction suffit pour appeler une autre image sur mon fichier page.php pour chacune de mes autres pages dynamiques.

    Voici le code css qui correspond à mon background :

    div#container {
    background-color: orange;
    background-image: url(« ../images/content2.jpg »);
    background-repeat : no-repeat ;
    background-position:top right;
    height:550px;
    margin:0 0 0 0;
    width:100%;
    }

    et mon fichier page.php

    <?php get_header() ?>

    	<div id="container">
    	<?php get_sidebar() ?>
    		<div id="content">

    <?php the_post() ?>

    			<div id="post-<?php the_ID() ?> » class= »<?php sandbox_post_class() ?>« >
    				<h2 class="entry-title"><?php the_title() ?></h2>
    				<div class="entry-content">
    <?php the_content() ?>

    <?php wp_link_pages('before=<div class="page-link">‘ . __( ‘Pages:’, ‘sandbox’ ) . ‘&after=</div>‘) ?>

    <?php edit_post_link( __( 'Edit', 'sandbox' ), '<span class="edit-link">‘, ‘</span>‘ ) ?>

    				</div>
    			</div><!-- .post -->

    <?php if ( get_post_custom_values('comments') ) comments_template() // Add a key+value of "comments" to enable comments on this page ?>

    		</div><!-- #content -->
    	</div><!-- #container -->


    <?php get_footer() ?>

    Merci par avance, j’espère que ma question est claire

    14 mai 2011 à 15 h 18 min #769898
    Laurent H
    Membre
    Chevalier WordPress
    126 contributions

    Dans ta feuille de style, tu peux mettre :

    body.page-id- div#container {
      background-image: url(« une-autre-image »)
    }

    14 mai 2011 à 15 h 42 min #769899
    system7
    Membre
    Padawan WordPress
    54 contributions

    Merci pour la réponse, j’ai essayé mais cela ne fonctionne pas ;
    J’ai remplacé le par (qui correpond au numéro d’une autre page) mais l’autre background n’apparait pas à la place du premier.

    Voici le code que j’ai inséré

    body.page-id- div#container { 
      background-image: url(« ../images/content3.jpg »); 
    }

    14 mai 2011 à 15 h 54 min #769901
    wasicu
    Membre
    Maître WordPress
    2752 contributions

    Salut system7
    supprime les et cela marchera (enfin si tu as le body_class() pour ton body.)

    Toujours satisfait de sandbox ?
    😉

    14 mai 2011 à 16 h 31 min #769902
    system7
    Membre
    Padawan WordPress
    54 contributions

    Hello Wasicu =]
    J’ai essayé sans les mais toujours rien ;
    Comment savoir si la fonction body_class est active sur mon wordpress ?
    J’ai repéré seulement dans mon fichier header.php la fonction <body class=" »>

    Mais ça n’a pas l’air de fonctionner ;

    SandBox reste ‘presque parfait’ pour l’instant, j’en suis plutôt satisfait ! 😉
    Mais je suis loin d’avoir terminé mon projet haha

    14 mai 2011 à 16 h 47 min #769903
    wasicu
    Membre
    Maître WordPress
    2752 contributions

    la sandbox_bodx_class c’est surement la meme chose.
    Tu fais un clic droit – code source de la page lorsque tu te trouves sur la page désirée (la id 80 dans notre cas) et tu regardes quelle est la classe qui lui est donnée dans le body. c’est celle-ci qu’il faudra mettre. Ca devrait etre quelque chose dans le genre de ce que Laurent t’a évoqué.
    Si c’est la bonne et que cela ne fonctionne pas, c’est qu’il y a une histoire de priorités dans le css, dans ce cas tu mets ca :

    .page-id-80 div#container { 
      background-image: url(« ../images/content3.jpg ») !important; 
    }

    14 mai 2011 à 16 h 49 min #769904
    Laurent H
    Membre
    Chevalier WordPress
    126 contributions

    Avec sandbox, ça a l’air d’être « body.pageid-80 » qu’il faut. Mais l’idée, c’est de regarder la source HTML de ta page, et de trouver une classe qui sera attribuée au body pour ta page, et seulement pour celle-ci.

    14 mai 2011 à 17 h 07 min #769905
    system7
    Membre
    Padawan WordPress
    54 contributions

    Waw, un grand merci à vous deux =]

    pour info en regardant le code source de la page (id 80), j’ai trouvé ceci pour ma balise body :

    Mais au final, cela marche très bien en plaçant dans mon css ce code :

    body.pageid-80 div#container {
    background-image: url(« ../images/content3.jpg »);  
    }

    J’imagine que dans mon css, je dois créer une nouvelle class de ce type pour chaque nouveau background que je veux intégrer à telle page ?

    Merci encore 😉

    14 mai 2011 à 17 h 19 min #769906
    system7
    Membre
    Padawan WordPress
    54 contributions

    Par la même occasion, comment appliquer la même class à plusieurs « pageid » sans avoir à recréer une nouvelle class pour chaque page ?
    Merci

    14 mai 2011 à 17 h 28 min #769907
    wasicu
    Membre
    Maître WordPress
    2752 contributions
    system7 wrote:
    J’imagine que dans mon css, je dois créer une nouvelle class de ce type pour chaque nouveau background que je veux intégrer à telle page ?

    Merci encore 😉

    Oui, définir un background pour chaque page en utilisant sa classe perso.

    14 mai 2011 à 17 h 31 min #769900
    wasicu
    Membre
    Maître WordPress
    2752 contributions
    system7 wrote:
    Par la même occasion, comment appliquer la même class à plusieurs « pageid » sans avoir à recréer une nouvelle class pour chaque page ?
    Merci

    Pas trop compris du fait que le pageid est déjà une classe.
    Si plusieurs page doivent avoir la meme image background, tu les sépares par une virgule dans la def css.

    body.pageid-80 div#container, body.pageid-108 div#container, body.pageid-2 div#container {
    background-image: url(« ../images/content3.jpg »);  
    }

    14 mai 2011 à 17 h 43 min #769908
    system7
    Membre
    Padawan WordPress
    54 contributions

    Okay, je me suis mal exprimé mais c’était bien le résultat que je souhaitais =]
    Je savais pas comment séparer les différentes pages,
    Gracias !

    Systemsand

  • Auteur
    Messages
12 sujets de 1 à 12 (sur un total de 12)
  • Vous devez être connecté pour répondre à ce sujet.