Memperbaiki Caption Gambar Overlaps di Oxygen Builder

24 Mei 2022
Baca 2 menit
524 Views

Daftar Isi

Caption Gambar Overlaps di Oxygen Builder:

Kadang kita dibuat bingung saat hendak melampirkan gambar dengan ukuran penuh disertai caption pada postingan kita pada template post yang dibangun dengan Oxygen Builder, hal itu karena sering kita jumpai caption dan gambar akan overlaps melebihi lebar maksimal halaman post kita sampai ke sidebar seperti pada gambar di bawah:

Caption gambar overlaps melewati batas lebar post sampai sidebar di Oxygen Builder

Saat itu saya menemukan masalah ini, saya mencoba banyak cara untuk mengatasinya salah satunya dengan mengatur overflow di element post menjadi hidden, memang cara itu membuat gambar tidak menutupi sidebar lagi, akan tetapi dia tetap terpotong sehingga yang tampak di halaman post hanya separuh dan caption yang terlihat pun hanya separuh.

Solusi:

Setelah memutar otak dan mencari segala cara akhirnya saya memutuskan untuk mencoba memodifikasi element dengan class .wp-caption menggunakan kode css berikut:

Kode CSS:

/*FIX IMAGE AND CAPTION OVERLAPS WWW.ZAAD.MY.ID*/
.wp-caption {
border: 1px solid #ddd; /*Ubah warna border di sini*/
text-align: center; /*Ubah perataan text di sini */
background-color: rgba(0, 0, 0, 0.01); /*Ubah warna latar di belakang text di sini*/
padding-top: 4px; /*Jarak antara gambar dengan border atas*/
	padding-left: 4px; /*Jarak antara gambar dengan border kiri*/
	padding-right: 4px; /*Jarak antara gambar dengan border kanan*/
margin: 0px; /*Ruang di luar border*/
	max-width: 100%; /*LEBAR MAKSIMAL CAPTION AGAR TIDAKA OVERLAP*/
-moz-border-radius: 3px; /*Lengkungan pada sudut border*/
-khtml-border-radius: 3px; /*Lengkungan pada sudut border*/
-webkit-border-radius: 3px; /*Lengkungan pada sudut border*/
border-radius: 3px; /*Lengkungan pada sudut border*/
}
.wp-caption img {
margin: 0; 
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-size: 11px; /*Ukuran text caption*/
line-height: 17px; /*Tinggi baris caption*/
padding: 0 4px 5px; /*Padding antara caption dengan border*/
margin: 0;
}

Di mana kode CSS diletakkan?

Anda bisa meletakkan kode CSS di atas menggunakan salah satu dari beberapa cara berikut:

Melalui Custom Stylesheet di Oxygen Builder

Anda dapat menambahkan kode CSS di atas pada menu Custom CSS atau Custom Stylesheet di Oxygen Builder, yang harus Anda lakukan hanyalah mengedit template yang ada, saat editor sudah terbuka sempurna silakan tambahkan kode CSS di atas melalui menu Custom Stylesheet.

Melalui Plugin Codesnippet

Anda dapat mendownload plugin tersebut di sini, setelah didownload, diinstall dan diaktifkan Anda akan melihat menu Snippet di menu sidebar kiri Dashboard WordPress, silahkan klik Snippet atau klik Semua Snippet, Anda akan melihat sample CSS di sana, silakan edit, tambahkan kode di atas pada tempat yang telah ditentukan, simpan perubahan, lalu aktifkan kodenya. Jangan lupa untuk membersihkan cache jika Anda menggunakan plugin caching.

Melalui Kustomisasi Tema

Mungkin dari kita ada yang bertanya: "Bukannya Oxygen Builder tidak support tema?"

Memang Betul Oxygen Builder tidak support tema, tapi kita tetap bisa memasukkan custom CSS di sana dan tetap bekerja sebagaimana mestinya. Yang perlu Anda lakukan hanya: Dari halaman dashboard WordPress pilih Tampilan > Sesuaikan > CSS Tambahan dan tambahkan kode CSS di atas > Terbitkan. Jangan lupa untuk clear cache jika Anda menggunakan plugin caching.

Kesimpulan:

Caption gambar dengan lebar penuh yang overlaps (melewati batas body post) pada Oxygen Builder dapat diatasi dengan Custom CSS dengan kode di atas, kode tersebut dapat dimodifikasi sesuai selera Anda yang terpenting adalah Anda memperhatikan full width. Kode CSS di atas bisa Anda tambahkan melalui Oxygen Builder, atau menggunakan plugin Codesnippet, atau menambahkan CSS melalui Tampilan > Sesuaikan.

Tags:

Penulis: Mohammad Ridwanullah

Founder www.zaad.my.id | Author | Web Developer | Alumni Darul Ihsan Sana Daja & Ma'had Al-Ittihad Al-Islami Camplong. Melanjutkan pendidikan S1 Fakultas Syariah di LIPIA Jakarta. Melanjutkan pendidikan S2 di Fakultas Syariah jurusan Fiqh dan Ushul Fiqh di LIPIA Jakarta.

Artikel Terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

file-adduserslaptop-phoneclockdownloadmagnifiercrossmenulistchevron-leftchevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram