Bagaimana cara mengubah tinggi gambar header di Twenty Seventeen?
Bagaimana cara mengubah tinggi gambar header (ditentukan di bagian Media Header) di Tema Twenty Seventeen?
Secara khusus saya ingin mengubahnya di halaman beranda karena di sini gambar tersebut memenuhi hampir seluruh halaman. Saya ingin agar ukurannya jauh lebih pendek. Tampilannya pada halaman lain seperti halaman Tentang bawaan memiliki ketinggian yang bagus, jadi jika saya bisa menirunya pada halaman beranda, saya akan puas. Meskipun mengetahui cara melakukan kontrol yang tepat akan sangat bagus.
Saya menemukan (bagian) dari kode css yang mengontrol ketinggian di wp-content/themes/twentyseventeen/style.css.
Ada kode yang berlaku ketika bilah admin tidak terlihat (tipikal pengguna anonim) saat ini di baris 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;
}Dan kode yang berlaku ketika bilah admin terlihat (misal, Anda sedang login) saat ini di baris 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);
}Lalu kode yang berlaku di ponsel saat ini di baris 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%;
}Dengan menyalin ketiga bagian css ini ke dalam style.css tema anak saya dan memodifikasi atribut height, saya dapat mengubah tinggi gambar header di halaman beranda. Saya mengatur tinggi ke 30vh, calc(30vh - 32px), dan 30vh di setiap bagian. Saya membiarkan height: 1200px yang pertama.
Perhatikan, elemen tinggi ditetapkan pada 100vh yang mengukur tinggi relatif terhadap tinggi viewport. Jadi, 100vh adalah 100% dari viewport, sedangkan 50vh adalah 50% dari viewport.
Satu hal yang aneh adalah bahwa pada halaman beranda, zoom dan posisi gambar header berbeda dengan halaman lainnya.
Saya tidak yakin apakah ini cara terbaik. Saya terbuka untuk opsi yang lebih baik tetapi sejauh ini berfungsi pada tingkat dasar.
Anda dapat mengubahnya dengan memotong gambar. di WordPress, ada opsi sebagai customizer. Anda harus mengikuti langkah-langkah di bawah ini untuk memotong gambar.
1) Go appearance->customize
2) Header media
3) add a new image and then crop that image as per your needs and you go.
Anda dapat menggunakan Firebug (atau melihat kode sumber halaman) untuk menemukan CSS yang digunakan untuk menampilkan gambar header. Kemudian tambahkan CSS untuk membuat perubahan. CSS yang Anda gunakan tergantung pada tema.
Firebug memungkinkan Anda mengubah CSS untuk sementara waktu agar sesuai dengan yang Anda inginkan, lalu menyalin CSS baru tersebut ke dalam halaman CSS tema (jika memiliki opsi tersebut).
Jika tidak ada opsi 'custom CSS ' di tema Anda, maka cara terbaik adalah membuat tema anak (banyak tutorial tentang itu), dan menambahkan css kustom Anda ke dalam halaman styles.css tema anak tersebut. (Jangan pernah mengubah tema induk; perubahan Anda akan ditimpa pada pembaruan tema berikutnya).
