Annonce

Faites la différence entre le service WordPress.com et l'application libre WordPress.

Mettez-vous à jour ! WordPress 4.0 est disponible en français.

Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.
Annonce 4 : Rejoignez-nous sur Facebook, Google + et sur Twitter

#1 18-06-2008 17:18:44

jessy
Bavard WP
Date d'inscription: 08-09-2007
Messages: 437

Changer remplacer l' image du header

Bonjour

Pour rédiger ce tutoriel, je pars  du principe qu'évidemment vous n'avez aucune connaissance en html et css et qu'il faudra donc faire avec les moyens du bord, c'est à dire avec les outils que tout le monde possède par défaut (enfin presque).

Je dis "enfin presque" car en effet il est pratiquement certain que le plus grand nombre d'entre vous soyez des utilisateurs du navigateur Internet Explorer.

Autant vous le dire de suite pour réaliser cette petite opération, il vous faudra utiliser FireFox. Pour rassurer les réticents, sachez que FireFox est en Français, il est gratuit et rien ne vous empêche d'avoir 2 navigateurs sur votre ordinateur (et même +) et qu'ils peuvent être ouverts en même temps sans aucun problème.
Pour ceux qui veulent le télécharger c'est ici : http://www.mozilla-europe.org/fr/ ou là http://www.geckozone.org/telechargement/#dl-firefox

Ne prenez pas peur en voyant la longueur de ce tutoriel, c'est seulement parce que les opérations sont très détaillées (texte + image). Quand on y connait rien ça peut aider mais après vous verrez, vous ferez ça les yeux fermés.

Pour des raisons pratiques et d'esthétisme, j'ai du réduire certaines images (en largeur) pour quelles ne soient pas déformées dans l'espace alloué par le forum (donc ne vous fiez pas aux dimensions données dans le tuto et l'image affichée correspondante).

Pour info, ce tuto a été fait sous Windows XP2 avec la version 2.5.1 de WordPress et bien sûr vous devez avoir Wamp (ou EasyPhp) installé sur votre ordinateur.




1ERE PARTIE
CHANGEMENT IMAGE DU HEADER (EN LOCAL)
Une dernière précision, cet exemple concerne une modification réalisée pour un site présent sur votre disque dur (donc en local). On verra plus loin pour les manipulations sur un site en ligne. Mais il est toujours plus prudent de faire des essais en local sur son disque dur plutôt que directement en ligne (sauf quand on sait ce qu'on fait bien sûr et encore ....)

http://img134.imageshack.us/img134/5028/imgheader1ef6.jpg

Firefox étant donc installé, nous allons voir comment modifier l'image de fond du thème d'origine soit WP Default que vous voyez  ci-dessus . Je prends ce thème comme modèle car tout le monde l'a mais le principe reste le même pour la majorité des thèmes ayant une image dans son header (certains disent en-tête, bannière ou encore tétière).

Ceux qui sont déjà utilisateurs de Firefox sauront comment afficher ce thème directement dans ce navigateur mais pour les nouveaux utilisateurs de FF (qui veulent conserver IE comme navigateur par défaut), il vous suffit d'afficher votre site comme vous avez l'habitude de le faire avec Internet Explorer puis d'activer le thème WP Default.

Une fois ce thème ouvert dans IE, copiez/collez l'Url complète apparaissant dans la barre d'adresse. Pour cela avec le curseur de votre souris sélectionnez http://localhost/wp_themes/  (l'adresse doit alors passer en vidéo inverse soit avec un fond de couleur comme le montre l'image ci-dessous).

http://img518.imageshack.us/img518/2577/imgheader2et3qd8.gif

puis faites Ctrl + C ce qui a pour effet de copier (provisoirement) cette adresse dans la mémoire.

Nota : Bien sûr l'adresse mentionnée ci-dessus sera différente en fonction du nom donné à votre répertoire et contenant le module WordPress.

Maintenant si ce n'est déjà fait lancez FireFox. Une fois ouvert, cliquez simultanément sur les 2 touches Ctrl et T ce qui doit vous afficher un nouvel onglet vide.  Il suffit maintenant de coller dans la barre d'adresse l'Url que vous avez copié peu avant. Pour cela faites 1 clic gauche dans cette barre d'adresse puis faites Ctrl + V (vous devez voir une adresse ressemblant à ceci  - voir image ci-dessous).

http://img48.imageshack.us/img48/183/imgheader4gz5.gif

Une fois l'adresse collée appuyez sur la touche Entrée. Votre site doit maintenant s'afficher dans Firefox.
Faites un clic DROIT n'importe où sur la page pour afficher le menu contextuel (celui-ci sera plus ou moins important en fonction des extensions installées).

http://img261.imageshack.us/img261/4556/imgheader5td2.gif

Cherchez la ligne Informations sur la page et faites 1 clic (gauche) sur celle-ci.
La fenêtre suivante apparaît avec ses 5 onglets.

http://img508.imageshack.us/img508/6238/imgheader6cq1.gif

Cliquez sur l'onglet Médias et au besoin agrandissez cette fenêtre.
Par défaut vous voyez que la première image de votre site est sélectionnée soit ici un rectangle de couleur gris qui correspond à l'image servant à remplir le background de ce thème WP Default.

http://img131.imageshack.us/img131/9652/imgheader7bwu4.jpg

Pour voir les autres images, faites un clic droit sur la deuxième ligne et ainsi de suite jusqu'à ce que vous trouviez l'image composant le header. Ici avec le thème WP Default ce sera vite fait car il s'agit de la 3eme ligne soit de l'image appelée kubrickheader.jpg.

Nota : N'hésitez pas à agrandir encore (en hauteur et largeur) votre fenêtre pour apercevoir l'image du header dans son entier (ceci est possible pour ce thème WP Default car l'image ne fait que 760px de large - voir image ci-dessous).
Par contre bien évidemment il sera impossible d'afficher une image prévue pour une résolution d'écran de 24 pouces dans un 17 pouces (dans ce cas là des barres de scroll apparaîtront).
Lorsqu'il y a de nombreuses images, pour les voir plus rapidement il suffit de sélectionner la première puis de les faire défiler avec les touches directionnelles (flèche bas et flèche haut)


http://img514.imageshack.us/img514/9214/imgheader8bwu7.jpg

Tout ça pour arriver à avoir les dimensions de cette fameuse image que vous voulez remplacer. Oui je sais ! il y aurait bien eu d'autres façons d'arriver à ce même résultat sans rien installer mais bon voilà maintenant vous avez Firefox et vous verrez qu'un jour ou l'autre, vous en serez ravi et qu'il vous servira dans bien d'autres circonstances (notamment pour ceux qui veulent en apprendre un peu plus et essayer certains trucs ou conseils donnés sur le forum (firebug entr'autres wink ).

Donc pour faire simple disons que pour remplacer une image par une autre et ne pas "foutre en l'air" l'apparence du site, il faut impérativement que la nouvelle image (ou photo) ait les mêmes dimensions que celle d'origine. Ici nous pouvons voir que cette image  kubrickheader.jpg fait 760px de large sur 200px de haut.

Nota : Vous verrez plus tard qu'une image insérée dans le code CSS peut très bien être plus grande que la zone affichée sur le site mais n'allons pas plus loin pour ne pas embrouiller les choses.

Je vais donc changer l'image d'origine par l'image ci-dessous. Au départ celle-ci faisait 1300px par 919px, je l'ai donc retaillée pour arriver à un bloc faisant pile les dimensions voulues (760*200).

http://img170.imageshack.us/img170/8238/imgheader9bfj4.jpg

Alors à partir d'ici j'ai 2 possibilités soit :

1/ La manière vite-fait bien-fait qui consiste à sauvegarder l'image en question dans le même répertoire que celui de l'image origine tout en lui donnant le même nom, c'est à dire kubrickheader.jpg et vous n'aurez plus rien à faire sinon d'aller vérifier que votre image apparaît bien dans le header en faisant un rafraîchissement de la page avec F5 ou Ctrl +F5 (répétez l'opération 1 ou 2 fois si vous ne constatez pas de changement). Cette solution a l'avantage d'être très rapide mais a pour inconvénient d'écraser votre image d'origine (ici ce n'est pas grave car pour pourrez toujours récupérer cette image dans un module WP) mais pour une image que vous aurez travaillée, modifiée, etc... cela pourrait être beaucoup plus ennuyeux s'il s'agit d'une image originale que vous n'aurez pas sauvegardée bien sûr (souvenirs snif).

2/ Personnellement, par sécurité et maintenant par habitude, je préfère donner un autre nom au fichier en question. Par exemple ici je le nommerai  headerf1.jpg (ainsi je ne perds pas l'image actuellement présente dans le header). Oui mais voilà si vous retournez sur votre site et que vous faites un rafraîchissement de la page (F5 ou Ctrl+F5), cette fois vous ne constaterez aucun changement. En effet contrairement au premier exemple où nous avons sauvegardé la nouvelle image avec le nom de l'image origine, ici nous l'avons sauvegardée sous un autre nom donc il faut aller indiquer le nom de cette nouvelle image dans le fichier prévu à cet effet. C'est là qu'il vous faudra aller faire un petit tour en territoire inconnu soit dans la feuille de style nommée tout simplement style.css. Voilà un bon moyen de voir à quoi ressemble cette bête.

Alors ici il y a tellement de possibilités pour ouvrir un fichier de ce type que je passerai tout simplement par l'outil que tout le monde possède soit le bloc notes (attention surtout ne pas utiliser Word, Writer ou autre traitement de texte). Donc à l'aide de cet éditeur de lignes vous irez ouvrir le fichier qui se trouve dans le répertoire suivant :

C:\nom_de_votre_repertoire\wp-content\themes\default\style.css

Nota :  je vais me répéter mais là aussi adaptez le chemin ci-dessus à la configuration de votre ordinateur et du nom donné au répertoire contenant votre module WP).

Une fois ouvert vous verrez un tas de lignes avec des expressions qui paraîtront aussi compréhensibles que des hiéroglyphes (ou presque). Dans toutes ces lignes, allez chercher celles-ci :

#header {
    background: #73a0c5 url('images/kubrickheader.jpg') no-repeat bottom center;
    }


Maintenant attention soyez bien précis, il faut tout simplement changer kubrickheader.jpg par headerf1.jpg (ou même seulement les noms de fichier puisque l'extension est la même .jpg) ce qui doit donc donner au final :

#header {
    background: #73a0c5 url('images/headerf1.jpg') no-repeat bottom center;
    }


Une fois la modification effectuée enregistrez votre fichier style.css au même endroit sous le même nom.

Allez dans FireFox et faites un rafraîchissement (vous savez faire maintenant) et là vous devriez voir votre nouvelle image insérée dans le header de votre site.

http://img172.imageshack.us/img172/1390/imgheader10vn7.jpg

Effectivement la nouvelle image apparaît bien dans le header à la place de l'ancienne mais comme vous pouvez le constater celle-ci dépasse des deux cotés et ce n'est pas terrible.

Arf !!!! fouet en fait je dois vous avouer que je n'ai pas fait attention lors de la rédaction de ce tuto que l'image d'origine comprenait bien la partie bleue mais j'ai complètement oublié qu'il fallait prendre en compte l'encadrement gris qui se fond dans le background (voir l'image plus haut).

Et moi qui croyais avoir fini ! hmm

Alors ici aussi il y a 2 solutions.

1/ Là je compte sur vos talents et connaissances acquises pour manipuler un outil graphique du genre Photoshop ou PhotoFiltre (ce dernier Français et gratuit étant largement suffisant). En effet il vous faudra tout simplement ajouter (par copier/coller) une bordure à droite et à gauche de cette image pour lui donner l'apparence d'être insérée aux dimensions de cette page blanche avec des bords légèrement ombrés.
Après avoir fait un imprim écran, il vous suffira de travailler l'image dans votre logiciel de retouche graphique pour copier la bordure de la page vers la bordure de l'image et ce de chaque coté (m'en tire pas mal sur ce coup là ange).

http://img145.imageshack.us/img145/6612/imgheader11xl7.jpg

une fois fait, vous devriez obtenir le résultat suivant (ouais bon les bordures grises sont pas très visibles mais elles y sont) :

http://img180.imageshack.us/img180/6044/imgheader12fa7.jpg

Sauvegardez cette image par exemple sous headerf1bis.jpg puis allez dans votre fichier style.css et répétez l'opération décrite plus haut pour changer le nom du fichier existant par celui-ci.

Soit modifier cette ligne :

#header { 
background: #73a0c5 url('images/headerf1.jpg') no-repeat bottom center;   
}


comme ci-dessous :

#header { 
background: #73a0c5 url('images/headerf1bis.jpg') no-repeat bottom center;   
}


Vous devriez maintenant obtenir ceci (après rafraîchissement).

http://img180.imageshack.us/img180/1171/imgheader13ei8.jpg

Pour les plus "pinailleurs" (j'en suis) la deuxième solution est un peu plus difficile à réaliser car elle consiste à remplacer uniquement la partie bleue de l'image origine (entourée d'un filet rouge dans l'image ci-dessous) . Cela implique donc de conserver l'encadrement gris + le blanc de l'image origine dans laquelle on ira coller la nouvelle image. Par conséquent les dimensions seront donc différentes car plus petites mais en plus il faudra lui appliquer un arrondi à chaque angle.

http://img518.imageshack.us/img518/9974/imgheader14qe3.jpg

Ce qui pourrait donner ceci par exemple  (c'est mieux non ?) :

http://img341.imageshack.us/img341/3381/imgheader15up5.jpg

Voilà cette fois je pense avoir terminé. Alors bien sûr cet exemple n'est qu'une des nombreuses façons d'arriver à ce résultat mais comme c'est celle que j'utilise et que je n'ai pas à m'en plaindre ...

Par contre je vous ai fait utiliser le bloc notes car normalement par défaut tout le monde doit l'avoir sur son ordinateur mais personnellement j'utilise PsPad (d'autres préfèrent Notepad++  etc.). L'explorateur peut également être très utile mais bon vous découvrirez tout ça vous même au fur et à mesure de vos essais.

                                  --------------------- FIN de la 1ère partie ---------------------

2EME PARTIE
CHANGEMENT IMAGE DU HEADER (EN LIGNE)

Avant de faire quoi que ce soit sur un site qui se trouve en ligne, le premier conseil que je vous donnerai c'est de faire une sauvegarde (souvenirs roll).

Puis en tant que débutant, le 2ème conseil serait de toujours faire une modification d'abord en local sur votre disque dur comme on vient de le faire dans l'exemple ci-dessus. Cela vous permet de voir si tout se passe bien et n'entraîne aucun risque pour votre site et puis ça vous fait faire de l'exercice (il n'y a pas mieux pour progresser).

Que ce soit en local ou en ligne, le principe est exactement le même.

1/ Il faut préparer son image aux dimensions de celle que l'on veut remplacer.

2/ Mais cette fois on ne peut pas enregistrer cette image directement sur le site, et il faut pour cela passer par un système de FTP qui va faire monter (uploader) l'image sur le site (pour les curieux qui veulent en savoir un peu plus http://fr.wikipedia.org/wiki/File_Transfer_Protocol).

Sans vous en rendre compte vous allez faire du FTP en cliquant tout simplement sur ce bouton :

http://images.imagehotel.net/59o4vuvpox.png

ou alors utilisez un logiciel gratuit et en Français soit Filezilla avec lequel je n'ai jamais rencontré aucun problème.

3/ Et enfin il faudra aller modifier le fichier CSS pour lui donner l'adresse et le nouveau nom du fichier à afficher.

Allez c'est reparti. Nous sommes donc dans le thème d'origine WP Default avec notre fond bleu et nous voulons cette fois mettre l'image suivante :

http://img373.imageshack.us/img373/5494/imgheader21ww3.jpg

Avant toute chose il va falloir adapter les dimensions de votre image à celle que vous allez remplacer. Faites le bien sûr tout d'abord sur votre disque dur en suivant exactement la même procédure qui est décrite plus haut. Comme nous l'avons fait dans l'exemple précédent, pensez à modifier les bordures gauche et droite pour obtenir l' image suivante (rappel 760*200).

http://img227.imageshack.us/img227/5567/imgheader22mm8.jpg

Une fois le traitement de votre image fini, enregistrez là sur votre disque dur par exemple sous le nom de plage.jpg

Maintenant allez sur votre site et faites comme si vous alliez écrire un article  (1)

http://img406.imageshack.us/img406/3586/imgheader23mq5.jpg

N'inscrivez rien dans le champ Titre
Maintenant cliquez sur le bouton prévu pour l'insertion d'une image (2) qui fait apparaître l'image suivante.

http://img168.imageshack.us/img168/2855/imgheader24ea2.jpg

Cliquez sur le bouton Choisissez les fichiers à envoyer.
La fenêtre ci-dessous s'ouvre.
Allez chercher le fichier plage.jpg que vous venez d'enregistrer (1)
puis cliquer sur le bouton Ouvrir (2)

http://img185.imageshack.us/img185/5122/imgheader25hr5.jpg

Là pendant quelques secondes vous voyez la fenêtre se transformer pour faire apparaître le message suivant En cours de traitement (là disons simplement que c'est le système Ftp interne de WordPress qui travaille et qui uploade l'image sur le site).

http://img168.imageshack.us/img168/804/imgheader26tq3.jpg

Après quelques secondes d'attente, la fenêtre ci-dessous s'ouvre. Alors j'ai laissé cette image en entier pour qu'il n'y ait pas de confusion mais en réalité une seule information nous intéresse ici, c'est l'URL de cette image (c'est à dire son adresse).

En effet maintenant que l'image est "montée" sur le site, il va falloir aller dans le fichier style.css pour inscrire l'adresse de cette nouvelle image (soit exactement pareil que lorsque nous étions en local).

http://img185.imageshack.us/img185/4652/imgheader27zq8.jpg

NOTA : Si cette adresse n'apparaissait pas, cliquez 1 fois sur le bouton URL du fichier.

Attention ici pour récupérer l'adresse avec la souris c'est pas toujours évident aussi le mieux est de cliquer n'importe où dans ce champ adresse puis de faire Ctrl + A ce qui aura pour effet de sélectionner tout le texte (celle-ci doit passer en vidéo inverse - voir image ci-dessous).

http://img361.imageshack.us/img361/6415/imgheader28pg4.jpg

Faites un Ctrl + C pour copier provisoirement cette adresse en mémoire, ouvrez le bloc-notes et collez là tout de suite avec un Ctrl + V dans cet éditeur. En effet si vous suivez ce tuto à la lettre, vous allez faire un autre Ctrl + C qui vous fera perdre cette adresse (hmm que c'est compliqué tout ça). Conservez le bloc-notes ouvert mais fermez la fenêtre de l'image ci-dessus avec la croix en haut à droite.

http://img266.imageshack.us/img266/1372/imgheader29nr6.jpg

Cliquez sur le bouton Apparence

http://img405.imageshack.us/img405/6870/imgheader30rg4.jpg

Une fenêtre contenant les screenshots des divers thèmes installés apparaît, cliquez sur Editeur de thème

http://img266.imageshack.us/img266/1302/imgheader31av1.jpg

La page de l'Editeur de thème s'ouvre sur le fichier style.css, ça tombe bien puisque c'est dans celui-ci que l'on doit effectuer la modification. Sinon pour ouvrir un fichier voulu, il faut aller le chercher dans la colonne de droite (non visible ici sur cette image).

http://img518.imageshack.us/img518/3028/imgheader32gw7.jpg

Maintenant il faut aller chercher le code du header en se servant de l'ascenseur pour faire défiler les lignes de code.

ATTENTION : Ici un petit conseil car là vous êtes dans les entrailles de votre site (enfin pour ce qui concerne le look) et toute erreur même minime peut mettre tout en vrac et rendre le site inexploitable ou du moins casser tout votre thème. Personnellement (via FileZilla) je renomme directement en ligne mon fichier style.css qui se trouve sur le serveur en style.css.old par exemple. Ainsi en cas de problème avec le nouveau fichier style.css, je supprime ce dernier puis je renomme le fichier style.css.old en style.css et tout redevient comme avant vos modifs. C'est la façon la plus sûre.

Maintenant pour ceux qui ne connaissent pas encore FileZilla (va falloir vous y mettre) voici une autre façon de sauvegarder l'intégralité de votre fichier style.css. Si par mégarde vous faisiez une erreur de manipulation, sortez de cette fenêtre SANS ENREGISTRER pour aller sur le Tableau de bord par exemple puis revenez dans cet éditeur et recommencez.

Étant donc dans ce fichier, cliquez n'importe où dans la fenêtre puis là aussi faites Ctrl + A ce qui sélectionnera tout le texte (il doit être en vidéo inverse - voir image ci-dessous) puis Ctrl + C pour copier tout ce texte en mémoire (c'est de ce Ctrl + C que je vous parlais un peu plus haut)

http://img261.imageshack.us/img261/4811/imgheader33kl0.jpg

Ouvrez votre bloc-notes (normalement celui-ci est déjà ouvert avec une ligne correspondant à l'adresse de la nouvelle image du header qui vient d'être uploadée) et collez à la suite le texte en faisant Ctrl + V.

Sélectionnez l'adresse de cette première ligne puis faites un Ctrl + X (soit Couper ce qui fait que cette ligne doit disparaître du bloc-notes) et maintenant sauvegardez-le sous un nom explicite par exemple style_default.css (cette sauvegarde sera sur votre disque dur et vous servira en cas de mauvaise manipulation effectuée sur le fichier style.css en ligne. Alors attention de ne pas supprimer ce fichier).

Aussi maintenant vous pouvez continuer sans risque avec le fichier style.css présent sur le serveur. Allez sur la ligne qui vous intéresse soit celle du #header, sélectionnez l'adresse de l'image actuelle et uniquement cette adresse sans les apostrophes (voir ci-dessous)

http://img518.imageshack.us/img518/3769/imgheader34le9.jpg

cette sélection étant active, faites un Ctrl + V qui va coller l'adresse que vous venez de mettre en mémoire juste au-dessus (avec le Ctrl + X) ce qui doit donner :

http://img518.imageshack.us/img518/5695/imgheader35sp3.jpg

Maintenant allez en bas de la fenêtre contenant ce code et cliquez sur le bouton Mettre à jour le fichier.

http://img176.imageshack.us/img176/9084/imgheader36oc3.jpg

Cela aura pour effet d'enregistrer ce fichier modifié directement sur votre site. Pour vous informer que tout s'est bien déroulé un bandeau jaune apparaît en haut de l'écran avec le message suivant : Modification du fichier réussie.

Maintenant il ne vous reste plus qu'à aller voir si votre nouvelle image apparaît bien dans le header. Pour cela cliquez sur le bouton Aller sur le site.

http://img249.imageshack.us/img249/2/imgheader37mx4.jpg

ATTENTION : Ici il est fort probable que vous ayez encore l'image de votre ancien header aussi faites un rafraichissement de la page avec F5 (ou Ctrl+F5) (Rappel Il arrive parfois que ce rafraichissement ne se fasse pas au premier essai alors essayez de nouveau et normalement maintenant vous devriez avoir ceci.)

http://img176.imageshack.us/img176/9746/imgheader38fv9.jpg

Voilà qui est terminé (Ouf ! tongue)

Étant donné la longueur de ce tutoriel et malgré les relectures et essais effectués , il est bien possible qu'il y ait quelques erreurs ou omissions. Si vous constatiez l'une d'elles, n'hésitez pas à me le faire savoir afin d'apporter la ou les corrections qui s'imposent.

Merci.

jessy

Dernière modification par jessy (31-08-2009 17:41:47)

Hors ligne

 

#2 18-06-2008 22:41:13

IPreferNcy
Bavard WP
Lieu: Nancy
Date d'inscription: 27-03-2008
Messages: 205
Site web

Re: Changer remplacer l' image du header

Super tuto mais didonc, qu' est ce que c' est compliqué chez toi de changer une image dans le header !!! lol

J' ai une solution un peu plus rapide et tout aussi efficace:
- Aller dans le dossier de votre thème puis dans "images"
- Sélectionner le fichier "ban.jpg"
- Vérifiez sa taille avec votre éditeur d image favoris
- Ouvrez l' image que vous voulez installer dans le header puis redimensionnez la
- Nommez cette image ban.jpg
- Envoyez la dans le dossier "images" ouvert précédement

Et voilà votre header tout changé avec toutes les caractéristiques de celui d' origine wink


I Love NyC but I Prefer NcY...

Hors ligne

 

#3 29-07-2008 16:11:42

etiquettedebiere
Connaisseur WP
Date d'inscription: 29-07-2008
Messages: 14
Site web

Re: Changer remplacer l' image du header

@jessy :
bon tuto, mais heureusement qu'il y a une méthode plus facile pour changer l'image d'entête comme l'a fait remarqué IPreferNcy

Hors ligne

 

#4 05-01-2009 03:43:10

cmxprod
Habitué WP
Date d'inscription: 13-10-2008
Messages: 91

Re: Changer remplacer l' image du header

salut moi j ai tester les deux solution et j ai toujours le meme resulta j'ai mon image qui s'affiche mais j ai toujours le kubrickheader d'origine qui cache mon image

Hors ligne

 

#5 27-04-2009 17:53:48

Gawel44
Habitué WP
Lieu: Marseille
Date d'inscription: 19-10-2007
Messages: 86
Site web

Re: Changer remplacer l' image du header

Super tutorial surtout pour les débutants !
J'aurais aimé le lire à mes débuts smile

cmxprod tu utilises le thème par défaut ?
Car sinon pour le thème par défaut il y a plus simple, connecter vous sur votre serveur avec votre logiciel ftp, allez dans wp-content / themes / defaut / images / kubrickheader.jpg

Récupérer l'image kubrickheader.jpg
Puis avec Photoshop vous faites vos motifs et vous enregistrez puis vous la replacez sur votre serveur

Et voilà un beau header smilewp

Attention à la taille de l'image, trop de ko ce n'est pas bon

Hors ligne

 

#6 08-07-2009 12:02:14

Bouchra
Membre WP
Date d'inscription: 08-07-2009
Messages: 1

Re: Changer remplacer l' image du header

bonjour,

je sais que cette discussion a été ouverte il y fort fot longtemps. c'est mieux de reprendre ici que d'en recommencer une autre.
pour changer le header de kubrick default fr, j'ai changé l'image kubrickheader et replacer sur le serveur ftp. le hic c'est que mon image est cachée par le header de base (le bleu). comment puis-je virer ce gros rectangle derrière lequel se cache ma belle image? cmwprod as tu trouvé la solution?

un grand merci si vous avez la réponse, pour une néophyte, qui vient d'apprendre à se servir d'un serveur ftp ce matin même smile

bouchra

Hors ligne

 

#7 30-08-2009 12:21:15

Argus
Membre WP
Date d'inscription: 14-08-2009
Messages: 5

Re: Changer remplacer l' image du header

J'ai le même soucis, mon image est cachée par celle présente à la base, même si je l'ai virée du serveur ...

Hors ligne

 

#8 30-08-2009 17:35:00

jessy
Bavard WP
Date d'inscription: 08-09-2007
Messages: 437

Re: Changer remplacer l' image du header

Bon et bien là je pense avoir trouvé ce qui ne va pas. En tout cas cette fois je suis arrivé à reproduire le problème et faire en sorte que l'image du header soit masquée par l'image d'origine de WordPress (en réalité ce n'est pas l'image d'origine mais une sacrée soeur jumelle).

En fait ce qui vous a induit en erreur, c'est le passage qui parlait de la possibilité de modifier ce header via Image et couleur de l'en-tête. Alors effectivement c'est une possibilité mais si vous l'activez, il s'avère que celle-ci prend le dessus et empêche l'affichage de l'image de votre header se trouvant dans la feuille de style (pour ma défense tongue, je dirai qu'il y avait une mention disant qu'il ne fallait pas utiliser ce système mais bon maintenant je me dis qu'il aurait été mieux de ne pas en parler).

Donc pour que votre image apparaisse enfin, il vous suffira de retourner sur cette page concernant la personnalisation de l'entête et de cliquer tout simplement sur le bouton Annuler comme indiqué sur l'image ci-dessous.

http://images.imagehotel.net/jtdo4f67f3.png

Bon beh du coup il va falloir que j'apporte quelques modifications au tuto de base.

Dernière modification par jessy (31-08-2009 16:10:06)

Hors ligne

 

#9 02-12-2009 14:26:53

barneynantes
Connaisseur WP
Lieu: Nantes
Date d'inscription: 01-12-2009
Messages: 14

Re: Changer remplacer l' image du header

Pour ceux qui ne souhaitent pas faire leur header eux même voici une liste de header pour le thème par défaut de WordPress : c'est ici


Dernier projet WP : site web collaboratif en français (en construction) sur les symptomes de maladies

Hors ligne

 

Pied de page des forums

Propulsé par PunBB 1.2.23
© Copyright 2005-2006 WordPress France

[ Generated in 0.058 seconds, 16 queries executed ]