Catatan Penting, Penambahan Beberapa Custom CSS untuk Theme WordPress Fasthink

 

SALIRA NEWS | TASIKMALAYA – Theme WordPress Fasthink merupakan Theme Berbayar yang sudah tidak diragukan lagi kecantikannya dan kehebatannya di Mata beberapa Search Engine seperti Google, Yahoo dan atau Bing. Cepat, Responsive dan juga Blog menjadi mudah terindex Google.

Blog Berita SALIRA NEWS ini pun menggunakan Theme WordPress Fasthink loh, yang kami beli dari pembuatnya / Developer nya di kentooz.com

Dan ya, Theme WordPress Fasthink adalah Theme WordPress Berbayar (bukan Theme WordPress Gratis), dulu kami membelinya seharga $ 10 USD. Teman-teman tinggal kali kan saja dengan Nilai Kurs Rupiah terhadap Dollar Amerika pada saat beli theme tersebut. Pembayarannya bisa melalui Paypal atau Transfer Bank Lokal Indonesia. Soal kurs yang berlaku, tinggal cek di link ini http://www.kentooz.com/kurs-rupiah-mandiri-dan-bca/

Tetapi, dalam perjalanannya, memang ada beberapa tampilan yang (kebetulan) tidak sama dengan keinginan kami, maka kami pun menghubungi Om Pembuat theme tersebut untuk mendiskusikan bagaimana baik nya agar tampilan theme menjadi sama dengan keinginan kami.

Jadi ada beberapa tampilan yang kita rubah (terkait theme tersebut) dan Alhamdulillah So Far sukses teratasi dengan hasil sangat memuaskan karena di bantu di edit oleh Om pembuat nya.

Beberapa tampilan yang kami rubah tersebut adalah:

1. Kami menginginkan agar Besar Font (tulisan) RSS External (RSS External itu, kita ambil link RSS blog lain) menjadi sama besarnya dengan tulisan lain di Widget kanan Blog

Awalnya besar huruf hasil RSS External itu lebih kecil daripada besar huruf lainnya di sidebar kanan,

Lalu kami menginginkan agar besar huruf judul artikel hasil RSS External menjadi sama dengan besar huruf-huruf lain di sidebar kanan itu.

Alhamdulillah, hal tersebut bisa diatasi dengan penambahan beberapa baris CSS berikut ini:

.widget_rss li .rsswidget{display:block;font-weight:500 !Important;font-size:14px !Important;}

Code css di atas di taruh di https://news.salira.co.id/wp-admin/customize.php bagian (bagian Additional CSS) – Semoga tidak bingung.

 

2. Ketika tampilan judul artikel blog dengan judul iklan, ingin sama (menjadi cetak tebal begitu deh, awalnya tidak cetak tebal untuk judulnya, sedangkan judul iklan adsense adalah cetak tebal, ya terpaksa ikut mau nya adsense, ikutan di tebalkan judul postingannya)

teratasi dengan penambahan css ini:

h2 {font-weight: 700 !important;}

3. Saat kami ingin agar tampilan video youtube yang disisipkan di postingan menjadi responsive di semua device penerimaAwalnya tidak responsive. Tapi setelah ditambah kode berikut di CSS nya – jadi responsive

ini kode nya

.video_outer_wrap {
width: 100%;
max-width: 560px;
margin: 15px auto;
}
.video_wrap {
position: relative;
padding-bottom: 56%;
padding-top: 0px;
height: 0;
background-color: #000 !important;
}
.video_wrap iframe,
.video_wrap object,
.video_wrap embed {
position:absolute;
top:0;
width:100%;
height:100%;
}

Tapi harus menyisipkan baris kode berikut pada saat buat artikelnya:

<div class="video_outer_wrap">
<div class="video_wrap bottomshadows">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxx" frameborder="0" allowfullscreen></iframe> </div>
</div>

Ganti “xxxxxx” dengan kode unik video youtube tujuan.

Tapi untuk yang request nomor tiga ini, kami dapat solusinya dari suatu artikel ini http://www.infotrens.com/2017/06/cara-membuat-embed-video-youtube-menjadi-responsive-di-blog.html – Jadi bukan dari Om pembuat theme nya.

4. Merubah Jumlah Related post dari 3 menjadi 9

Done itu, tapi tidak bisa 9, karena tampilan nya jadi acak-acakan. Bisa nya 6 artikel. maka jadilah related post nya 6 artikel.

Yang di rubah itu di file style.CSS nya langsung itu, kalau tak salah yang ada kode berikut:

[2/2 11:02] Kentooz.com Gi: $counter = 1;
[2/2 11:02] Kentooz.com Gi: sebelum kode
[2/2 11:02] Kentooz.com Gi: while ( $ktz_query->have_posts() ) : $ktz_query->the_post();
[2/2 11:02] Kentooz.com Gi: lalu
[2/2 11:03] Kentooz.com Gi: taruh kode
[2/2 11:03] Kentooz.com Gi: if( $counter === 3 ) { ?>
<div class="clearfix"></div>
<?php }
$counter++;
[2/2 11:03] Kentooz.com Gi: sebelum kode
[2/2 11:03] Kentooz.com Gi: endwhile;

lanjut ada kode ini:

//count dari 0
if( $ktz_query->current_post == 2 ) :
echo '<div class="clearfix"></div>';
endif;

POKOK nya ribet untuk yang nomor 4 ini. sampai-sampai Om nya sendiri yang edit file style.css nya terima jadi saya. Langsung di handle Om nya login ke dashboard wp kita itu (karena di arahkan jarak jauh rubah sendiri, mentok tak bisa-bisa kita nya).

5. Kami ingin agar tampilan image / foto dalam postingan jadi responsive (selama ini kita cek belum responsive). Jadi kami senang nya foto itu nge-pas sejajar dengan maksimal lebar bidang postingan (aduh bagaimana menerangkannya ya?)

Tapi yang Nomor Lima ini belum dapat titik terang. nanti kami update perkembangannya (masing nunggu solusi dari Om pembuat theme, siapa tahu ada solusi sebagaimana diharap. amin.

Update untuk hasil pengecekan berbagai pihak untuk nomor 5 ini adalah menggembirakan, bahwasannya tampilannya lumayan full width (untuk foto artikel) di semua perangkat.

Cek di http://responsivedesignchecker.comInformasi SS dari pihak Hosting yaitu Jagoan Hosting, dimana mereka menggunakan resolusi layar PC yang tinggiJadi secara keseluruhan, maka tambahan kode di CSS itu adalah ini:

.video_outer_wrap {
width: 100%;
max-width: 560px;
margin: 15px auto;
}
.video_wrap {
position: relative;
padding-bottom: 56%;
padding-top: 0px;
height: 0;
background-color: #000 !important;
}
.video_wrap iframe,
.video_wrap object,
.video_wrap embed {
position:absolute;
top:0;
width:100%;
height:100%;
}
.widget_rss li .rsswidget{display:block;font-weight:500 !Important;font-size:14px !Important;}
h2 {font-weight: 700 !important;}

Oke, bisa saja nanti ada penambahan jika dirasa perlu untuk di rehab tampilan theme nya.

Semoga Om pembuat Theme nggak bosen nanggepin kemauan nya salira.co.id – yang banyak mau nya.

Semoga kentooz.com tambah laris manis jualan Theme-theme WP Hebat nya. Amin. (SN – PP)

Tags: #Catatan #Custom CSS #Fasthink #Penting #Theme #Wordpress