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

  • Statut : non résolu
  • Ce sujet contient 8 réponses, 3 participants et a été mis à jour pour la dernière fois par Livie, le il y a 8 années.
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
    20077 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.