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.

1. 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