Yirmi Onyedi'de başlık resim yüksekliğini nasıl değiştirebilirim?

Yirmi On Yedi Temadaki başlık görüntüsünün (Başlık Ortamı bölümünde belirtilen) yüksekliğini nasıl değiştirebilirim?

Özellikle ana sayfada değiştirmek istiyorum çünkü burada neredeyse tüm sayfayı kaplıyor. Çok daha kısa olmasını istiyorum. Yerleşik Hakkında sayfası gibi diğer sayfalarda görünme şekli iyi bir yüksekliğe sahiptir, bu nedenle ana sayfada bunu taklit edersem memnun olurum. Hassas kontrolün nasıl yapıldığını bilmek harika olurdu.

Yüksekliğini kontrol eden css kodunun bir kısmını buldum wp-content/themes/twentyseventeen/style.css.

Yönetici çubuğu zaman geçerlidir kod yoktur değil görünür (tipik anonim kullanıcı) şu anda hat 3629 at

.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önetici çubuğu zaman geçerlidir Ve kod olan görünür anda hat 3646 at (örneğin giriş yaptıktan)

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

Ve sonra şu anda 1638 satırındaki mobil cihazlarda geçerli olan kod:

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

Css'in bu üç bölümünü alt temamın style.css dosyasına kopyalayarak ve heightözniteliği değiştirerek ana sayfadaki başlık resminin yüksekliğini ayarlayabildim. I yüksekliğini ayarlamak 30vh, calc(30vh - 32px)ve 30vhher bir bölüm, sırasıyla. İlkini height: 1200pxyalnız bıraktım .

Height öğesinin, 100vhyüksekliğin görünüm alanı yüksekliğine göre boyutlandırıldığı şekilde ayarlandığını unutmayın . Yani 100vh görüntü alanının% 100'ü iken 50vh görüntü alanının% 50'sidir.

Garip bir şey, ana sayfada başlık görüntüsünün yakınlaştırılması ve konumunun diğer sayfalardan farklı olmasıdır.

Bunun en iyi yol olup olmadığından emin değilim. Daha iyi seçeneklere açığım ama şimdiye kadar temel düzeyde çalışıyor.

Temayı kontrol panelinden düzenleyin ve "özel css" tema bölümüne aşağıdaki CSS tanımını ekleyin:

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

@ Kullanıcı'nın cevabında yaptığım bir yorumdan (bu güzel bir isim);) Ben bir gitmek vereceğini düşündüm.

Tema dosyasını doğrudan düzenliyorum çünkü bir boşaltma liman işçisi konteynırında çalışıyorum, bu daha fazla kavram kanıtı. Bir alt temaya uyarlamak için biraz değişiklik yapmanız gerekir.

Gelen content/themes/twentyseventeen/style.css3680 ~ 3670ish arasındaki alanda burada başlık resmi yalan.

orijinal kod:

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

Oturumu kapatmış görünüme ulaşmak için boyutu (ve siparişi) değiştirmek yeterince iyidir:

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

Ulaşılmayan bu üsleri kapsamak için vhve tuşlarını bıraktım , ancak sonra ne olduğunuzu ayarlayın .%max-heightmax-height

Bütün bunlara bir uyarı var:

Piksellerin en üst kısmı. Yani o bölgede görüntünün güzel bir kısmı yoksa ... Bok gibi görünüyor (birçok kafa kesilmiş)

takip etmek için daha fazla şey (bunu çözdüğümde)

Görüntüyü kırparak değiştirebilirsiniz. WordPress'te özelleştirici olarak bir seçenek vardır. Görüntüyü kırpmak için aşağıdaki adımları izlemeniz gerekir.

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

Başlık görüntüsünü görüntülemek için kullanılan CSS'yi bulmak için Firebug'u kullanabilirsiniz (veya sayfa kaynak koduna bakabilirsiniz). Ardından değişikliği yapmak için CSS'yi ekleyin. Kullandığınız tam CSS temaya bağlıdır.

Firebug, istediğiniz şekilde elde etmek için CSS'yi geçici olarak değiştirmenize ve ardından bu yeni CSS'yi temanın CSS sayfasına kopyalamanıza izin verir (bu seçenek varsa).

Temanızda 'özel CSS' seçeneği yoksa, en iyi yol bir çocuk teması (bu konuda çok sayıda öğretici) oluşturmak ve özel css'nizi o alt temanın styles.css sayfasına eklemektir. (Asla ana temayı değiştirmeyin; bir sonraki tema güncellemesinde değişikliklerinizin üzerine yazılır.)

İlk olarak bir çocuk teması kurarak yaklaştım (WP tarafından önerilen adım). Sonra alt temanın style.css dosyasında, aşağıdaki css'i ekledim. İlk bölüm görüntünün ön sayfadaki yüksekliğini kontrol eder; ikinci bölüm, ön sayfadaki görüntü için alan yüksekliğini kontrol eder. Her ikisi de bunun çalışması için eşleşmelidir. Sabit yükseklik imajımı etkileyen bazı satırları yorumladım. Şimdi ana sayfadaki başlığım diğer tüm sayfalardakiyle tamamen aynı.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.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: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}