Menyesuaikan tema anak Luxeritas (style.css)
Luxeritas adalah tema Wordpress gratis dan sangat fungsional buatan Jepang.Di blog ini, saya akan memperkenalkan konten penyesuaian style.css dari tema anak.
Cara mengedit tema anak Luxeritas
Ada dua cara untuk mengedit style.css
1. Masuk langsung ke "Style Sheet: style.css"
Layar manajemen: Luxeritas → Edit tema anak → Pilih tag “style.css”.
Tulis kode setelah "/* Di bawah ini, tulis gaya untuk tema anak sesuai keinginan Anda. */".
2.Masukan dalam "CSS tambahan" dari kustomisasi tampilan
Layar manajemen: Luxeritas → Kustomisasi (tampilan) → CSS tambahan
Ini direkomendasikan karena Anda dapat melihat hasil refleksi kode pada saat yang sama saat Anda memasukkan kode.
Konten style.css yang disesuaikan
Judul situs tebal
Bagi yang mengatakan bahwa teks standar sedikit tipis dan meninggalkan sedikit kesan.
/* judul situs */ #namasitus { font-weight: bold;}
Tambahkan bayangan ke bagian bawah menu strip agar terlihat seperti bahan
Ia memiliki bayangan...
Ini akan menjadi ini.Ini perbedaan yang halus, tetapi suasana situs berubah secara tak terduga.
/*bayangan di bawah nav global*/ #nav { box-shadow: 0 2px 10px rgba(0,0,0,.2) }
Arahkan warna yang tidak dapat diatur dari penyesuaian tampilan
Warna hover standar untuk judul artikel dan artikel sebelum dan sesudah berwarna merah.Saya rasa tidak ada item yang diubah langsung dari kustomisasi tampilan.
warna: Anda dapat mengubahnya dengan memasukkan kode warna favorit Anda di bawah ini.Omong-omong, "#00b22f" berwarna hijau muda.Selain itu, judul artikel dicetak tebal agar lebih mudah dibaca.
/* Judul artikel */ .entry-title a:hover{color:#00b22f;} .entry-title {font-weight: bold;} /* Sebelum dan sesudah artikel */ #pnavi a:hover{color:#00b22f }
Ubah kartu blog Anda menjadi desain material
Kartu blog seperti ini akan selesai.Saat Anda mengarahkan kursor ke atasnya, itu menjadi mengembang.
/* desain kartu blog */ a.blogcard-href { padding: 0px; min-height: 102px; box-shadow: 0 2px 5px rgba(0, 0, 0, .13); transisi: .3s; .blogcard- href:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translateY(-5px); } .blogcard-img { margin: 0px 10px 0 0; p.blog-card-title { margin: 5px 5px 5px 5px; } p.blog-card-desc { display: none; } p.blogcard-link { clear: none; margin: 5px 0 5px 5px; layar dan (lebar maks: 430px){ p .blogcard-link { tampilan: tidak ada;
Saya menggunakan halaman berikut sebagai referensi.
Kustomisasi kartu blog Luxeritas agar mengapung seperti SANGO
Mengubah warna paginasi
Seperti judul artikel, tetap merah dan tidak dapat diubah dari penyesuaian tampilan. "#999999" membuatnya menjadi abu-abu.
.pagination>.active>span, .pagination>li>a:hover{ background: none; background-color: #999999;
Ini penampakannya setelah diganti
Menandai desain ulang cloud
/* Tag cloud redesign */ .tagcloud a { border-radius: 3px; /* Rounded corner */ padding-bottom: 1px; padding-left: 6px; padding-right: 3px; }
Saya membulatkan sudut tag dan mempersempit lebar garis.
Hapus padding di bawah judul artikel
Ketika saya meletakkan iklan google adsense di bawah judul artikel, saya khawatir ruang baris sebelum dan sesudah iklan tampak besar. Setelah menghapus margin, saya dapat menginstalnya sekompak mungkin.
/* Informasi Meta (Diperbarui) Hapus margin bawah */ .meta, .post .meta { padding: 5px 0; margin-bottom: 0px; } /* Hapus margin di atas dan di bawah artikel */ .post-judul-atas, . post-title-under { margin-bottom: 1px;
Itu dia.