Image en haut 5.1.7

bili

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

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

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

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

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

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

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

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

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

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

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

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

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

ajoute dans ton fichier css

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

et supprime

img {
	width: 100%;
}

bili

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

chriss

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

oui !