Comment puis-je modifier la hauteur de l'image d'en-tête (spécifiée dans la section Médias d'en-tête) dans le thème Twenty Seventeen?
Plus précisément, je veux le changer sur la page d'accueil car ici, il remplit presque toute la page. Je veux que ce soit beaucoup plus court. La façon dont il apparaît sur d'autres pages, comme la page À propos intégrée, a une bonne hauteur, donc si je pouvais imiter cela sur la page d'accueil, je serais satisfait. Bien que savoir comment effectuer un contrôle précis serait formidable.
themes
header-image
theme-twenty-seventeen
Utilisateur
la source
la source
theme-twenty-seventeen
balise alors qu'il semble y avoir des balises correspondantes pour les années précédentes.Réponses:
J'ai trouvé (une partie) du code CSS qui contrôle la hauteur
wp-content/themes/twentyseventeen/style.css
.Il y a du code qui s'applique lorsque la barre d'administration n'est pas visible (utilisateur anonyme typique) actuellement à la ligne 3629
Et le code qui s'applique lorsque la barre d'administration est visible (par exemple, vous êtes connecté) actuellement à la ligne 3646
Et puis le code qui s'applique sur mobile actuellement à la ligne 1638:
En copiant ces trois sections de CSS dans le style.css de mon thème enfant et en modifiant l'
height
attribut, j'ai pu modifier la hauteur de l'image d'en-tête sur la page d'accueil. Je régler la hauteur30vh
,calc(30vh - 32px)
et30vh
respectivement dans chaque section. J'ai laissé le premierheight: 1200px
seul.Notez que l'élément de hauteur est défini à
100vh
quelle taille la hauteur par rapport à la hauteur de la fenêtre. 100vh représente donc 100% de la fenêtre d'affichage tandis que 50vh représente 50% de la fenêtre d'affichage.Une chose étrange est que sur la page d'accueil, le zoom et la position de l'image d'en-tête sont différents de ceux des autres pages.
Je ne sais pas si c'est la meilleure façon. Je suis ouvert à de meilleures options, mais jusqu'à présent, cela fonctionne à un niveau de base.
la source
Modifiez simplement le thème à partir du tableau de bord et ajoutez la définition CSS suivante dans la section de thème "css personnalisé":
la source
D'après un commentaire que j'ai fait dans la réponse de @ User (c'est un nom sympa);) J'ai pensé que j'allais essayer.
Je modifie le fichier de thème directement parce que je travaille dans un conteneur docker jetable, c'est plus une preuve de concept. L'adapter à un thème enfant nécessitera quelques ajustements.
Dans
content/themes/twentyseventeen/style.css
la zone entre 3680 ~ 3670ish se trouve l'image d'en-tête.code d'origine:
La modification de la taille (et de l'ordre) est suffisante pour obtenir la vue déconnectée:
J'ai laissé le
vh
et le%
pour couvrir les bases où ilmax-height
n'est pas atteint, maismax-height
je règle ensuite le sur ce que vous recherchez.Il y a une mise en garde à tout cela:
C'est la toute première section de pixels. Donc, à moins que vous n'ayez une belle portion d'image dans cette zone ... Ça a l'air merdique (beaucoup de têtes coupées)
plus à suivre (quand je le trie)
la source
Vous pouvez le modifier en recadrant l'image. dans WordPress, il existe une option de personnalisation. Vous devez suivre les étapes ci-dessous pour recadrer l'image.
la source
Vous pouvez utiliser Firebug (ou regarder le code source de la page) pour trouver le CSS utilisé pour afficher l'image d'en-tête. Ajoutez ensuite le CSS pour effectuer le changement. Le CSS exact que vous utilisez dépend du thème.
Firebug vous permet de changer temporairement le CSS pour l'obtenir comme vous le souhaitez, puis copiez ce nouveau CSS dans la page CSS du thème (s'il a cette option).
S'il n'y a pas d'option `` CSS personnalisée '' dans votre thème, la meilleure façon est de créer un thème enfant (beaucoup de tutoriels à ce sujet) et d'ajouter votre CSS personnalisé dans la page styles.css de ce thème enfant. (Ne modifiez jamais le thème parent; vos modifications seront écrasées lors de la prochaine mise à jour du thème.)
la source
J'ai abordé cela en créant d'abord un thème enfant (étape recommandée par WP). Puis dans le fichier style.css du thème enfant, j'ai ajouté le css ci-dessous. La première section contrôle la hauteur de l'image sur la première page; la deuxième section contrôle la hauteur de l'espace pour l'image sur la première page. Les deux doivent correspondre pour que cela fonctionne. J'ai commenté certaines lignes qui interféraient avec mon image à hauteur fixe. Maintenant, mon en-tête sur la page d'accueil est exactement le même que sur toutes les autres pages.
la source