[Résolu] modifier le header

kira · septembre 2013

:cool: J'ai vraiment essayé dans tout les sens de enlever ce gros titre "pedro's blog" pour le remplacer par une image qui se nomme : pedroblog-05.png http://jd97290.free.fr/pluxml_typebased/ avec l'effet de superposition manchot/pedro's blog

Le Header.php :

<?php if(!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="<?php $plxShow->defaultLang() ?>" lang="<?php $plxShow->defaultLang() ?>">

<head>

<?php eval($plxShow->callHook('MySearchForm')) ?>
<title><?php $plxShow->pageTitle(); ?></title>
<img src="data/images/pedroblog-05.png" alt="montextealternatif" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
<?php $plxShow->meta('description') ?>
<?php $plxShow->meta('keywords') ?>
<?php $plxShow->meta('author') ?>

<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/stylesheet.css" media="screen" />

<?php $plxShow->templateCss() ?>

<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />

</head>

<body>
<img src="data/images/pedroblog-05.png" alt="montextealternatif" />
<div id="wrapper">

<div id="header">
<h1><?php $plxShow->mainTitle('link'); ?></h1>
<p><?php $plxShow->subTitle(); ?></p>
</div>

<hr />

Le résultat final que je souhaiterai :

Gzyg · septembre 2013

Il faut insérer ton image par l'intermédiaire du fichier style.css

cherche la balise #header et rajoute :

#header {
background-image : url(img/ton_image.png);
background-position : 50% 50%;
background-repeat: none;
}

peut-être faudra-t-il aussi modifier la hauteur pour que ton image soit entièrement visible :

tu rajouteras alors :

height : 300px (c'est un exemple, fais en fonction de la hauteur de ton image.

Ha ! et il faut mettre ton image dans le dossier img de ton thème ;

à plus,

Gzyg

chriss · septembre 2013

Bonjour,

tu pourrais le faire si tu mets l'image de l'oiseau en background

body{
 background : url (data/images/pedroblog-05.png) no-repeat;
background-position: center top;
}

chriss · septembre 2013

Gzyg a écrit:

#header {
background-image : url(img/ton_image.png);
background-position : 50% 50%;
background-repeat: none;
}

attention, avec " background-position : 50% 50%; " l'image seras au millieu de la page ( 50% en horizontal et 50% en vertical).

Gzyg · septembre 2013

Non, elle sera au milieu de la div id="header" si tu regardes bien le code que j'ai placé

à plus,

éricj

kira · septembre 2013

J'ai couper/oté çà dans le fichier header ce qui a eu pour effet de supprimer le gros titre pedro's blob :

<div id="header">
<h1><?php $plxShow->mainTitle('link'); ?></h1>
<p><?php $plxShow->subTitle(); ?></p>
</div>

donc reste à center l'image

Gzyg · septembre 2013

Tu as fait quoi ? 8)

Tu as supprimé juste une partie du header ???

à plus,

Gzyg

chriss · septembre 2013

bonjour,
tu dois avoir une erreur dans ton code:

[== HTML ==]
<head>

<div class="searchform">
	<form action="http://jd97290.free.fr/pluxml_typebased/index.php?search" method="post">
				<p class="searchfields">
		<input type="text" class="searchfield" name="searchfield" value="" />
		<input type="submit" class="searchbutton" name="searchbutton" value="Ok" />
		</p>
	</form>
</div>

		<title>        pedro&#039;s blog</title>
<img src="data/images/pedroblog-05.png" alt="montextealternatif" />
text-align:center;
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<div> et <img> devrait être après <body> et non dans <head>

tu as du confondre <head> et <header>

kira · septembre 2013

Forcément vous ne pouvez pas voir les fichiers du thème. Mais dans les fichiers css rien (au nombre de deux) ne me dit.

J'ai supprimé ce bout dans le fichier header.php à la fin du fichier (voir le premier message posté #1) :

<div id="header">
<h1><?php $plxShow->mainTitle('link'); ?></h1>
<p><?php $plxShow->subTitle(); ?></p>
</div

ce qui a eu pour effet d'enlever le texte "pedro's blog"

ps : si je ne réponds pas à ton message c'est que je n'y connaît absolument rien et tout çà c'est un peu du chinois pour moi même si je "capte" certaine choses.

chriss · septembre 2013

mpedro a écrit:

Forcément vous ne pouvez pas voir les fichiers du thème. Mais dans les fichiers css rien (au nombre de deux) ne me dit.

2 quoi? fichiers css? à part ceux des plugins, 1 seul apparait dans la source:

<link rel="stylesheet" type="text/css" href="http://jd97290.free.fr/pluxml_typebased/themes/flak/css/stylesheet.css" media="screen" />

Gzyg · septembre 2013

euh... mpedro, avant de tout casser sur ton site, prend le temps de découvrir ce qu'est html et css :

http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Rien de bien compliqué comme tu le verras mais ce sont des bases essentielles.

à plus,

Gzyg

kira · septembre 2013

Ha oui désolé c'est vrai que dans la source du thème flak, il n'y a qu'une feuille CSS. Mais quand j'ai voulu mettre le thème "typebased" ça a merdouillé à max et j'ai laissé le nom de répertoire flak parce-que ça fonctionnait.
Tout ça s'est passé en recopiant tout les fichiers data (images etc...) et quand le répertoire du thème était nommé "typebased" : PluXml était HS. Alors que en nommant flak le blog fonctionnait.
C'est dommage j'ai pas cherché plus loin pour faire les choses correctement car mon PC déconne sec (chauffe du processeur et coupures intempestives).

édit : oui il manque les bases c'est un peu empirique et pifométrique mais ça ce système fonctionne aussi si on fait des backups réguliers. Merci pour lien je prendrai le temps un jour.

Dernière petite chose : comment déplacer l'image vers la droite au centre du blog ?

chriss · septembre 2013

eh eh eh il doit être tard chez toi!
attention tu as un script " <script id="_wau6px"> " après la balise de fermeture </body>. le script doit être juste avant.

chriss · septembre 2013

bonsoir,
crée une class pour ton image
et dans le css
. xxx{
margin-left: auto;
margin-right: auto;
}

edit: il faudra peut-être rajouter un width: 100%; dans .body du css

[== CSS ==]
body
{
	background:#fff;
	font: 76%/115% georgia,verdana,arial;
	text-align:left;
	line-height:20px;
	color:#444;
	border-top:10px solid #eee;

       width:100%;
}

kira · septembre 2013

J'ai fais au + simple et rapide car je ne sais pas créer de class, çà risque de'être long : <IMG SRC="data/images/pedroblog-05.png" align="text-align:center">

Merci pour l'aide et les conseils à suivre pour bien débuter, et la réactivité du forum.

************

@Chriss par rapport a ton message #10
2 quoi? fichiers css? à part ceux des plugins, 1 seul apparait dans la source:
<link rel="stylesheet" type="text/css" href="http://jd97290.free.fr/pluxml_typebased/themes/flak/css/stylesheet.css"; media="screen" />

Comment peux-tu connaître ce chemin : " href="http://jd97290.free.fr/pluxml_typebased/themes/flak/css/stylesheet.css"; ?? alors que ce n'est pas normalement celui du thème typebased

chriss · septembre 2013

bon matin mpedro,

cette adresse je l,ai trouvé dans le fichier source .... et si je clique dessus je vais bien sur le fichier CSS

EDIT: encore la même GROSSE erreur, La <div class="searchform"> .....</div> dans <head> et non après <body>
cela te crée pleins erreurs (57).
http://validator.w3.org/check?uri=http%3A%2F%2Fjd97290.free.fr%2Fpluxml_typebased%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

kira · septembre 2013

J'avais bien compris que c'était par le FTP que tu étais passé.
Mais à partir de la racine du FTP normalement tu n'a pas accès à tout çà, sauf à avoir le mot de passe du FTP ?
En tapant ce chemin : http://jd97290.free.fr/pluxml_typebased/ tu te trouves directement sur le blog, point barre! sans pouvoir aller plus loin dans la reconnaissance des répertoires.

Il y a quelque chose que je ne pige pas?

(Pour la même GROSSE erreur, des erreurs (57), je ne sais pas faire donc pour le moment je laisse en l'état par contre le blog ne retourne aucun message d'erreur et il fonctionne).

Stéphane · septembre 2013

@mpedro: il suffit de taper http://jd97290.free.fr/ dans une navigateur pour voir toutes les dossiers sur ton espace free.fr. Je te conseille de mettre un fichier index.html à la racine de ton hébergement pour que l'on ne puisse plus voir les dossiers

chriss · septembre 2013

mpedro a écrit:

J'avais bien compris que c'était par le FTP que tu étais passé.
.........
(Pour la même GROSSE erreur, des erreurs (57), je ne sais pas faire donc pour le moment je laisse en l'état par contre le blog ne retourne aucun message d'erreur et il fonctionne).

Non non pas par FTP un simple navigateur y arrive, ici Firefox. clic droit > code source de la page.

:cool:

pour les 57 erreurs ce sont des erreurs de codages! des erreurs de validation, W3C!
http://validator.w3.org/check?uri=http%3A%2F%2Fjd97290.free.fr%2Fpluxml_typebased%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

rockyhorror · septembre 2013

Salut,

Je vois que tu utilises le thème extreme-georgia. Si tu part des fichiers originaux voici ce que tu peut faire:

Tu edite le fichier "header.php" du thème extreme-georgia
tu remplace les lignes suivantes:

<div id="header"><!-- Begin header -->
	<h1><?php $plxShow->mainTitle('link'); ?></h1>
	<p><?php $plxShow->subTitle(); ?></p>
</div>

par

<div id="header"><!-- Begin header -->
	<div id="logo">
		<h1><?php $plxShow->mainTitle('link'); ?></h1>
		<p><?php $plxShow->subTitle(); ?></p>
	</div>
</div>

Tu edite ensuite le fichier "css/stylesheet.css" du thème
Tu ajoutes:

#logo
{
	background: url(../images/mon-logo.png) no-repeat center;
	overflow: hide;
}

Oublie pas de placer ton logo (mon-logo.png) dans le répertoire "images" du thème.

kira · septembre 2013

@rockyhorror
Puisque ça fonctionne comme çà et que l'image que je voulais centrer est centrée, pourquoi faire les modifs que tu préconises ?

nouveau fichier header.php

[== Indéfini ==]
<?php if(!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php $plxShow->defaultLang() ?>" lang="<?php $plxShow->defaultLang() ?>">

<head>

<?php eval($plxShow->callHook('MySearchForm')) ?>
	<title><?php $plxShow->pageTitle(); ?></title>


<p align="center"><img src="data/images/pedroblog-05.png"></p>


	<meta http-equiv="Content-Type" content="text/html; charset=<?php $plxShow->charset(); ?>" />
	<?php $plxShow->meta('description') ?>
	<?php $plxShow->meta('keywords') ?>
	<?php $plxShow->meta('author') ?>

	<link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/stylesheet.css" media="screen" />
	
	<?php $plxShow->templateCss() ?>

	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />

</head>

<body>

	<div id="wrapper"><!-- Begin wrapper -->
			
		<hr />

rockyhorror · septembre 2013

C'est juste une façon de faire, le résultat sera le même, donc y'a pas d'obligation.

kira · septembre 2013

Je comprends qu'il faut mieux faire les choses dans "les règles de l'art".
Merci pour les commentaires.

Stéphane · septembre 2013

@mpedro: c'est quoi ce code html dans la balise <head> ?

<?php eval($plxShow->callHook('MySearchForm')) ?>
	<title><?php $plxShow->pageTitle(); ?></title>

<p align="center"><img src="data/images/pedroblog-05.png"></p>

à supprimer et à mettre dans la partir <body>. Nettoie ton code et respectant les règles html. Tes pages auront un meilleur comportement avec des erreurs en moins.

[Résolu] modifier le header

Réponses