Blog Grid dengan Warna yang Dikategorikan (Latar Belakang atau Batas Atas)

Tutorial ini muncul karena pertanyaan yang muncul di grup Facebook yang saya ikuti . Saya hanya tahu bagaimana melakukan ini karena bantuan dari teman baik saya dan pengembang web yang luar biasa hebat Terry Hale dari Mizagorn, Ink . Dia menunjuk saya ke arah yang benar, saya hanya menggunakannya.

Saya yakin ini akan membutuhkan PHP jadi saya tidak pernah mencoba ini meskipun saya ingin tampilan ini untuk sementara waktu, tetapi saya terkejut mengetahui hal itu bisa dilakukan hanya dengan CSS. Apa ini tidak akan dilakukan adalah mempengaruhi halaman arsip kategori Anda, yang akan membutuhkan sedikit lebih banyak pekerjaan dan melibatkan file anak, tetapi ada plugin Divi yang dapat membantu dengan bagian itu jika Anda perlu.

Demo 1 - Warna Latar Belakang Penuh

Warna latar belakang berubah berdasarkan nama kategori.

LIHAT DEMO

Instruksi

Menggunakan bagian 1 kolom saya menambahkan modul blog. Dalam modul blog saya mengubah yang berikut:

• Warna teks judul: putih
• Warna teks meta: putih
• Warna teks tubuh: putih

Perlihatkan atau sembunyikan apa pun yang Anda suka, saya hanya menunjukkan tanggal, kategori, dan membaca tombol lainnya. Berikut ini ada dalam stylesheet anak Anda, kotak CSS Kustom Divi atau kotak CSS halaman Anda. ** Anda harus mengubah siput kategori agar sesuai dengan Anda **

{;} KODE CSS

CSS

40 baris

/ *** MENGHAPUS BORDER - OPTIONAL *** /

.et_pb_blog_grid  .et_pb_post  {

    perbatasan : tidak ada ;

}

/ *** GAMBAR FITUR TIDAK PERGI EDGE KE EDGE - OPTIONAL *** /

.et_pb_image_container  {

    margin : 0 ;

}

/ *** GANTI KATEGORI SLUG DENGAN ANDA DAN MENGUBAH WARNA *** /

.et_pb_blog_grid  .et_pb_post.category-travel  {

    latar belakang : # EF233C ;

}

.et_pb_blog_grid  .et_pb_post.category-wildlife  {

    latar belakang : # 084C61 ;

}

.et_pb_blog_grid  .et_pb_post.category-under-the-sea  {

    latar belakang : # 0DAB76 ;

}

.et_pb_blog_grid  .et_pb_post.category-food  {

    latar belakang : # EB4600 ;

}

/ *** BACA LEBIH BANYAK TOMBOL GAYA *** /

a .lebih-link  {

    text-transform : huruf besar ;

    display : inline-block ;

    latar belakang : rgba ( 0 , 0 , 0 , 0.3 );

    padding : 4 px  10 px ;

    margin-top : 10 px ;

    batas-radius : 3 px ;

    -moz-transisi: semua  0,2 s ;

    -webkit-transisi: semua  0,2 s ;

    transisi : semua  0,2 s ;

}

a .lebih-link : hover  {

    latar belakang : rgba ( 0 , 0 , 0 , 0,5 );

}

/ *** MENGUBAH WARNA META LINK *** /

.post-meta  a  {

    warna : #fff ! penting;

}

Demo 2 - Warna Batas Atas dan Warna Tombol

Warna batas atas dan tombol pencocokan digunakan berdasarkan nama kategori.

LIHAT DEMO

Instruksi

Menggunakan bagian 1 kolom saya menambahkan modul blog. Dalam modul blog saya mengubah yang berikut:

• Warna latar belakang kotak kisi: # f5f5f5

Sama di sini, perlihatkan atau sembunyikan apa pun yang Anda suka. Saya hanya menunjukkan tanggal, kategori, dan tombol baca lebih lanjut. Berikut ini ada dalam stylesheet anak Anda, kotak CSS Kustom Divi atau kotak CSS halaman Anda. ** Anda harus mengubah siput kategori agar sesuai dengan Anda **

{;} KODE CSS

CSS

49 baris

/ *** MENGHAPUS PADDING DEFAULT BORDER DAN MENYESUAIKAN - OPTIONAL *** /

.et_pb_blog_grid  .et_pb_post  {

    perbatasan : tidak ada ;

    padding : 20 px ;

}

/ *** GANTI KATEGORI SLUG DENGAN ANDA DAN MENGUBAH WARNA *** /

.et_pb_blog_grid  .et_pb_post.category-travel  {

    border-top : 12 px  solid  # EF233C ;

}

.et_pb_blog_grid  .et_pb_post.category-wildlife  {

    border-top : 12 px  solid  # 084C61 ;

}

.et_pb_blog_grid  .et_pb_post.category-under-the-sea  {

    border-top : 12 px  solid  # 0DAB76 ;

}

.et_pb_blog_grid  .et_pb_post.category-food  {

    border-top : 12 px  solid  # EB4600 ;

}

/ *** BACA LEBIH BANYAK TOMBOL GAYA - GANTI DENGAN KATEGORI DAN WARNA KATEGORI ANDA *** /

.et_pb_post.category-travel  a .more-link  {

    latar belakang : # EF233C ;

}

.et_pb_post.category-wildlife  a .more-link  {

    latar belakang : # 084C61 ;

}

.et_pb_post.category-under-the-sea  a .more-link  {

    latar belakang : # 0DAB76 ;

}

.et_pb_post.category-food  a .more-link  {

    latar belakang : # EB4600 ;

}

a .lebih-link  {

    warna : #fff ;

    text-transform : huruf besar ;

    display : inline-block ;

    padding : 4 px  10 px ;

    margin-top : 10 px ;

    batas-radius : 3 px ;

    -moz-transisi: semua  0,2 s ;

    -webkit-transisi: semua  0,2 s ;

    transisi : semua  0,2 s ;

}

/ *** SEMUA TOMBOL DI HOVER HIDUP HITAM *** /

.et_pb_post.category-travel  a .more-link : hover ,

.et_pb_post.category-wildlife  a .more-link : hover ,

.et_pb_post.category-under-the-sea  a .more-link : hover ,

.et_pb_post.category-food  a .more-link : hover  {

    latar belakang : # 000 ;

}

Catatan

• Ini dimaksudkan untuk digunakan di blog yang memiliki posting yang hanya memiliki satu kategori yang ditetapkan .
• Jika Anda akan mendapatkan yang funky dan menggabungkan kode untuk menggunakan keduanya pada tata letak kotak tunggal saya sarankan Anda untuk melanjutkan dengan hati-hati dan memiliki pemahaman yang baik tentang desain sehingga Anda tidak berakhir dengan kekacauan panas!

Share This Article :