28172 sujets

CSS et mise en forme, CSS3

Image d'en-tête

Bonjour à tous et à toutes,

voilà le soucis avec lequel je me débats depuis quelque jour... Je débute dans l'utilisation de Wordpress et d'autant plus dans la manipulation du CSS et du PHP. Mon thème ne permet pas d'intégrer une image d'en-tête directement dans le header du coup je suis obligée d'aller bidouiller dans le code mais je n'arrive pas à obtenir ce que je souhaite. A savoir, j'ai réalisé une image avec photoshop et je souhaiterais l'intégrer dans l'entête de mon site, c'est à dire qu'elle reste fixe au-dessus de mes posts sur ma page d'accueil. (Tout en conservant le nom du site et le menu mobile sur la droite, lorsque l'on scrolle sur le blog) Et pour couronner le tout je voudrais que mon image soit en responsive comme le reste du site... Une idée sur la question ? Merci d'avance de vos réponses.

Laurette
Bonjour,

Assez souvent, la portion de code des en-têtes des thèmes WP se trouve dans un fichier dénommé header.php. Mais sans plus d'infos sur le thème - et surtout sans voir le code - difficile d'en dire plus.
Bonjour Olivier,

en effet je comprends que cela soit obscur pour toi avec si peu d'infos... Voici donc le php, présent dans la page header.php (ceci est du petit chinois pour moi) :

<html <?php language_attributes(); ?>>

<head>

	<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />	
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

	<div id="site-wrapper" class="wrapper m-top-bar">

	<header class="top-bar">

		<div class="tb-logo">
			<?php
			/**
			 * Check if there is a uploaded logo
			 */
			$kouki_logo = of_get_option( 'kouki_logo' );			
			if( $kouki_logo ) : ?>
				<a href="<?php echo esc_url(home_url()); ?>" class="logo">
					<img src="<?php echo esc_url($kouki_logo); ?>" alt="<?php bloginfo( 'name' ); ?>">
				</a>				
			<?php else : ?>
				<h1><a href="<?php echo esc_url(home_url()); ?>"><?php bloginfo( 'name' ); ?></a></h1>
			<?php endif; ?>
		</div>

		<div class="navigation-toggle-wrapper">
			<a href="#menu" id="toggle"><span></span></a>
			<nav id="menu" class="t-lightweight" role="navigation">
				<span class="menu-detail"></span>
				<ul>
					<?php wp_nav_menu( array( 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
				</ul>
			</nav>
		</div>
<div id="top-social">
				
<a href="http://instagram.com/lauretteflechette" target="_blank"><i class="fa fa-instagram"></i></a>				
<a href="http://hellocoton/" target="_blank"><i class="fa fa-hellocoton"></i></a>																				
						
		</div>

</header>
Il est possible que celui-ci présent dans index.php aide aussi, et le nom du thème est Kouki :
*/
get_header(); ?>

<?php 
/**
 * Show blog description
 */
if ( ! of_get_option('le_mieux_est-l-ennemi-du-bien') ) { ?> 
  <h1 class="pad-1-1-2 aligncenter">
    <?php bloginfo( 'description' ); ?>
  </h1>
<?php } ?>

<main role="main">

	<?php if ( have_posts() ) : ?>

		<div id="content" class="js-masonry">
			<?php while ( have_posts() ) : the_post();
				get_template_part( 'content', 'masonry' );
			endwhile; ?>
		</div>

		<?php kouki_paging_nav();

	else :

		/**
		 * If no posts, include the "No posts found" template.
		 */
		get_template_part( 'content', 'none' );

	endif; ?>

</main>

<?php get_footer(); ?>

Modifié par lauretteflechette (05 Aug 2015 - 15:35)
Le logo il est ici :
<img src="<?php echo esc_url($kouki_logo); ?>" alt="<?php bloginfo( 'name' ); ?>">

Si vous voulez court-circuiter le php il suffit de remplacer par votre lien :
<img src="http://le-site-web.com/url-du-logo/" alt="un titre pour le logo">

Et la classe css à designer est celle-ci :
.logo img {
/* votre code css à mettre ici */
}
Bonjour et tout d'abord merci de cette réponse... J'ai tenté votre solution mais rien ne se passe...
Voici le header.php modifié : 

<head>

	<meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />	
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

	<div id="site-wrapper" class="wrapper m-top-bar">

	<header class="top-bar">

		<div class="tb-logo">
			<?php
			/**
			 * Check if there is a uploaded logo
			 */
			$kouki_logo = of_get_option( 'kouki_logo' );			
			if( $kouki_logo ) : ?>
				<a href="<?php echo esc_url(home_url()); ?>" class="logo">
					<img src="http://lauretteflechette.com/wp-content/uploads/2015/08/fond-blog-1024x367.png" alt="lauretteflechette">
				</a>				
			<?php else : ?>
				<h1><a href="<?php echo esc_url(home_url()); ?>"><?php bloginfo( 'name' ); ?></a></h1>
			<?php endif; ?>
		</div>

		<div class="navigation-toggle-wrapper">
			<a href="#menu" id="toggle"><span></span></a>
			<nav id="menu" class="t-lightweight" role="navigation">
				<span class="menu-detail"></span>
				<ul>
					<?php wp_nav_menu( array( 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
				</ul>
			</nav>
		</div>
<div id="top-social">
				
<a href="http://instagram.com/lauretteflechette" target="_blank"><i class="fa fa-instagram"></i></a>				
<a href="http://www.hellocoton.fr/mapage/lauretteflechette" target="_blank"><i class="fa fa-hellocoton"></i></a>																				
						
		</div>

	</header>


Merci.

Laure
Modérateur
Bonjour lauretteflechette,

Si jamais ton pseudo évoque ton prenom, alors bonne fête ! Smiley banane

Ensuite pour ton problème. La partie de code suivante que tu as dans header.php :
$kouki_logo = of_get_option( 'kouki_logo' );			
<?php if( $kouki_logo ) : ?>
	<a href="<?php echo esc_url(home_url()); ?>" class="logo">
		<img src="http://lauretteflechette.com/wp-content/uploads/2015/08/fond-blog-1024x367.png" alt="lauretteflechette">
	</a>				
<?php else : ?>
	<h1><a href="<?php echo esc_url(home_url()); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php endif; ?>

Si tu regardes bien tu devrais pouvoir comprendre sans connaitre le php.
Tout d'abords ce code récupère dans une variable kouki_logo le résultat d'une fonction of_get_option( 'kouki_logo' );
Ensuite il s'agit d'un if/else classique sur une variable qui dit que si elle existe (ca veut dire que la fonction au dessus a bien retourné quelque-chose pour remplir la variable) alors j’exécute le code sinon j’exécute le else.
Quand on regarde les codes, l'un affiche le logo et l'autyre juste un tire. Avec tout ça on peut donc en déduire que la fonction of_get_option( 'kouki_logo' ) est là pour savoir si tu as mis un logo (via l'interface) ou non. En l'occurence je suis pret a parier que non, donc le if ne s'execute pas au profit du else et tu vois seulement un titre sur ton site. Est-ce bien ça ?

Pour contourner ça :
- Soit tu postes le logo depuis l'interface d'admin
- Soit tu remplace totu ce code par ce que tu veux (ici ton image)


Par contre je crois que c'est une solution un peu trop... trop ! Smiley langue

Par rapport au site que tu donnes en exemple (nanie bears) il est pertinent d'utiliser l'image en logo. Or dans ton cas l'image est très grande et ton logo tout petit.
Il serait peut etre plus pertinent de laisser le code php tranquille, de séparer ton logo de son fond, d'utiliser ton logo via l'interface d'administration (il le mettre à la place du titre) et de mettre ton fond en background de ta page en CSS.
Qu'en penses-tu ?
Modifié par _laurent (10 Aug 2015 - 17:21)
Encore mieux... Voila le rendu escompté... J'arrive à ce résultat en modifiant le html dans l'editeur de mon navigateur mais impossible de le reproduire en dur...

C'est très agaçant !
upload/59478-uneblog-co.jpg
Modifié par lauretteflechette (10 Aug 2015 - 17:33)
Bonjour Laurent,

et merci de ta réponse que j'ai vu après avoir posté mon propre complément d'info... Et du coup très bonne fête à toi aussi Smiley cligne

Quand à tes explications elles sont limpides bien que le code le soit beaucoup moins pour moi Smiley langue

Je comprends ton point de vue mais l'idée ici est plutôt d'apporter un peu de vie et de marquer un univers bien présent depuis la page d'accueil.

Le fait de conserver la top-bar tout en haut du site permet de s'identifier facilement sur l'ensemble des pages du site avec le Laurette Flechette (voir la capture ci-dessus)

Et pour en revenir au php (un peu plus clair après tes explications) je ne peux hélas pas poster le logo depuis l'interface cela serait trop simple, seul le titre est éditable...

Je vais donc tenter ta 2ème solution à savoir remplacer le code par l'image...

Espérons que cela fonctionne car je suis têtue !!

Merci infiniment de ton aide !
Re...

Je viens de comprendre la problématique... (Je comprends vite mais il faut m'expliquer longtemps)
En effet, lorsque je remplace mon logo l'image n'est pas du tout adaptée étant donné que le logo sur le thème en question apparaît à la place de Laurette Flechette....
Mais comme l'atteste ma capture d'écran ce n'est pas ce "logo" la que je veux modifier... c'est bel et bien ajouter un image au-dessus de mes articles... Bref tel qu'illustré sur la capture dans le poste précédent... Du coup je pense pas que ça soit dans le header qu'il faille aller bidouiller...
Modifié par lauretteflechette (10 Aug 2015 - 18:07)
J'ai réussi !!!! En fait c'était dans le index.php... Du coup je ne l'ai que sur ma page d'accueil mais c'est plutôt pas mal finalement !

Merci à vous !

Laurette
Modérateur
Ha bah tant mieux alors.
Désolé j'ai pas été très réactif, j'étais pris ailleurs.
Si jamais tu veux l'avoir sur toute les pages qui utilise header.php tu peux aussi mettre ton code juste après la balise de fermeture </header> de cette façon le code viendra avec le header à chaque fois sans être forcément dedans.

Bonne continuation !
Merci de ta réponse, ben entre-temps j'ai changé de thème... La structure du premier ne me convient pas... Du coup j'ai tout à recommencé à commencer par la création du thème enfant... grrrr

Merci de ton coup de main !

Bonne journée
Hello,

alors qui dit nouveau thème, dit nouvelle question... Dans l'ensemble j'ai réussi à obtenir à peu prés ce que je souhaitais... Même si ce n'est pas tout à fait comme ça que je l'imaginais mais tant pis ça fera l'affaire... Cependant petite question, comme sur mon premier thème je n'arrive pas à élargir l'espace dédié aux articles. J'aimerais que la largeur article + colonne de droite soit égale à la largeur du header (mais toujours en responsive bien sur). Une idée de l'endroit ou changer ces éléments ?

Merci beaucoup à cette communauté très active !
Laure
Modifié par lauretteflechette (12 Aug 2015 - 15:34)
Modérateur
Re,

Quelque-part dans le CSS tu as un :
.inner-wrap {
    max-width: 1218px;
    margin: 0 auto;
}

c'est le max-width qui limite le contenu a 1218px de large. A toi de voir ce que tu veux en faire (le supprimer, mettre 90%, le réduire, etc).
Pour le supprimer, ne le supprime pas vraiment du CSS du theme mais overide-le proprement avec ton CSS custom en mettant max-width:none;

Et pense aussi a créer un nouveau sujet pour chaque nouvelle question, c'est plus clair, plus lisible et plus facile a suivre (et t'auras plus de chance de te faire aider car il apparaîtra dans les nouveau sujets sur la page d'accueil) Smiley biggrin
Merci Laurent !

J'y cours !! Et je suis désolée... Je ne voulais pas polluer c'est pourtant quelque chose que j'ai l'habitude de faire de créer de nouveaux sujet pour un nouveau... sujet Smiley smile

Merci à toi je vais tenter de bidouiller ça à ma sauce.

Bonne fin d'après-midi.
Merci à toi tout fonctionne parfaitement ! J'ai même réussi à trouver le moyen de régler la taille de mes images qui du coup ne fonctionnaient plus sur ma page d'accueil.

Merci beaucoup de ton aide !

J'arrive même à comprendre de mieux en mieux la logique du CSS !
Il suffit de s'accrocher en fait !
Sujet clos
Aller à