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.

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

Custom Pagination

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

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

Bersambung…