Bagaimana cara mengubah ketinggian gambar header di Twenty Seventeen?

9

Bagaimana cara mengubah ketinggian gambar header (ditentukan di bagian Header Media) di Twenty Seventeen Theme?

Secara khusus saya ingin mengubahnya di halaman rumah karena di sini mengisi hampir seluruh halaman. Saya ingin itu jauh lebih pendek. Cara itu muncul di halaman lain seperti halaman Tentang bawaan memiliki ketinggian yang baik jadi jika saya bisa meniru itu di halaman rumah saya akan puas. Meskipun mengetahui bagaimana melakukan kontrol yang tepat akan sangat bagus.

Pengguna
sumber
Tidak yakin mengapa tidak ada theme-twenty-seventeentag ketika tampaknya ada tag yang sesuai untuk tahun-tahun sebelumnya.
Pengguna
Ini pertanyaan yang bagus, sedih belum ada jawaban yang jelas. Berharap itu adalah filter 🤷🏻‍♀️
jerclarke
Pertanyaan terkait tentang Stack Overflow
Reinstate Monica - Goodbye SE

Jawaban:

2

Saya menemukan (bagian) dari kode css yang mengontrol ketinggian wp-content/themes/twentyseventeen/style.css.

Ada kode yang berlaku ketika bar admin tidak terlihat (pengguna anonim khas) 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 admin bar adalah terlihat (misalnya Anda login) saat ini pada 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);
}

Dan kemudian 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 tiga bagian css ini ke style.css tema anak saya dan memodifikasi heightatribut saya dapat mengubah tinggi untuk gambar header di halaman rumah. Aku mengatur ketinggian untuk 30vh, calc(30vh - 32px)dan 30vhmasing-masing di setiap bagian. Saya meninggalkan yang pertama height: 1200pxsendirian.

Perhatikan elemen ketinggian diatur di 100vhmana ukuran tinggi relatif terhadap tinggi viewport. Jadi 100vh adalah 100% dari viewport sementara 50vh adalah 50% dari viewport.

Satu hal yang aneh adalah bahwa pada halaman beranda zoom dan posisi gambar header berbeda dari pada halaman lain.

Tidak yakin apakah ini cara terbaik. Saya terbuka untuk opsi yang lebih baik tetapi sejauh ini berfungsi pada tingkat dasar.

Pengguna
sumber
tampaknya menjadi sekelompok CSS yang aneh. Saya belum mencobanya (tapi saya yakin itu tidak akan berhasil) untuk memiliki max-height 500px dan tinggi 100vh. yaitu, isi port tampilan hingga ketinggian maksimal 500px.
Madivad
Apakah Anda juga menyertakan pertanyaan @media? Ada tiga bagian yang berbeda sehingga dapat bekerja secara berbeda pada perangkat seluler vs. layar komputer (yang ketiga adalah untuk layar komputer dengan bilah admin). Saya telah bergumul dengan pertanyaan yang sama ini, dan tidak dapat membuat tema anak saya untuk mengganti tema sumber Pertanyaan Media (bahkan dengan! Penting).
Erik Harris
2

Cukup edit tema dari dasbor dan tambahkan definisi CSS berikut ke bagian tema "custom css":

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

Dari komentar yang saya buat di jawaban @ User (itu nama yang keren);) Saya pikir saya akan mencobanya.

Saya mengedit file tema secara langsung karena saya bekerja dalam wadah buruh pelabuhan yang dibuang, itu lebih merupakan bukti konsep. Menyesuaikannya dengan tema anak akan membutuhkan sedikit penyesuaian.

Di content/themes/twentyseventeen/style.cssdalam area antara 3680 ~ 3670ish adalah tempat gambar header berada.

kode asli:

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

Mengubah ukuran (dan urutan) cukup baik untuk mencapai tampilan keluar:

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

Saya telah meninggalkan vhdan %untuk menutup pangkalan-pangkalan itu di mana max-heighttidak tercapai, tetapi kemudian mengatur max-heightapa yang Anda cari.

Ada satu peringatan untuk semua ini:

Ini adalah bagian paling atas dari piksel. Jadi kecuali Anda memiliki bagian gambar yang bagus di area itu ... Itu terlihat jelek (banyak kepala terpotong)

lebih banyak untuk diikuti (ketika saya mengatasinya)

Madivad
sumber
0

Anda dapat mengubahnya dengan memotong gambar. di WordPress, ada opsi sebagai penyesuai. 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.
lalitpendhare
sumber
2
ya ..... itu bukan jawabannya. Saya melakukan itu, dan itu hanya memperbesar ke bagian gambar itu. Menjadikannya gambar yang sangat sempit tapi flls layar
Madivad
0

Anda bisa menggunakan Firebug (atau melihat kode sumber halaman) untuk menemukan CSS yang digunakan untuk menampilkan gambar header. Kemudian tambahkan CSS untuk melakukan perubahan. CSS persis yang Anda gunakan tergantung pada tema.

Firebug memungkinkan Anda mengubah CSS sementara untuk mendapatkan apa yang Anda inginkan, lalu salin CSS baru itu ke halaman CSS tema (jika ada opsi itu).

Jika tidak ada opsi 'custom CSS' di tema Anda, maka cara terbaik adalah membuat tema anak (banyak tutorial tentang itu), dan menambahkan custom css Anda ke halaman styles.css tema anak itu. (Jangan pernah mengubah tema induk; perubahan Anda akan ditimpa pada pembaruan tema berikutnya.)

Rick Hellewell
sumber
0

Saya mendekati ini dengan terlebih dahulu mengatur tema anak (disarankan langkah oleh WP). Kemudian dalam file style.css dari tema anak, saya menambahkan css di bawah ini. Bagian pertama mengontrol ketinggian gambar di halaman depan; bagian kedua mengontrol ketinggian ruang untuk gambar di halaman depan. Keduanya harus cocok agar ini berfungsi. Saya berkomentar beberapa garis yang mengganggu gambar ketinggian tetap saya. Sekarang tajuk saya di halaman beranda persis sama dengan di semua halaman lainnya.

.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;
}
pfinley
sumber
"Bagian pertama mengontrol ketinggian gambar; bagian kedua mengontrol ketinggian ruang untuk gambar." - hanya di halaman depan saya pikir?
Rup
Rup benar: "hanya di halaman depan," jadi saya mengedit jawabannya.
pfinley