web-dev-qa-db-fra.com

Comment changer la hauteur de l'image d'en-tête dans Twenty Seventeen?

Comment modifier la hauteur de l'image d'en-tête (spécifiée dans la section Support d'en-tête) dans le thème Twenty Seventeen?

Plus précisément, je souhaite le modifier 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 telles que la page intégrée À propos a une bonne hauteur, donc si je pouvais l'imiter sur la page d'accueil, je serais satisfait. Bien que savoir faire un contrôle précis serait génial.

themesheader-imagetheme-twenty-seventeen
9
User

J'ai trouvé (une partie) du code CSS qui contrôle la hauteur dans wp-content/themes/twentyseventeen/style.css.

Il y a du code qui s'applique quand la barre d'administration n'est pas visible (utilisateur anonyme typique) actuellement à la ligne 3629

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Et le code qui s'applique lorsque la barre d'administration est visible (par exemple, vous êtes connecté) actuellement à la ligne 3646

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

Et puis le code qui s'applique sur le mobile actuellement à la ligne 1638:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

En copiant ces trois sections css dans le fichier style.css de mon thème enfant et en modifiant l'attribut height, j'ai pu ajuster la hauteur de l'image d'en-tête de la page d'accueil. Je règle la hauteur à 30vh, calc(30vh - 32px) et 30vh respectivement dans chaque section. J'ai laissé le premier height: 1200px seul.

Notez que l'élément height est défini sur 100vh qui redimensionne la hauteur par rapport à la hauteur de la fenêtre. Ainsi, 100vh correspond à 100% de la fenêtre d'affichage, tandis que 50vh correspond à 50% de la fenêtre.

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 le meilleur moyen. Je suis ouvert à de meilleures options mais jusqu'à présent, cela fonctionne à un niveau de base.

2
User

Il vous suffit de modifier le thème à partir du tableau de bord et d’ajouter la définition CSS suivante dans la section "CSS personnalisé":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}
2
Ralph

D'après un commentaire que j'ai fait dans la réponse de @Utilisateur (c'est un nom génial);) j'ai pensé que j'essaierais.

J'édite directement le fichier de thème car je travaille dans un conteneur de docker jetable, c'est davantage une preuve de concept. L'adaptation à un thème enfant nécessitera quelques modifications.

Dans content/themes/twentyseventeen/style.css dans la zone comprise entre 3680 et 3670, l’image d’en-tête se trouve.

code d'origine:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

Changer la taille (et l'ordre) est suffisant pour obtenir la vue déconnectée:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

J'ai laissé la vh et le % pour couvrir les bases où max-height n'est pas atteint, mais réglez ensuite le max-height sur ce que vous recherchez.

Il y a une mise en garde à tout cela:

C'est la partie la plus haute des pixels. Donc, à moins que vous n'ayez une belle portion d'image dans cette zone ... Ça a l'air minable (beaucoup de têtes coupées)

plus à suivre (quand je fais le tri)

1
Madivad

Vous pouvez utiliser Firebug (ou consulter 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 code CSS exact que vous utilisez dépend du thème.

Firebug vous permet de changer le CSS temporairement pour l’obtenir comme vous le souhaitez, puis copiez ce nouveau CSS dans la page CSS du thème (s’il dispose de cette option).

S'il n'y a pas d'option 'CSS personnalisé' dans votre thème, la meilleure méthode consiste à créer un thème enfant (de nombreux tutoriels sur ce sujet) et à ajouter votre css personnalisé à la page styles.css de ce thème enfant. (Ne changez jamais le thème parent; vos modifications seront écrasées lors de la prochaine mise à jour du thème.)

0
Rick Hellewell

Vous pouvez le changer en recadrant l'image. dans WordPress, il existe une option de personnalisation. Vous devez suivre les étapes ci-dessous pour recadrer une image.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.
0
lalitpendhare