Modifikasi GeneratePress dengan CSS Khusus (CSS Tambahan)

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.

Beli GeneratePress Premium
  • Bisa digunakan baik pengguna GP Premium maupun yang gratis.
  • Masukkan melalui menu Tampilan > Sesuaikan > CSS Tambahan.

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

Custom Paginasi GP 01
Custom Paginasi GP 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

Custom Paginasi GP 02
Custom Paginasi GP 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

Custom Paginasi GP 03
Custom Paginasi GP 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

Custom Paginasi GP 04
Custom Paginasi GP 04
.page-numbers {
	padding: 5px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px solid;
	text-align: center;
}

Style 05

Custom Paginasi GP 04
Custom Paginasi GP 04
.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

Custom Paginasi GP 06
Custom Paginasi GP 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

Custom Paginasi GP 07
Custom Paginasi GP 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

Style08
Style08
#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;
    }

Bersambung…

Part-time blogger, content writer, WordPress enthusiast dan penikmat kopi. Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002.

12 pemikiran pada “Modifikasi GeneratePress dengan CSS Khusus (CSS Tambahan)”

  1. Untuk yang pagination, saya ingin menambahkannya untuk post atau tiap artikel, apakah kode css di atas bisa?

    Balas
  2. 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

    Balas
      • 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?

        Balas
          • 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

    • 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;
      }

      Balas
  3. Keren gan artikelnya terkait GP. Kalau dikembangkan terus, WPnesia bisa jadi seller terbesar untuk GP di Indonesia.

    Balas

Tinggalkan komentar