Selesai membaca, silakan kembali ke artikel ini untuk mengikuti uraian tentang bagaimana memodifikasi tampilan modal dari salah satu front-end framework yang sedang populer ini, serta dapatkan ucapan terima kasih dari hati saya yang paling dalam. :)
Saya akan mengawali uraian mengenai cara memodifikasi modal Bootstrap 3 ini dengan membuat sebuah file CSS dengan nama "custom.css". Selanjutnnya, simpan file tersebut pada berkas mybootstrap/css.
Kita akan menggunakan file custom.css ini untuk mendefinisikan properti-properti CSS yang akan menimpa properti-properti pada file bootstrap.min.css yang bertanggung jawab dalam mengatur tampilan modal.
Kita sebenarnya dapat menambahkan langsung properti-properti ini ke file bootstrap.min.css. Namun dengan memisahkannya pada file berbeda akan memudahkan kita ketika akan memberikan suntingan-suntingan lain, tanpa harus "merusak" file CSS bawaan Bootstrap tersebut.
Selain itu, kita pun dapat dengan mudah mengembalikan tampilan modal ke wajah aslinya, cukup dengan menghapus isi dari atau file custom.css itu sendiri.
Silakan tambahkan kode berikut pada file custom.css yang telah Anda buat.
/* Custom CSS untuk modal Twitter Bootstrap 3 */
.modal-dialog{}
.modal-content{}
.modal-header{}
.modal-title{}
.modal-body{}
.modal-footer{}
Selanjutnya buka file index.html yang ada pada berkas mybootstrap (dijelaskan pada tulisan saya sebelumnya). Kemudian tambahkan kode berikut tepat setelah elemen
<link> yang digunakan untuk memanggil file bootstrap.min.css.<link rel="stylesheet" href="css/custom.css">
File index.html tersebut sekarang akan tampak seperti berikut.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Bootstrap Labz </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
Mengatur Jarak antara Modal dengan Tepi Atas Jendela Browser
Untuk menambah atau menguranig jarak antara modal dan tepi atas jendela browser, tambahkan properti CSSpadding-top pada class .modal-dialog yang ada pada file custom.css kemudian beri nilai untuk properti tersebut dengan, misalnya, 100pxseperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
.modal-dialog{
padding-top: 100px;
}
...
Tampilan modal kemudian akan tampak seperti berikut.
Anda dapat mengganti nilai
100px dengan nilai yang lebih besar atau kecil sesuai kebutuhan.Mengganti Sudut Lengkung Modal dengan Sudut Tajam
Tambahkan propertiborder-radius:0; pada class .modal-content sehingga file custom.css menjadi seperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
.modal-dialog{
padding-top: 100px;
border-radius:0;
}
...
Sudut lengkung pada modal sekarang akan menjadi tajam seperti tampak pada gambar di bawah ini.
Menambahkan Garis Pembatas
Untuk membuat garis pembatas pada modal, tambahkan propertiborder pada class .modal-content dari file custom.css di atas. Beri nilai untuk properti tersebut, misalnya, dengan 5px solid #3498db;. Dengan nilai ini, kita akan menambahkan garis pada setiap sisi modal setebal 5 piksel dengan warna biru langit. Anda dapat menggunakan ukuran serta warna lain sesuai kebutuhan.
/* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-content{
padding-top: 100px;
border-radius: 0;
border: 5px solid #3498db;
}
...
Mengganti Warna Latar Kepala Modal
Tambahkan propertibackground-color pada class .modal-header dari file custom.css, kemudian beri nilai properti tersebut dengan warna yang diinginkan. Dalam contoh ini, saya menggunakan warna yang sama dengan warna garis pembatas, #3498db./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-header{
background-color: #3498db;
}
...
Untuk mengganti warna huruf pada judul modal, tambahkan properti
color pada class .modal-title seperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-header{
background-color: #3498db;
}
.modal-title{
color: white;
}
...
Mengganti Warna Latar Tubuh Modal
Untuk mengganti warna latar tubuh modal, tambahkan propertibackground-color pada class .modal-body seperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-body{
background-color: #21608A;
}
...
Untuk mengganti warna teks pada tubuh modal ini, tambahkan properti
color pada class yang sama. Dalam contoh ini saya menggunakan warna putih, karena latar mengunakan warna biru gelap./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-body{
background-color: #21608A;
color: white;
}
...
Untuk menghilangkan garis putih pada bagian atas tubuh modal, tambahkan properti
border-bottom: none; pada class .modal-header./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-header{
background-color: #3498db;
border-bottom: none;
}
.modal-body{
background-color: #21608A;
color: white;
}
...
Mengganti Warna Latar Kaki Modal
Untuk mengganti warna latar kaki modal, tambahkan propertibackground-color pada class .modal-footer seperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-footer{
background-color: #3498db;
}
Untuk menghilangkan area berwarna putih di atas kaki modal, tambahkan properti
margin-top: 0; pada class .modal-footer seperti berikut./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-footer{
background-color: #3498db;
margin-top: 0;
}
Mengganti Warna Latar Modal secara Keseluruhan
Jika Anda bermaksud menggunakan warna yang sama pada bagian latar modal secara keseluruhan, cukup tambahkan propertibackground-color pada class .modal-content, dan hilangkan semua properti background-color yang telah kita tambahkan pada class .modal-header, .modal-body, dan .modal-footer sebelumnya./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-content{
background-color: black;
}
.modal-header{
border-bottom: none;
}
.modal-body{
color: white;
}
.modal-footer{
margin-top: 0;
}
Garis tipis yang berada di atas kaki modal dapat dihilangkan dengan menambahkan properti
border-top: none; pada class .modal-footer. Kita dapat pula mengganti warna garis tersebut dengan menambahkan properti border-color./* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-footer{
border-top: none; /* Menghilangkan garis di atas kaki modal */
margin-top: 0;
}
/* Custom CSS untuk modal Twitter Bootstrap 3 */
...
.modal-footer{
border-color: blue; /* Mengganti warna garis menjadi biru */
margin-top: 0;
}
Demikian tutorial singkat cara mengutak-atik tampilan modal Twitter Bootstrap 3 ini. Mudah-mudahan bermanfaat!