Modifikasi, manipulasi, edit penampilan dan menambahkan beberapa fungsi tambahan pada tema GeneratePress menggunakan CSS Khusus (CSS Tambahan).
Salah satu trik untuk memodifikasi, menata dan menyesuaikan tampilan di GeneratePress adalah dengan menggunakan CSS. Berikut ini beberapa kumpulan CSS khusus untuk melakukan modifikasi tema GeneratePres.
Kode CSS bisa digunakan untuk memodifikasi penampilan yang dibutuhkan. Contohnya seperti memberikan efek bayangan pada kotak kontainer, meletakkan penjelasan gambar (image caption) berada di tengah, menyembunyikan penampilan tertentu dan sebagainya.
Kumpulan kode CSS ini akan kami tambah setiap ada kode baru yang bermanfaat. Silahkan pilih mungkin ada yang sesuai dengan kebutuhan Anda.
Jika Anda belum menggunakan GeneratePress Premium, Anda bisa membeli di kami dengan lisensi resmi dan harga terjangkau. Klik gambar berikut untuk informasi lebih lengkap.
- Bisa digunakan baik pengguna GP Premium maupun yang gratis.
- Masukkan melalui menu Tampilan > Sesuaikan > CSS Tambahan.
Daftar Isi
Tampilkan
Container Shadow (Efek Berbayang pada Kontainer)
/* Border Shadow */
.site-header, .main-navigation, .container, .site-footer, .site-info {
box-shadow: 0 10px 10px #555;
}Center Image Caption (Keterangan Gambar di Tengah)
Pada kondisi standar, keterangan gambar berada di sebelah kiri, gunakan kode berikut ini meletakkan di bagian tengah.
/* Center Caption START */
.wp-block-image figcaption {
text-align: center;
}Modifikasi Tombol Read More
Untuk merubah penampilan tombol Read more, gunakan kode berikut ini.
/* Read More Button START */
a.read-more.button {
font-size: 16px;
background-color: rgba(255, 255, 255, 0);
color: #115cfa;
text-decoration: none;
background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
background-size: 0% 6px, 100% 6px;
background-position: 0 bottom, 0 bottom;
transition: background-size 0.3s ease-in-out;
background-repeat: no-repeat;
padding: 10px;
}
a.read-more.button:hover{
color:#115cfa;
background-size: 100% 6px;
background-color: #115cfa00;
}Gambar Sudut Melengkung (Rounded Image)
Memberikan efek melengkung pada empat sisi gambar. Bisa untuk gambar unggulan (featured image) dan gambar yang ada di dalam artikel.
Gambar Unggulan
Masukkan kode berikut untuk memberi efek melengkung pada gambar unggulan (featured image).
.post-image img {
border-radius: 10px;
}Gambar Artikel
Untuk memberikan efek pada gambar yang berada di artikel, gunakan kode berikut.
.entry-content img {
border-radius: 10px;
}Mengatur Spasi Huruf Menu Utama
.main-navigation a {
letter-spacing: 1px;
}Teks Tengah pada Menu Ponsel
.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
text-align: center;
}Ukuran Huruf Menu Drop down
.main-navigation .main-nav ul ul li a {
font-size: 14px;
}Menyembunyikan Top Bar Pada Menu Ponsel
@media (max-width: 768px) {
.top-bar {
display: none;
}
}Modifikasi Tampilan Kutipan (Quotes)
blockquote {
max-width: 600px;
text-align: left;
margin: 30px;
padding: 20px;
font-size: 20px;
color: #363636;
}Efek Drop Cap Huruf Awal Paragraf
.single-post .entry-content > p:first-of-type:first-letter {
float: left;
clear: both;
font-size: 3em;
font-weight: 600;
line-height: 0.8em;
margin: 0.1em 0.1em 0em 0px;
padding: 2px 0px; /* adjust spacing around drop cap */
color: #363636;
}Garis Tebal di Bawah Link
p a:not(.button) {
box-shadow: 0px -4px 0px #00a2ff inset;
transition: all 0.6s ease 0s;
}
p a:not(.button):hover {
box-shadow: 0px -8px 0px #00a2ff inset;
}Garis di Bawah Judul Widget
.widget-title {
border-bottom: 1px solid #363636;
line-height: 2em;
display: inline-block;
}Menyembunyikan Excerpts di Tampilan Mobile (Selular)
@media (max-width: 768px) {
.entry-summary {
display: none;
}
}Efek Shadow Gambar Artikel
.single .wp-block-image img {
border-radius: 5px;
box-shadow: 0 0 15px 5px rgba(0,0,0,.1);
}Mengatur Ukuran Gambar Andalan di Tampilan Mobile
/* Resize featured image mobile */
@media (max-width: 768px) {
.post-image img {
width: 190px;
}
}Sudut Melengkung Kolom Pencarian
.navigation-search.nav-search-active {
border-radius: 5px;
overflow: hidden;
}Merubah Ukuran Entry Meta
.entry-meta {
font-size: 13px;
}Merubah Ukuran Entry Meta di Ponsel
/* Resize Entry Meta */
@media (max-width: 768px) {
.entry-meta {
font-size: 13px;
}
}Sudut Melengkung Container
.one-container .container
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}Menyembunyikan Featured Image di Mobile
@media (max-width: 768px) {
.post-image img {
display: none;
}
}Menyembunyikan Excerpts
/* Hide Excerpts */
.entry-summary {
display: none;
}Pagination
Pagination adalah penomoran halaman. Berikut ini beberapa pilihan kustomisasi tampilan pagination.
Style 01
.page-numbers {
padding: 4px 6px;
background-color: #187cd6;
border-radius: 5px;
color: #fff!important;
border: 2px solid #187cd6;
margin-right: .25em;
box-shadow: rgba(23,43,99,.4) 0 7px 28px!important;
}Style 02
/* Pagination */
.paging-navigation {
text-align: center;
}
.paging-navigation .page-numbers {
margin: 0 10px;
display: inline-block;
text-align: center;
min-width: 46px;
height: 46px;
line-height: 46px;
border-radius: 4px;
color: #fff;
border: 1px solid #078ade;
background: #078ade;
font-weight: 600;
font-size: 14px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.5);
}
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
padding: 0 10px;
}
.paging-navigation .page-numbers:hover,
.paging-navigation .page-numbers.current {
background: #fff;
color: #078ade;
}
/* Adjust mobile layout */
@media(max-width: 768px) {
.separate-containers .paging-navigation {
padding: 10px 5px !important;
}
.paging-navigation .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center
}
.paging-navigation .page-numbers {
margin: 4px !important;
box-sizing: border-box;
flex: 1 0 12%
}
.paging-navigation .page-numbers.prev,
.paging-navigation .page-numbers.next {
order: 50;
flex: 1 0 40%;
margin-top: 1em;
}
}Style 03
.paging-navigation {
display: flex;
}
.paging-navigation .nav-next, .paging-navigation .nav-previous {
display: block;
}
.paging-navigation .nav-previous {
margin-right: 5px;
}
.paging-navigation .nav-next {
order: 1000;
margin-left: 5px;
}
.page-numbers.prev,
.page-numbers.next {
display: none;
}
.page-numbers,
.paging-navigation span {
padding: 5px 10px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid;
text-align: center;
}Style 04
.page-numbers {
padding: 5px 10px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid;
text-align: center;
}Style 05
.page-numbers {
padding: 4px 6px;
background-color: #009442;
border-radius: 4px;
color: #fff !important;
border: 2px solid #009442;
margin-right: 0.25em;
}
.page-numbers:hover,
.page-numbers.current {
background-color: #fff;
color: #009442 !important;
}Style 06
a.page-numbers, .page-numbers.current {
border: 1px solid #000;
padding: 0 5px;
display: inline-block;
}
.page-numbers.current {
background-color: #efefef;
}Style 07
.page-numbers {
display: inline-block;
background-color: #628907;
padding: 5px 10px 5px 10px;
color: #fff;
}
.nav-links a {
color: #fff;
}
.page-numbers.current {
background-color: #fff;
padding: 5px 10px 5px 10px;
color: #628907;
}
.nav-links {
text-align: right;
}
.nav-links a:hover {
background-color: #90CB0D;
padding: 5px 10px 5px 10px;
color: #fff;
}Style 08
#nav-below {
text-align: right;
}
.nav-links .page-numbers {
display: inline-block;
min-width: 30px;
line-height: 39px;
text-align: center;
border-radius: 2px;
border: 1px solid #eaeaea;
}
.nav-links .next.page-numbers, .nav-links .prev.page-numbers {
width: auto;
padding: 0 20px;
}
.nav-links .page-numbers {
background-color: #fcf5e3;
color:#a21d2c;
}
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
background-color: #a21d2c;
color: #fff;
}Container Melengkung + Shadow
/* Curved Container */
.widget, .inside-article {
border-radius: 10px;
box-shadow: 0 0 15px 5px rgba(0,0,0,.1);
}Menampilkan Tanggal Terbit dan Update Artikel
/* Display updated date */
.posted-on .updated {
display: inline-block;
margin-right: 1em;
}
/*Add date prefixes */
.posted-on .updated:before {
content: 'Updated: ';
}
.posted-on .entry-date:before {
content: 'Published: ';
}Garis Bawah Pada Link (Underline)
/* Underline Link */
.single-post .entry-content a {
text-decoration: underline;
font-weight: bold !important;
}Posisi Excerpts di Tengah
/* Center Excerpts */
.entry-summary {
text-align: center;
}Modifikasi Penomoran (Numbering)
Tampilan penomoran yang digunakan di WPNesia:
Masukkan kode CSS berikut:
/* Number Lists */
.entry-content ol {
counter-reset: li;
}
ol {
list-style: decimal;
}
.entry-content ol li {
position: relative;
margin: 0 0 .5rem 1.03rem;
padding: 4px 1.1rem .3rem 1.5rem;
list-style: none;
border-left: .5px solid #073042;
}
.entry-content ol>li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: 0;
left: -1.2em;
box-sizing: border-box;
margin-right: 8px;
display: block;
font-size: .9rem;
padding: 7px;
width: 2.1rem;
height: 2.1rem;
line-height: 1.3;
text-align: center;
font-weight: 500;
border: .5px solid #004262;
background: #004262;
color: #fff;
border-radius: 999em;
}Baca juga:
- Membuat Breadcrumb di GeneratePress Tanpa Plugin
- Cara Menampilkan Tanggal Pembaruan Artikel di GeneratePress
- Menampilkan Iklan Adsense Sticky Footer di GeneratePress.
Request ulasan dan tutorial membuat tampilan news dari generatepress dong bang
cara modif entry meta dibawah judul postingan seperti blog ini gimana om
Buat Drop Cap
pake CSS dari GP gak jalan
pake add PHP gak kena
eh baru gol setelah pake CSS dari sini
Trims Bro
Terimaksi mas tutorialnya sangat bermanfaat. Oh ya jikan ingin tampilan genneretpress full seperti wpnesia.id CSS apa saja yang harus di ubah ?
Ini benar benar keren 👍🏼
Silahkan kirim email ke saya nanti saya kirim CSS nya, email saya ada di halaman kontak.
Untuk yang pagination, saya ingin menambahkannya untuk post atau tiap artikel, apakah kode css di atas bisa?
tidak bisa, maksudnya untuk pos navigasi yang dibawah artikel ya? nanti saya tambahkan kalau sudah ada waktu
Halo mas, saya sudah menambahkan CSS untuk custom pagination, tapi kok tetap tidak berubah ya? padahal sudah saya clear cache, dan CSSnya juga tidak ada yang salah copy
apakah meletakkan kode CSS sudah di Tampilan -> CSS Tambahan?
Ternyata saya salah maksud, sepertinya kode CSS di atas untuk paginasi blog dan bukan per post ya mas? saya ingin mengubah tampilan paginasi di artikel, apakah bisa dengan kode css di atas?
tidak bisa, maksudnya untuk pos navigasi yang dibawah artikel ya? nanti saya tambahkan kalau sudah ada waktu
Iya betul mas, saya sudah cari diinternet, kebanyakan bahas blog paginasi dan bukan post navigasi, semoga ada jalan keluar dan solusinya, padahal suka banget dengan style css di atas
nanya om, gmn cara bikin header dan nav menu digabungkan sebeperti wpnesia.id
Pastikan warna background primary navigation dan body sama² menggunakan warna putih. Tinggal nambah garis atau line di bawah navigation dengan CSS:
.main-navigation {
border-bottom: 2px solid #f8f8f8;
}
Untuk sudut melengkung setiap gambar di artikel dan featured images gimana mas?
pakai yang Gambar Sudut Melengkung (Rounded Image), kode sudah saya tulis di artikel.
Keren gan artikelnya terkait GP. Kalau dikembangkan terus, WPnesia bisa jadi seller terbesar untuk GP di Indonesia.