Image en haut 5.1.7

bili · février 2013

Bonjour,
J'ai installé la version 5.1.7 et dans le théme par défaut, je souhaiterai mettre une image tout en haut à la place du nom du site.
Merci

Haruka · février 2013

Il faut éditer le fichier header.php de ton thème et remplacer le code de la div "header-title",

<?php $plxShow->mainTitle('link'); ?>

par le code ton image.

Si tu n'en a pas besoin tu peux supprimer le code ci-dessous, qui permet d'afficher le sous-titre du blog.

<p>
  <?php $plxShow->subTitle(); ?>
</p>

jack31 · février 2013

et remplacer le code de la div "header-title",

A condition qu'il sache le faire....

Un petit truc que je viens d'inventer mais c'est à l'arrache et peut-être pas catholique.

Rajouter un petit quelque chose dans la feuille de style du genre...

#title00 {
	background: url("chemin-vers-son-image/img/header.png") no-repeat;
	border-bottom: none;
	margin: 0;
	padding: 0;
	height: 180px;

Dans son header....

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

Avec ou sans l'appel aux titre et sous titre. Il n'y a plus qu'à adapter à sa taille st sa position.

Stéphane · février 2013

Bonjour bili
A partir du theme par défaut de PluXml, ce genre de code devrait également fonctionner. C'est le même principe que ce que te proposes @jack31

header .content {
	background: url('dossier/images.png') no-repeat top left;
	background-position: 25px 0;
	height:80px;
}

Les tailles seront à adapter

bili · février 2013

Merci pour vos réponses aussi rapide.
j'ai pu rajouter mon image mais ais je la possibilité qu'elle remplisse tout le bandeau?
Je vais me pencher sur les tutos.
En attendant voici le résultat : http://peche.caillac.free.fr/

chriss · février 2013

bonjour,

bili a écrit:

Merci pour vos réponses aussi rapide.
j'ai pu rajouter mon image mais ais je la possibilité qu'elle remplisse tout le bandeau?
Je vais me pencher sur les tutos.
En attendant voici le résultat : http://peche.caillac.free.fr/

oui en mettant une image plus grande, genre 960px de largeur. Ton image d,entête actuelle ne faisant que 499px en l'agrandissant serait flou

Jerry Wham · février 2013

chriss a écrit:

bonjour,

bili a écrit:

Merci pour vos réponses aussi rapide.
j'ai pu rajouter mon image mais ais je la possibilité qu'elle remplisse tout le bandeau?
Je vais me pencher sur les tutos.
En attendant voici le résultat : http://peche.caillac.free.fr/

oui en mettant une image plus grande, genre 960px de largeur. Ton image d,entête actuelle ne faisant que 499px en l'agrandissant serait flou

Ca ne résoudra rien car pour un écran large, supérieur à 960 px, il y aura toujours du vide de chaque côté.

bili · février 2013

J'ai modifié le format de l'image et en effet il y a des blancs, mais l'affichage n'est il pas trop lent

chriss · février 2013

jerry Wham a écrit:

Ca ne résoudra rien car pour un écran large, supérieur à 960 px, il y aura toujours du vide de chaque côté.

parce qu'il y a dans le css un max-width à 1000px et un padding droite et gauche de 20px.

chriss · février 2013

chriss a écrit:
bili a écrit:

J'ai modifié le format de l'image et en effet il y a des blancs, mais l'affichage n'est il pas trop lent

là tu es rendu à une image de 4 992px × 1 184px ce qui est beaucoup.
diminue là à la résolution de ton écran (960px était un exemple) et surtout quand va le faire tu dois avoir une case qualité de la photo.... ne la laisse pas à 100% ( moi je mets à 87%)
ensuite dans style.css modifie cette règle comme ceci:
img {
    width: 100%;
}
ainsi que dans:
.content {
    clear: both;
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 20px;
}
supprime :
    max-width: 1000px;
    padding: 0px 20px;

ahh j'oubliais supprime dans le html le width=960px

Stéphane · février 2013

L'image du header est beaucoup trop grosse, elle fait 4992×1184 pour 661,92Ko. Il faudrait que tu arrives a descendre son poids vers les 50Ko. Pour y arriver édite la avec un logiciel d'image et resauvegarde la en jpg en jouant sur le paramètre de compression des jpg. Tant que tu ne vois pas de dégradation visuelle de l'image à cause de la compression, faut y aller. De plus sa largeur x hauteur, c'est beaucoup trop. Une image de 1000px x 250px devrait occuper le meme espace que ton image. Il faut que tu retailles ton image. Du coup son poids en Ko baissera également.

jack31 · février 2013

Suite à la réflexion de Jerry.....

Nous devons faire attention, quand nous modifions un thème (de qualité comme celui-là), au fait qu'ils ont en principe été conçus pour s'afficher sans problèmes dans tous les navigateurs et toutes les résolutions d'écran.

Alors, attentions si nous bidouillons les CSS et recommandons à ceux qui ne le font pas encore de contrôler l'affichage avec plusieurs browsers (en particulier avec IE) et sur les PC's des copains.

bili · février 2013

J'ai diminué l'image et appliqué les changements. Sur mozilla ou google chrome, l'affichage me va mais sur IE elle est déformée. Peut on faire quelque chose ?

Stéphane · février 2013

ajoute dans ton fichier css

#header-title img {
    width: 100%;
}

et supprime

img {
	width: 100%;
}

bili · février 2013

Ce coup-ci ca me semble bon. Du coup je commence à apprendre le css pour monter en autonomie.
En attendant, merci bien.

chriss · février 2013

jack31 a écrit:

Suite à la réflexion de Jerry.....

Nous devons faire attention, quand nous modifions un thème (de qualité comme celui-là), au fait qu'ils ont en principe été conçus pour s'afficher sans problèmes dans tous les navigateurs et toutes les résolutions d'écran.

exact, si on veut "bidouiller" je dirais plutôt modifier, il vaut mieux avant copier/coller le dossier du thème pour le modifier.

Alors, attentions si nous bidouillons les CSS et recommandons à ceux qui ne le font pas encore de contrôler l'affichage avec plusieurs browsers (en particulier avec IE) et sur les PC's des copains.

et c,est comme cela que l'on peut apprendre de nos erreurs.

jack31 · février 2013

oui !

Image en haut 5.1.7

Réponses