web-dev-qa-db-fra.com

Modification de la hauteur de défilement de l'en-tête pour le thème Twenty Seventeen sur TOUTES les pages

J'ai édité le thème Twenty Seventeen via un thème enfant sur mon blog Wordpress et j'ai essayé d'ajuster la hauteur de défilement de l'en-tête car il prenait beaucoup trop d'espace auparavant. Je voulais plus d'un en-tête traditionnel.

Remarque Je ne souhaite pas redimensionner ou rogner la taille réelle de l'en-tête, mais rogner la taille de la hauteur verticale que prend l'en-tête. En cherchant dans les environs, j'ai trouvé un moyen de le faire via le fil suivant:

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

Cependant, cela ajuste seulement la hauteur sur la page d'accueil et pas d'autres pages. Je voudrais qu'il soit pareil pour toutes les pages. (Ma référence, mon site est ici http://chugsforlife.esy.es/ , si vous regardez sur la page d'accueil, la hauteur de l'en-tête est correcte, mais accédez à n'importe quelle autre page et elle est ridiculement écrasée)

EDIT: Voici le code que j'ai initialement ajouté dans le style.css de mon thème enfant wordpress:

.twentyseventeen-front-page.has-header-image .custom-header-media,


.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: 60vh;
max-height: 100%;
overflow: hidden;
}


.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(60vh - 32px);
}

.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: 55vh;
    width: 100%;
}
header-imagetheme-twenty-seventeen
1
hessam zare

de cette question que vous avez mentionnée, voici le code:

.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;
}

Révision: essayez de supprimer la page d’accueil et la page de couverture des sélecteurs pour votre utilisation spécifique: vous pouvez l’utiliser pour remplacer ce que vous avez inséré et couvrir la page de couverture également.

.has-header-image .custom-header-media, blog.has-header-image .custom-header-media {
    height: 1200px;
    height: 70vh;
    max-height: 100%;
    overflow: hidden;
}

.has-header-image .custom-header {
    display: table;
    height: 300px;
    width: 100%;
}
1
rudtek