Kode CSS Untuk Memoles Wisteria Theme

Tulisan ini hanya sebagai dokumentasi, kumpulan kode css untuk membuat tema wisteria (tema wordpress.org) agar tampil lebih ciamik, walau sebenernya ini hanya koleksi pribadi. Saya share biar bermanfaat, siapa tahu ada yang berminat.

Apa itu Wisteria Theme

Wisteria theme adalah tema untuk blog/ website kita yang menggunakan cms WordPress, tidak bisa dipasang di blogspot, tumblr atau blog wordpress.com,

Theme ini sangat simpel dan responsive, mengedit code cssnya juga mudah, kamu bisa dapatkan teme ini repositori wordpress atau download disini:  Wisteria File

WISTERIA CUSTOM CSS CODE

1. Kode menambah font-family, font ini di copy paste pada style.css letaknya di Appearance > Editor > Styles.css tema wordpress:

@import url('https://fonts.googleapis.com/css?family=Abel|Lakki+Reddy|Cabin+Sketch|Playfair+Display');

Kode diatas adalah bagian dari kode css yang saya share dibawah ini. Jadi jika code dibawah di aplikasikan tanpa kode diatas, akan ada beberapa fungsi yang tak jalan (font tak berubah ke bentuk yang seharusnya). Untuk kode selanjutnya, kamu copy-pastekan di custom css yang letaknya di Appearance > Customize > Custom CSS.

 

2. Kode menyembunyikan footer/ credite/ copyright:

.site-info { display: none; }

3. Kode mempercantik judul blog, mengganti font dan merubah ukuran font:

/* ===== BLOG TITLE =======*/
.site-title  {
font-family: "Abel", sans-serif;
  font-size: 36px;
  font-size: 3.25rem;
  font-weight: 400;
  background: #FFD600;
  margin: 0;
  padding: 5px 15px 5px 15px;
  text-transform: uppercase;
  border: 7px double #fff;
}
.site-description {
   color: #fff;
   background: #212121;
 margin: 1px 2px 0 2px;
 
}

4. Mengganti warna dan font menu ( mobile dan PC ):

/* ====== KODE MENU =====*/
.main-navigation {
    background-color: #03A9F4;
 }
 /* List Separator */
  .sf-menu > li:before {
    background: #039BE5;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    top: calc(50% - 6px);
    width: 1px;
    height: 12px;
  }


/* ==== Primary Menu Responsive ==== */
.site-primary-menu-responsive {
  background: #03A9F4;
  color: #fff;
  display: none;
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
  padding: 30px;
  padding: 1.875rem;
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.primary-menu-responsive a:hover, .primary-menu-responsive a:focus, .primary-menu-responsive a:active {
  color: yellow;
}

.primary-menu-responsive a, .primary-menu-responsive a:visited {
  color: #fff;
}

5. Memoles widget recent post agar terlihat lebih ekslusif dan elegan, background, font dan warna:

/*======= Recent Post ==========*/
#secondary .widget_recent_entries.widget {
    background: #795548;
    border: 4px double #EFEBE9;
}

#secondary .widget_recent_entries h2.widget-title {
    background: #795548;
    font-family: "Cabin Sketch", sans-serif;
    font-size: 1.3rem;
    text-align: center;
    color: #fff;
    border: 3px double #D7CCC8;
    padding: 3px;
    margin: 0 0 15px 0;
}
#secondary .widget_recent_entries.widget *{
    font-family: "Abel", sans-serif;
    font-size: 1rem;
    color: #fff;
}

#secondary .widget_recent_entries.widget a:hover {
    color: #D7CCC8;
}
#secondary .widget_recent_entries.widget a {
    display: block;
}

6. Mengganti interface author box dibawah konten postingan tunggal:

/* ===== KODE Edit AUTHOR ========= */
  .author-info {
    background-color: #BBDEFB
;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .author-info .author-avatar {
    margin: 0;
    width: 20%;
  }
  .author-info .author-description {
    padding: 0 0 0 30px;
    padding: 0 0 0 1.875rem;
    width: 80%;
  }

7. Mengganti font dan ukuran font h1, h2, h3, h4, h5 dan h6:

h1 {
  font-family: "Playfair display", sans-serif;
  font-size: 22px;
  font-size: 1.3rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

h2, h3, h4, h5, h6 {
  clear: both;
  color: #020202;
  font-family: "Abel", sans-serif;
  line-height: 1.3;
}

8. Kode mengganti background dan font pada judul sidebar:

/* ===== FONT SIDEBAR ==== */
.widget .widget-title {
  background: #795548;
  color: #fff;
  text-align: center;
  font-family: "Cabin Sketch", sans-serif;
  font-size: 18px;
  font-size: 1.125rem;
  border: 3px double #D7CCC8;
  margin: 0 0 22px;
  margin: 0 0 1.375rem;
  padding: 3px;
  text-transform: uppercase;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: