- 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 et 5 mois.
-
AuteurMessages
-
18 mars 2016 à 13 h 10 min #561024
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.comProblè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 !!
20 mars 2016 à 10 h 50 min #1047946Petit up
24 mars 2016 à 10 h 20 min #1047947Bonjour, la solution c’est css.
dans ton « .page-title » un backgroud-url. ça devrait fonctionner 🙂26 mars 2016 à 19 h 50 min #1047948Coucou 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;
}26 mars 2016 à 19 h 59 min #1047949J’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;
}26 mars 2016 à 23 h 55 min #1047950Bonjour,
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.27 mars 2016 à 9 h 26 min #1047951Bonjour 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 ?
27 mars 2016 à 9 h 42 min #1047952Alors 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 {
27 mars 2016 à 9 h 50 min #1047953merci beaucoup pour ton aide Flobo !! ✅
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.