Modifikasi GeneratePress dengan 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.

Baca juga: Menggunakan Google Fonts Local di GeneratePress

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

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

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: ';
}

Bersambung…

Bagikan

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

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

    Balas

Tinggalkan komentar