- Statut : non résolu
- Ce sujet contient 23 réponses, 4 participants et a été mis à jour pour la dernière fois par
, le il y a 11 années et 8 mois.
-
Messages
-
Bonjour à tous,
Ma configuration WP actuelle
– Version de WordPress : 3,5,1
– Version de PHP/MySQL : 5
– Thème utilisé : twentytwelve-child
– Extensions en place :
– Nom de l’hebergeur : ovh
– Adresse du site : http://www.ventedepipes.frProblème(s) rencontré(s) :
Après avoir mis une image dans l’entête, une couleur dans le content et une image dans le footer, je n’arrive pas à faire se toucher les images ni remplir complètement la largeur du site.
Lorsqu’on visite le site on voit des bandes blanches sur les côtés et entre les 3 zones. Comment supprimer ces bandes blanches ?
Autre question : où se trouve le code pour définir la taille de header et footer ?
Merci d’avance et bonne journée 🙂
hamon2 wrote:Après avoir mis une image dans l’entête, une couleur dans le content et une image dans le footer, je n’arrive pas à faire se toucher les images ni remplir complètement la largeur du site.Je ne vois pas d’image dans le header et le footer.
Que voulez-vous dire par « faire se toucher les images » ?
Pour remplir la largeur du site (je suppose avec les images, il suffit lors de leur insertion de choisir aligner à gauchehamon2 wrote:Lorsqu’on visite le site on voit des bandes blanches sur les côtés et entre les 3 zones. Comment supprimer ces bandes blanches ?C’est parce que le fond de page est blanc. background en CSS à la ligne 526 de style.css
.site {
padding: 0px 1.71429rem;
background-color: rgb(255, 255, 255);
}hamon2 wrote:Autre question : où se trouve le code pour définir la taille de header et footer ?Merci d’avance et bonne journée 🙂
Avec firebug, examinez le header et le footer, vous trouverez les règles qui régissent leur affichage.
Voici le code du style.css de mon thème enfant :
/*
Theme Name: Twenty Twelve Child
Theme URI: http://ventedepipes.fr/
Description: Thème enfant pour le thème Twenty Twelve
Author: Marc
Author URI: http://ventedepipes.fr/
Template: twentytwelve
Version: 0.1.0
*/@import url(« ../twentytwelve/style.css »);
/* =Structure
*/body {
padding: 0 2em;
}
#page {
margin: 2em auto;
max-width: 960px;
}
#masthead {
background-image: url(http://www.ventedepipes.fr/WordPress3/wp-content/uploads/2013/05/ImgEnTete.png) ;
}
#content {
background-color:#fbf0a5;
}
#colophon {
background-image: url(http://www.ventedepipes.fr/WordPress3/wp-content/uploads/2013/05/ImgFooter.png) ;
}Comme vous voyez, les dégradés moches entete et footer sont des .png et le content est une couleur.
Ce que je souhaite c’est que le bas de l’image de l’entete touche le haut du background du content de telle sorte qu’on ne perçoive pas la séparation de ces 2 zones. Et idem entre le content et le footer.De plus mes images font 950px de large (comme conseillé par ailleurs) et ça ne rempli pas entièrement la largeur de la page que j’ai modifiée en
max-width: 960pxMerci d’avance 🙂
Logique qu’il y ait des bordures blanches.
Vous avez un block « Page » qui fait 1040px de large. Et votre header, content, footer sont tous à 960px de large.
Il est vrai que vous avez placer un max-width, mais attention, il y a des padding qui sont dans styles.css qu’il faudra dès lors diminuer. Car vous avez mis 960px mais il faut ajouter les padding ce qui nous fait 1040px de large, d’où l’apparition de bordures blanches.Il en va de même pour votre espacement entre Header/content content/Footer. Il y a un margin de 24px qui se balade dans styles.css ligne 531.
En ce qui concerne le content/footer, ligne947 styles.css où se trouvent des padding bottom, des margin bottom !🙂
Merci pour ces infos, je vais creuser par là 😉
Si j’ai bien compris, l’affichage à l’intérieur de chaque zone est un pourcentage, mais y a-t’il un moyen pour qu’une image ou une couleur remplisse une zone à 100% malgré la limite de pourcentage imposé ?
Merci et bonne journée.
Vous avez imposé 960px à votre header, votre image du header est bien à 100% et rempli bien les 960px. Cependant, vu que votre div id=page possède une largeur de 960px sur fond blanc + des paddings par ci, des margin par là, cela crée des « bordures ». 🙂
C’est bien ce que je craignais…
Y a-t’il un code du genre
cetteimage: tiens pas compte des margin et paddings ;Je viens d’essayer
background-size: cover ;
pas très convaincant…Retirer ligne 1591 de style.css :
padding: 0 40px;
padding: 0 2.857142857rem;et ligne 526 :
padding: 0 24px;
padding: 0 1.714285714rem;Désolé, je viens d’essayer et ça n’a pas de résultat…
Je ne trouve pas de sites qui explique, pour les supernoobs, comment est fait wordpress. Je cherche une explication du genre : ce texte dans cette page sert à ça, et si on change cet élément on obtient ça.
Avez -vous un lien à me conseiller ?
Merci
hamon2 wrote:Je ne trouve pas de sites qui explique, pour les supernoobs, comment est fait wordpress. Je cherche une explication du genre : ce texte dans cette page sert à ça, et si on change cet élément on obtient ça.Avez -vous un lien à me conseiller ?
Merci
WordPress est écrit en PHP 5.2, MySQL 5, l’affichage de la mise en page se fait en HTML5 et CSS3 comme pour tous les sites web.
Pour faire ce que vous dites, il faut apprendre à coder (WordPress est lui même codé). Je vous conseille les excellents cours du site du zéro (c’est avec ce site que j’ai appris
).1- Le codage de l’affichage (l’effet visuel rendu à l’écran) est fait via l’HTML5 et le CSS3, apprendre ce cours :
http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3
2- Les fonctions spécifiques de WordPress (ce sont des fonctions toutes faites écrites en PHP et MySQL) que l’on trouve dans le :codex: :
http://codex.wordpress.org/Function_Reference
On trouve sur le net de nombreux tutos dédiés à des problèmes spécifiques, on les trouve avec une moteur de recherche en ajoutant le mot clef « wordpress » au problème que l’on veut résoudre.3- Ensuite pour aller encore plus loin (comme écrire des plugins WordPress), il faut en outre apprendre le PHP et MySQL :
http://www.siteduzero.com/informatique/tutoriels/concevez-votre-site-web-avec-php-et-mysql.Bonne lecture ! :wp:
Zalinn wrote:Retirer ligne 1591 de style.css :
padding: 0 40px;
padding: 0 2.857142857rem;et ligne 526 :
padding: 0 24px;
padding: 0 1.714285714rem;–> pas une bonne idée !
Comme Hamon2 a fait un thème-enfant, il ne faut pas supprimer des lignes dans le fichier style.css d’origine, car ces modif’ seront perdues lors d’une mise à jour du thème.
Il faut au contraire ajouter des lignes rectificatives dans le fichier style.css du thème-enfant.Donc, pour écrire de nouvelles règles en CSS, il faut apprendre les bases de ce langage, comme l’a conseillé Luciole.135 🙂
Merci luciole pour le lien sur le site du zéro. Ca y est j’ai fini les 249 pages du pdf et je dois dire que c’est puissant et un grand merci à l’auteur Mathieu Nebra pour ce remarquable travail pédagogique.
Je vais, maintenant que je sais à peu près « lire », m’attaquer aux modifications que je prévois.
Et déjà il y a une ou deux choses qui m’échappe : où se trouvent les fichiers .html ?
Où se trouve ce que j’écris ?Entre le codex et le déchiffrage du code j’ai encore du boulot 😉
WordPress est écrit en PHP qui génère les fichiers HTML envoyés au client (à la personne qui visite le site).
Le code HTML est généré avec les instruction echo ou alors en terminant un session PHP avec la balise ?> de fermeture de session PHP ce qui ouvre automatiquement une session HTML.
Lorsque l’on veut ouvrir à nouveau une session PHP, on ouvre avec la balise <?php .Pour faire les modifications, s’il s’agit de présentation, d’affichage, en général, il suffit de mdifier les règles de CSS situées dans le fichier style.css de votre thème, donc vous concernat dans le fichier wp-content/themes/twentytwelve-child/style.css
Si cela ne suffit pas il faudra alors modifier les fichier php du thème situés dans le même dossier.
).
- Vous devez être connecté pour répondre à ce sujet.