Insérer image derrière le titre des pages (Créer un compte)

  • Statut : non résolu
9 sujets de 1 à 9 (sur un total de 9)
  • Auteur
    Messages
  • #561024
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    Ma configuration WP actuelle
    – Version de WordPress : 4.4.1
    – Version de PHP/MySQL :
    – Thème utilisé : OneTone version gratuite
    – Extensions en place : askimet, Magge Short code, rev slider, powr slide
    – Nom de l’hebergeur : LWS
    – Adresse du site : http://fleur-de-cerisier.com

    Problème(s) rencontré(s) :

    Bonjour à tous,

    Je souhaiterai insérer une image (bannière) derrière le titre de mes pages. J’ai essayé plusieurs choses de mon coté mais ça met tout mon site en vrac 😕

    Voici le code page.PHP si ca peut aider

    <?php
    /**
     * The template for displaying all single posts.
     *
     * @package onetone
     */
    
    get_header(); 
    
    $sidebar                   = isset($page_meta['page_layout'])?$page_meta['page_layout']:'none';
    $left_sidebar              = isset($page_meta['left_sidebar'])?$page_meta['left_sidebar']:'';
    $right_sidebar             = isset($page_meta['right_sidebar'])?$page_meta['right_sidebar']:'';
    $full_width                = isset($page_meta['full_width'])?$page_meta['full_width']:'no';
    $display_breadcrumb        = isset($page_meta['display_breadcrumb'])?$page_meta['display_breadcrumb']:'yes';
    $display_title             = isset($page_meta['display_title'])?$page_meta['display_title']:'yes';
    $padding_top               = isset($page_meta['padding_top'])?$page_meta['padding_top']:'';
    $padding_bottom            = isset($page_meta['padding_bottom'])?$page_meta['padding_bottom']:'';
    
    if( $full_width  == 'no' )
     $container = 'container';
    else
     $container = 'container-fullwidth';
     
    $aside          = 'no-aside';
    if( $sidebar =='left' )
    $aside          = 'left-aside';
    if( $sidebar =='right' )
    $aside          = 'right-aside';
    if(  $sidebar =='both' )
    $aside          = 'both-aside';
    
    $container_css = '';
    if( $padding_top )
    $container_css .= 'padding-top:'.$padding_top.';';
    if( $padding_bottom )
    $container_css .= 'padding-top:'.$padding_bottom.';';
    
    ?>
    
    <article id="post-<?php the_ID(); ?> » <?php post_class(); ?>>
      <?php if (  $display_breadcrumb == 'yes' ): ?>
      
      <section class="page-title-bar title-center no-subtitle" style="">
        <div class="container">
          <hgroup class="page-title">
            <h1>
              <?php the_title();?>
    
    <img src="url" alt="some_text"> 
            </h1>
          </hgroup>
          
          <div class="clearfix"></div>
        </div>
      </section>
      <?php endif;?>
      <div class="post-wrap">
        <div class="<?php echo $container;?>« >
          <div class="post-inner row <?php echo $aside; ?> » style= » <?php echo $container_css;?>« >
            <div class="col-main">
              <section class="post-main" role="main" id="content">
                <?php while ( have_posts() ) : the_post(); ?>
                <article class="post type-post" id="">
                  <?php if (  has_post_thumbnail() ): ?>
                  <div class="feature-img-box">
                    <div class="img-box">
                      <?php the_post_thumbnail();?>
                    </div>
                  </div>
                  <?php endif;?>
                  <div class="entry-main">
                
                    <div class="entry-content">
                      <?php the_content();?>
                      <?php
    				wp_link_pages( array( 'before' => ‘<div class="page-links"><span class="page-links-title">‘ . __( ‘Pages:’, ‘onetone’ ) . ‘</span>‘, ‘after’ => ‘</div>‘, ‘link_before’ => ‘<span>‘, ‘link_after’ => ‘</span>‘ ) );
    				?>
                    </div>
                    
                  </div>
                </article>
                <div class="post-attributes">
                  <!--Comments Area-->
                  <div class="comments-area text-left">
                    <?php
    					  // If comments are open or we have at least one comment, load up the comment template
    					  if ( comments_open()  ) :
    						  comments_template();
    					  endif;
    				  ?>
                  </div>
                  <!--Comments End-->
                </div>
                <?php endwhile; // end of the loop. ?>
              </section>
            </div>
            <?php if(  $sidebar =='left' || $sidebar =='both' ):?>
            <div class="col-aside-left">
              <aside class="blog-side left text-left">
                <div class="widget-area">
                  <?php get_sidebar('pageleft');?>
                </div>
              </aside>
            </div>
            <?php endif; ?>
            <?php if(  $sidebar =='right' || $sidebar =='both' ):?>
            <div class="col-aside-right">
              <?php get_sidebar('pageright');?>
            </div>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </article>
    <?php get_footer(); ?>

    Vila merci d’avance !!

    #1047946
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    Petit up =)

    #1047947
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    Bonjour, la solution c’est css.
    dans ton « .page-title » un backgroud-url. ça devrait fonctionner 🙂

    #1047948
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    Coucou et merci de ta réponse ! Voila le code que j’ai rajouté mais ça ne marche pas 😕

    .page-title-bar {
    
    	background-color: transparent;
    
    	background-image:url(http://fleur-de-cerisier.com/wp-content/uploads/2016/02/baniere-titre.jpg);
    
    	background-position: ;
    
    	padding: 30px 0 10px;
    
    	border-top:1px solid transparent;
    
    	border-bottom: 1px solid transparent;
    
    	color: « fff;
    
    }

    #1047949
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    J’ai parlé top vite, j’ai trouvé ou il fallait l’insérer =)
    Par contre l’image est tronquée http://fleur-de-cerisier.com/106-2/
    pourrait tu me dire ce que je doit modifier pour agrandir le content du titre pour que l’image soit visible en entier ?

    .title-center .page-title {
    
    	margin-bottom: 5px;
    
    	background-image:url(http://fleur-de-cerisier.com/wp-content/uploads/2016/02/baniere-titre.jpg);
    	background-size: 550px 75px;
    	background-repeat: no-repeat;
    	background-position:center top;
    }

    #1047950
    Flobogo
    Modérateur
    Maître WordPress
    18599 contributions

    Bonjour,

    Pour la taille, c’est background-size: 550px 75px;
    Modifiez 550px.
    Mais le mieux, ce serait de l’exprimer en % si vous voulez que ce soit responsive.

    #1047951
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    Bonjour Flobo et merci encore de votre réponse !

    En fait ce que j’essaie de dire c’est que mon image n’est pas visible entièrement, peu importe la taille que je lui donne. On dirai qu’il y a un code qui dit que le « content » du titre doit être tout petit du coup mon image est rognée (normalement les nuages descendent beaucoup plus bas et il y a un gros rectangle doré).

    Peut on agrandir la taille que doit prendre le titre des pages pour que l’image soit visible entier ?

    #1047952
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    Alors en fait le code n’était sous la bonne classe. Il fallait le mettre dans

    .title-center .container {

    et non pas dans

    .title-center .page-title {

    =)

    #1047953
    Livie
    Membre
    Chevalier WordPress
    168 contributions

    merci beaucoup pour ton aide Flobo !! ✅

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