Kumpulan Custom CSS Code Untuk Tema Activello
Mau share buat dokumentasi pribadi, mana tau suatu saat akan butuh, atau ada sobat yang cari-cari tutorial untuk mengoptimalkan blognya yang menggunakan tema Activello.
Adapun cara menerapkannya sangat mudah, tinggal klik Setting> Theme> Customize> Activello Options> Other> pada box itu kamu copy-pastekan kode pilihan dibawah ini:
1. Cara mengubah ukuran icon media sosial pada footer
Berikut ini kodenya:
#footer-area .social-menu a, #page .social-menu a {
font-size: 30px;
}
30 px adalah besar ukuran ikon media sosial, bisa kamu ubah sesuai keinginan.
2. Menghapus separate/ space diatas judul post pada halaman category/ Archive/ page
Berikut kodenya:
.archive .post-inner-content { padding-top: 0; margin-bottom: 30px; padding-bottom: 0; } .archive header.page-header { margin-bottom: 0; }
Margin-top dan padding-top menghapus jarak kosong/ spasi bagian atas postingan, sedang margin-bottom dan padding-bottom mengatur bagian bawah postingan. Jika ingin lebih detail belajar tentang margin disni dan padding disini.
3. Menghapus judul kategori/ halaman di category page & page
Berikut kodenya:
#main > .page-header h1.page-title,
body.page h1.entry-title {
display: none; }
4. Membuat judul dan backgroud sidebar berwarna
Berikut kodenya:
#secondary .widget-title:after{
display: none;
}
#page #secondary h3.widget-title {
background: #FFCE41;
text-align: center;
padding: 10px;
border-radius: 5px 5px 0 0;
margin-bottom: 0;
color: #fff;
}
#secondary .widget *{
background: #3EC980;
color: #fff;
padding: 5px;
border-color: #87D69C;
}
#secondary .widget > *{
border-radius: 0 0 5px 5px;
}
Warnanya bisa kamu rubah dengan cara merubah kode warna (contoh: warna putih #fff;) yang kamu sukai. Pada kode text-align, bisa kamu pilih center; = tengah, left; = kiri dan right; = kanan.
5. Membuat background judul sidebar seperti material design
Bagian kode ini tidak akan berfungsi jika kamu sudah menggunakan kode no 4, jadi sebaiknya pilih salah satu. Berikut kodenya:
#secondary .widget > h3.widget-title {
background: #2196F3;
color: #fff;
border-radius: 4px;
padding: 15px;
}
#secondary .widget > h3.widget-title:after{
display: none;
}
6. Membuat floating menu atau navbar
Berikut kodenya:
A. Kode berikut floating akan tampil dalam mode full site mode atau desktop view, tapi tidak ketika mobile view.
@media (min-width: 768px){
header#masthead {
margin-top: 50px;
}
nav.navbar.navbar-default {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
body.admin-bar nav.navbar.navbar-default {
top: 30px;
}
}
B. Kode berikut bisa untuk semua mode view, baik desktop maupun mobile.
header#masthead {
margin-top: 50px;
}
nav.navbar.navbar-default {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999;
}
body.admin-bar nav.navbar.navbar-default {
top: 30px;
}
7. Mengganti warna menu, sub menu dan backgroundnya
Berikut kodenya:
#page .navbar-default .navbar-nav > li > a {
color: #2196F3;
}
#page .navbar-default .navbar-nav > .active > a,
#page .navbar-default .navbar-nav > .active > a:hover,
#page .navbar-default .navbar-nav > .active > a:focus,
#page .navbar-default .navbar-nav > li > a:hover,
#page .navbar-default .navbar-nav > li > a:focus,
#page .navbar-default .navbar-nav > .open > a,
#page .navbar-default .navbar-nav > .open > a:hover,
#page .navbar-default .navbar-nav > .open > a:focus {
color: #2196F3;
background-color: #fff;
}
#page .dropdown-menu > li > a {
color: #636467;
}
#page .dropdown-menu > li > a:hover,
#page .dropdown-menu > li > a:focus,
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
#page .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #fff;
background-color: #2196F3;
}
Kode-kode warnanya bisa kamu ubah sesuai warna-warna favoritmu.
8. Mempersempit jarak padding bagian atas dan bawah logo blog
Menurut saya dan beberapa pengguna tema activello, jarak padding (lebih mudahnya jarak pemisah Logo-menu dan logo-judul post) default activello terlalu panjang. Hal ini ditanyakan user bagaimana mempersempit padding itu?
Berikut kode yang diberikan developer super baik bernama Vinod Dalvi:
div#logo {
padding: 20px 0 10px 0;
}
20px dan 10px nilai itu bisa kamu ganti sesuai dengan kecocokan.
- Background kedua meliputi post konten dan sidebar
/* Background kedua di content dan siebar */
.container.main-content-area {
background: #fff;
border-radius: 10px 10px 10px 20px;
padding: 50px 20px 20px 20px;
}
Bagaimana? Masih ada yang ingin kamu improvisasi lagi? silahkan komentar untuk pertanyaan lanjutan, atau bisa juga kamu langsung ke forum tema Activello di WordPress.org dan colorlib.com