Bantuan » Komunitas WordPress Indonesia » Komunitas Pengguna » Mengatur Warna Link
Mengatur Warna Link
-
Bagaimana ya mengatur warna huruf dari link, misalkan saya ingin mengatur/merubah warna huruf dari
the_category(',')
Thanks,
-
Hmmm.. kalo ngatur/merubah warna ya sebaiknya diatur dengan stylesheet. Misalnya jika ingin memberi warna
the_category(',')
, kita letakkan “template tag” tersebut di dalam elemen html tertentu dan diberi class.Contoh:
<span class="category-label"><?php the_category(','); ?></span>
Di contoh di atas, kita mengenakan class
category-label
kepada nama kategori sebuah tulisan. Kemudian di stylesheetnya, tambahkan entri style untukcategory-label
Contoh:
.category-label { color: #00bb00; }
Saya sudah tambahkan seperti dapat dilihat pada script berikut, tapi warnahnya masih belum berubah:
Back to <span class="lnk"><?php the_category(',') ?></span> category
di stylesheetnya saya tambahkan dengan :
.lnk { color: #FFFFFF; }
tulisan dari kategori masih berwarna default link, maunya berwarna putih.
coba diganti div,bukan class
Hmm.. CSS debugging emang rada tricky. Mesti liat keseluruhan struktur html, dan stylesheet yg saat ini diterapkan. Bukan penggalan phpnya.
Bisa disediakan? Atau coba kasi liat qt halamanya.Berikut ini penggalan yang di headernya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> ); </style> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php //comments_popup_script(); // off by default ?> <?php wp_head(); ?> </head>
Sementara ini adalah baris dari penempatan link tersebut:
<tr> <td width="22%"> <b><a href="http://www.siteku.com" target="_top"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Home</font></a></b> | <span class="lnk"><?php wp_loginout(); ?></span></td> <td width="33%"> </td> <td width="45%" align="right"><b><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Back to <span class="lnk"><?php the_category(',') ?></span> category »»</font></b> </td> </tr>
Kira-kira dimana ya masalahnya ?
Oh iya, kelupaan. Dan ini adalah isi file style.css nya:
/* Begin Typography & Colors */ .grs { border-bottom-width: 1px; border-bottom-style: solid; } .jdl { font-family: Arial, Helvetica, sans-serif; font-size: 16px; } .lnk { color: #FFFFFF; }
kenapa ngga dibuat pake css semua? yg inline css spt
font
dialihkan via css aja utk memudahkan kontrol..
diatur jg biar ngga ‘konflik’ dgndiv
atauclass
sebelumnya
lbh mudah lg jika divalidasi sekalian css-nya 😀Bisa kasih lihat ke kita halaman lengkapnya? Ditaruh di mana, gitu di web. Biar kita bisa buka pake browser trus tinggal didebug.
Ooo lokasi websitenya toh yang dimaksud. bapak bisa lihat disini nih
http://member.acepsudrazat.com
Jadi gimana pak huda, apa sudah dilihat sourcenya? yang menjadi masalah adalah link “login” dan “uncategories”. Sementara link “home” itu adalah link biasa. Rencananya klo kasus ini tidak bisa, saya akan buatkan link secara manual (bukan menggunakan fungsi WP tersebut, tetapi seperti link “Home”)
Oh iya.
Coba
.lnk { color: #FFFFFF; }
diganti dengan
.lnk a {
color: #FFFFFF;
}Karena setiap elemen anchor () punya properti warna biru, sehingga merubah properti elemen induknya.
Dan seperti yg dr daniiswara bilang, sebaiknya hindari penggunaan tag html yang memiliki unsur styling. Style dan struktur html sebaiknya dipisah :).
btw, jangan panggil saya Pak, berasa udah tua aja 😀
Ok deh, sudah bekerja dengan baik. Hm…, saya kebetulan terbiasa menggabungkan style dan struktur html pak (atau manggilnya apa nih?!?). Jadi kadang kelupaan atau males ntuk pisahkan 🙂
Tapi masukan dari rekan-rekan, terutama dari pak huda dan daniiswara sangat berharga buat saya dan saya coba nanti.
Thanks,
Sebaiknya (x)html hanya dipakai untuk pembungkus data Pak, sedangkan styling bisa dikendalikan secara penuh dari CSS :D. Karena dokumen tersebut tidak hanya dibaca manusia, tapi juga mesin. Oleh karena itu sebaiknya mempertimbangkan validitas juga.
Ya…, sepertinya metode yang pak huda katakan memang lebih baik. Semua aplikasi/template WP buatan orang saya lihat kalau di preview memang sepertinya bagus untuk dibaca oleh search engine, tetapi klo websitenya di buka enak untuk dibaca oleh manusia.
Sayang sekali saya belum paham betul mengenai konsep yang pak huda katakan, soalnya sejak lama saya terbiasa menggabungkan seperti itu. Ada buku referensi yang cocok tidak ya pak untuk saya pelajari, terutama untuk keperluan WP ini. Klo bisa sih yang berbahasa indonesia (habis inggris saya masih pas2an soalnya nih)
tetap semangat untuk menjadi yang lebih baek…gue dukung bro !
emang kadang-kadang kita sering kurang memperhatikan hal-hal kecil…kadang suka nyepelein..kurang rapi dalam nge-program lah dsb…tp yang terpenting tetap semangat untuk menjadi yang lebih baek…gue dukung bro ! salam kenal..kapan-kapan gue kunjungi situs anda..n liat hasil semedi di sini..he..he..he..ingat waktu dulu pas masih di banyuwangi kerjaanya semedi di alas purwo 😉
- Topik ‘Mengatur Warna Link’ tertutup untuk balasan baru.