Bonjour,

J'ai un wordpress basé sur ce thème : http://portra.wpshower.com/

Le thème est gratuit et accessible ici : http://wpshower.com/demo/?preview_theme=portra

Pour comprendre ce que je veux : dézoomez la page jsuqu'à 70 %

Voilà à quoi je voudrais que ca ressemble, c'est à dire que les images soient bien plus larges, prennent plus de place sur la page et que les polices soient plus petites également ! Je n'y arrive pas du tout en modifiant le CSS ..

Une idée ?

Merci beaucoup

-
Edité par NicolasNo 11 mars 2018 à 19:14:06

Bonsoir,

Utilise l'inspecteur de ton navigateur (clic droit/Inspecter sur Chrome) pour voir comment cela fonctionne et tu verras que ce sont les paddings verticaux importants sur ton élément

<div id="page" class="hfeed site"

qui t'empêchent de grossir l'affichage des images:

@media (min-width: 951px)
.site {
    /* padding: 90px 20px; */
    /* padding: 9rem 2rem;

Et tu peux bien sûr diminuer la police et la hauteur de ton header qui est en position fixed (5rem au lieu des 9 par défaut par exemple).

L'affichage des images occupera automatiquement l'espace libre (height:100%).

Salut,

Merci de ta réponse.

En effet, les padding permettent d'agrandir les images mais seulement verticalement (ça marche également avec le height de l'élément body), elles restent fixes en largeur, tu sais pourquoi ?

Et bien, il faut que tu modifies ces valeurs pour les adapter à ce que tu souhaites.

La façon la plus simple avec WP est d'utiliser Apparence/Personnaliser/CSS Additionnel.

Tu surcharges ainsi le CSS d'origine de ton thème et tu visualises le résultat immédiatement dans la phase de mise au point.

Avec l'inspecteur du navigateur, tu repères les points clefs et les classes ou id à cibler.

En inspectant tes menus et en remontant la hiérarchie, tu vois qu'il y a un font-size: 1.8rem; sur .site-navigation li, tu surcharges donc cette valeur avec 1.5rem par exemple, en ajoutant dans ton CSS:

site-navigation li{
font-size: 1.5rem;
}

Tes ajouts dans CSS additionnel venant après ceux d'origine, ils auront le dernier mot à condition de ne pas être disqualifiés par un problème de poids des CSS.

Voir cet article: http://informatique.lamecarlate.net/articles/selecteurs-css-poids

Au besoin, assommer avec un !important en fin d'instruction.

Ensuite, tu vois que ton header sera inutilement haut quand tu auras baissé la taille de sa police, tu vois qu'il a un id="masthead", tu utilises donc cet id (de poids supérieur aux classes pour ce qui est des poids relatifs des CSS) et tu ajoutes dans ta barre CSS Additionnel qq chose comme:

#masthead{
border: 1px solid red;
height: 5rem;
}

Le border: 1px solid red; est provisoire pour visualiser l"efficacité de ce que tu fais ; j'en met en général dans l'inspecteur pour voir les contours des objets quand ils n'en ont pas. 

NB: Les valeurs ci-dessus sont en mode "grand écran" (@media (min-width: 951px)) ; il faudra aussi que tu regardes ce qui se passe dans les autres modes de media queries selon les tailles d'écran ; je te laisse voir cela.

Toujours avec l'inspecteur, tu peux voir ton fichier et en faisant une recherche sur "@media", repérer les différents niveaux de media queries:

On en trouve 4 dans ton thème, mais le 4ème est pour l'impression, donc trois:

@media (min-width: 951px)

@media (max-width: 950px) 

@media (max-width: 782px) 

Bonjour,

Merci des explications c'est très sympa ! J'ai effectué ces modifications mais rien n'y fait ça ne bouge pas du tout.Que ce soit en CSS additionnel ou directement dans la feuille de style, ça ne change rien sur ma page.

C'est désespérant

Je ne comprend pas comment interagissent le header, le main et le footer. Quand on diminue le height du header pourquoi le main content ne remonte pas par exemple ?

Pourquoi lorsque j'augmente le height du main celui ci s'étend vers le bas et pas le haut et pourquoi les images s'étirent verticalement sans s'ajuster automatiquement en largeur ?

Je ne suis pas du tout pro en code informatique, je bidouille, mais là je trouve ça extrêmement dur.

Si tu changes le fichier CSS, il faut que tu réactualises ta page en vidant le cache (CTRL-F5 ou CTRL-Clic) pour charger le nouveau fichier style.css.

Le main content ne remonte pas lorsque tu réduis le header parce que ce dernier est en position:fixed; 

il n'est donc pas dans le flux mais "scotché" sur l'écran.

La distance du contenu par rapport au haut (et au bas en l'occurrence) de l'écran est faite par les paddings de 9rem appliqués sur div#page.

C'est un centrage vertical en appliquant ces marges intérieures que sont les paddings au conteneur. 

PS: Et sinon, ne désespère pas trop vite, c'est une école de patience et de rigueur impitoyable le CSS. Du coup, chaque fois que tu ne renonces pas, tu progresses sur toi-même... 

-
Edité par philiga 12 mars 2018 à 16:55:49

J'ai vidé le cache mais ça ne fait que réduire la police.

Par contre s'agissant du padding de 9rem de l'élément ".site", sa réduction tend bien vers ce que je veux, l'image prend de la place en haut et en bas.

Cependant elle ne s'agrandit que verticalement donc perd ses proportions !

Oui, à cela, je t'ai déjà répondu: c'est parce que la largeur des images est fixée en valeur absolue:

width: 394px; sur l'img

width: 413px; sur sa div conteneur.

philiga a écrit:

Oui, à cela, je t'ai déjà répondu: c'est parce que la largeur des images est fixée en valeur absolue:

width: 394px; sur l'img

width: 413px; sur sa div conteneur.

Explore avec ton inspecteur ; il faut bidouiller, être curieux et actif, c'est ainsi qu'on apprend, comprend et mémorise.

Comment fait on pour changer ça ?

Le problème c'est que ca fait des heures deja que je suis la dessus et mon temps libre est assez limité ..

-
Edité par NicolasNo 12 mars 2018 à 17:15:42

#main-content div {
width:413px;
}
#main-content div a img {
width:394px;
}

c'est un peu trop généraliste: il faut donc que tu spécifies plus les div à cibler avec une des classes existant sur ces conteneurs d'images, idéalement celle qui les spécifie parmi

<div id="post-68" class="post-68 post type-post status-publish format-standard has-post-thumbnail hentry category-portraits" 

par exemple en précisant

#main-content div.category-portraits {
width:600px;
}

et

#main-content div.category-portraits a img {
width:581px;
}

Tu commences à voir la logique?

PS: Le plus simple est sûrement de les mettre en width:auto; si tu souhaites respecter les proportions de chaque image sachant qu'elles sont contraintes en hauteur.

-
Edité par philiga 12 mars 2018 à 17:55:15

Bonsoir,

Merci du détail, j'en apprends davantage !

J'ai trouvé une solution :

Ca fonctionne bien donc ça me va !

Bon, très bien alors.

Tu peux te passer des préfixes aujourd'hui (https://caniuse.com/#search=calc) donc supprimer les lignes 1140-41.

Ne pas oublier les autres modes media queries.

As-tu vu ce que ça donne en dessous de 950px de largeur d'écran?

Car il y a un 

.gallery-item img {
    width: 100% !important;

dans ce mode (lignes 1524-25).

Enfin si tu modifies directement le fichier style.css, tu sais que si tu fais une mise à jour de ton thème, tes réglages seront écrasés.

Un thème enfant évite cela -ou l'usage de Personnaliser/CSS Additionnel.

Bonne continuation!