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

Ikon media sosial
Ikon media sosial

Berikut ini kodenya:

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

hapus separate diatas post-title

Berikut kodenya:

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:

4. Membuat judul dan backgroud sidebar berwarna

Berikut kodenya:

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:

6. Membuat floating menu atau navbar

Menu selalu terlihat walau mode scroll
Menu selalu terlihat walau mode scroll

Berikut kodenya:

A. Kode berikut floating akan tampil dalam mode full site mode atau desktop view, tapi tidak ketika mobile view.

B. Kode berikut bisa untuk semua mode view, baik desktop maupun mobile.

7. Mengganti warna menu, sub menu dan backgroundnya

Berikut kodenya:

Kode-kode warnanya bisa kamu ubah sesuai warna-warna favoritmu.

8. Mempersempit jarak padding bagian atas dan bawah logo blog

Sebelum
Sebelum
Sesudah
Sesudah

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:

20px dan 10px nilai itu bisa kamu ganti sesuai dengan kecocokan.

  1. Background kedua meliputi post konten dan sidebar

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

About Hamam Abidin

Ngeblog adalah hobi paling mengasyikkan sejak saya kenal internet. Menulis di blog lebih bermakna ketimbang menulis status di facebook.

Tinggalkan Balasan

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