¿Cómo cambio la altura de la imagen del encabezado en Twenty Seventeen?

9

¿Cómo cambio la altura de la imagen del encabezado (especificada en la sección Encabezado de medios) en el tema Veintisiete?

Específicamente quiero cambiarlo en la página de inicio porque aquí llena casi toda la página. Quiero que sea mucho más corto. La forma en que aparece en otras páginas, como la página Acerca de incorporada, tiene una buena altura, por lo que si pudiera imitar eso en la página de inicio, estaría satisfecho. Aunque saber cómo hacer un control preciso sería genial.

    
pregunta User 06.03.2017 - 11:54

5 respuestas

1

Encontré (parte) del código css que controla la altura en wp-content/themes/twentyseventeen/style.css .

Hay un código que se aplica cuando la barra de administración no está visible (usuario anónimo típico) actualmente en la línea 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;
}

Y el código que se aplica cuando la barra de administración está visible (por ejemplo, está conectado) actualmente en la línea 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);
}

Y luego el código que se aplica en el móvil actualmente en la línea 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%;
}

Al copiar estas tres secciones de css en style.css del tema de mi hijo y al modificar el atributo height , pude ajustar la altura de la imagen del encabezado en la página de inicio. Establecí la altura en 30vh , calc(30vh - 32px) y 30vh respectivamente en cada sección. Dejé el primer height: 1200px solo.

Tenga en cuenta que el elemento de altura se establece en 100vh , que mide la altura en relación con la altura de la ventana gráfica. Entonces, 100vh es el 100% de la ventana gráfica mientras que 50vh es el 50% de la ventana gráfica.

Una cosa extraña es que en la página de inicio el zoom y la posición de la imagen del encabezado son diferentes a las de otras páginas.

No estoy seguro de si esta es la mejor manera. Estoy abierto a mejores opciones, pero hasta ahora está funcionando a un nivel básico.

    
respondido por el User 07.03.2017 - 06:02
1

De un comentario que hice en la respuesta de @ Usuario (ese es un nombre genial);) pensé en darle una oportunidad.

Estoy editando el archivo de tema directamente porque estoy trabajando en un contenedor desechable desechable, es más una prueba de concepto. Adaptarlo a un tema infantil necesitará algunos ajustes.

En content/themes/twentyseventeen/style.css en el área entre 3680 ~ 3670ish es donde se encuentra la imagen del encabezado.

código original:

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

Cambiar el tamaño (y el orden) es lo suficientemente bueno para lograr la vista de cierre de sesión:

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

He dejado vh y % para cubrir aquellas bases donde no se alcanza max-height , pero luego establezca max-height para lo que está buscando.

Hay una advertencia a todo esto:

Es la sección superior de píxeles. Entonces, a menos que tengas una buena parte de la imagen en esa área ... Parece una mierda (muchas cabezas cortadas)

más a seguir (cuando lo ordene)

    
respondido por el Madivad 06.08.2017 - 19:38
1

Solo edite el tema desde el panel de control y agregue la siguiente definición de CSS en la sección del tema "css personalizado":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}
    
respondido por el Ralph 27.03.2018 - 11:01
0

Puedes cambiarlo recortando la imagen. En WordPress, hay una opción como personalizador. Debe seguir los siguientes pasos para recortar la imagen.

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

Puedes usar Firebug (o mirar el código fuente de la página) para encontrar el CSS usado para mostrar la imagen del encabezado. Luego agrega el CSS para hacer el cambio. El CSS exacto que uses depende del tema.

Firebug te permite cambiar el CSS temporalmente para obtenerlo como quieres, luego copiar ese nuevo CSS en la página CSS del tema (si tiene esa opción).

Si no hay una opción de 'CSS personalizado' en su tema, entonces la mejor manera es crear un tema secundario (con muchos tutoriales) y agregar su css personalizado a la página de styles.css de ese tema secundario. (Nunca cambie el tema principal; sus cambios se sobrescribirán en la próxima actualización del tema).

    
respondido por el Rick Hellewell 07.03.2017 - 02:39

Lea otras preguntas en las etiquetas