Language Selector

Iming-iming Joomla! bahwa jika Anda ingin merubah tampilan website Joomla! cukup dengan merubah CSSnya saja terbukti benar. Ga, kita ga ngomongin masalah tampilan Joomla! secara keseluruhan, tapi tampilan Joomla! khusus pada language selector yang muncul secara otomatis ketika Anda meng-install Joom!Fish.

Mungkin beberapa diantara temen-temen ada yang ga tau apa itu Joomla! apalagi Joom!Fish. Joomla! tuh salah satu CMS yang cukup menarik klo bagi sa pribadi dengan dukungan dari berbagai sudut internet *halah didramatisir*. Oya, CMS sendiri pengertiannya apa? Pengertian yang paling sa suka *karena lebih lengkap pengertiannya* sa dapet dari sini. Nah, sedangkan Joom!Fish, merupakan komponen *atau mungkin bisa disebut plugin?* untuk multilangual Joomla!. Kerennya Joom!Fish ini bisa menterjemahkan menunya juga. Beda sama Joslang yang cuma bisa nerjemahin artikel atau konten saja. Dan memang memilih konten ini harus disesuaikan dengan kebutuhan. Joslang akan sangat berguna jika memang Anda hanya membutuhkan “translator” konten aja.

Oke, sekarang kita masuk ke inti acara *halah* mengenai tampilan language selector Joom!fish. Ketika akhirnya tersisa satu tantangan lagi mengenai language selector yang tidak terlihat di browser mozilla, tapi nampak di opera dan IE, maka tantangan itu harus dipecahkan karena user atau guest belum tentu mempergunakan browser yang sama seperti yang kita pakai untuk uji coba.

Kemudian karena kuncinya memang di CSS, daripada edit lokal trus upload berulang kali, kan cape. Mending langsung aja edit di server hostingnya langsung. Atau kalo memang masih gamang sama hasilnya, uji coba kodingnya di lokal dengan mempergunakan templet yang sama, yakni situs online di offline kita alias di lokal yang dulu kita pake juga untuk uji coba situs bersangkutan di lokal. Refreshnya gampang, dan kalopun ga ada perubahan atau yang berubah bukan seperti yang kita inginkan, Anda tinggal masuk lagi ke dreamweaver atau HTML editor, hapus, ubah. Jika anda tipikal orang yang pelupa, maka selalu tambahkan comment pada setiap kode yang anda tambahkan. Hal ini akan sangat bermanfaat ketika suatu saat nanti kita akan merubah atau membuka kembali kode kita. Setelah perubahan pada site lokal sesuai keinginan atau harapan kita, baru deh masukin kode yang kita tambahin untuk perubahan situs asli ke situs asli.

Terus, selain cara ini lebih aman, juga lebih efektif. Jika kita merubah langsung di control panel, agak ribet juga karena begitu kita “Save Changes”, kita harus berulang kali mengklik link editnya.

Ternyata kunci supaya language selectornya tampil bagus di mozilla *meski belum maksimal*, kuncinya ada di CSS joomfishnya itu sendiri.

#jflanguageselection{

float: right;

vertical-align: middle;

}
/* language lists with UL (names & images) */

#jflanguageselection ul.jflanguageselection

{

list-style: none;

padding: 0;

margin: 0;

font-weight: normal;

}

#jflanguageselection ul.jflanguageselection li

{

background-image: none;

padding-left: 0px;

padding-right: 0px;

float: left;

margin: 1px 1px 1px 1px;

white-space: nowrap;

border: none;

font-size: 0.9em;

}

#jflanguageselection ul.jflanguageselection li#active_language

{

font-size: 11px;

font-weight: bold;

}

#jflanguageselection ul.jflanguageselection li a

{

display: block;

}

#jflanguageselection ul.jflanguageselection img

{

border: none;

}

/** Styles for the drop down list */

#jflanguageselection select.jflanguageselection

{

border: 1px solid #cccccc;

margin: 1px 1px 1px 1px;

padding: 0px 0px 1px 0px;

font-family: arial, helvetica, sans-serif;

font-size: 11px;

color: #c64934;

}

#jflanguageselection label.jflanguageselection

{

position:absolute;

left:-1000px;

}

/** Controls Raw Display of Images **/

.rawimages {

text-align: center;

}

.rawimages img {

border: none;

margin:2px;

}

.rawimages span#active_language img

{

margin:2px;

border: none;

}

/** End Raw display of images **/

div#jflanguageselection img.langImg{ float: left; border: none; margin-top: 3px; }

div#jflanguageselection li img.langImg{ float: left; border: none; margin: 1px 3px 0px 0px; }

#jflanguageselection
{
float: none;
vertical-align: text-top;
}

/*div.jflanguageselection
{
float: none;
vertical-align: text-top;
padding: 3px 2px 2px 2px;
}
*/
/* language lists with UL (names & images) */
#jflanguageselection ul.jflanguageselection
{
list-style: none;
padding: 0;
margin: 0;
font-weight: normal;
}

#jflanguageselection ul.jflanguageselection li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: none;
margin: 1px 1px 1px 1px;
white-space: nowrap;
border: none;
font-size: 0.9em;
}

#jflanguageselection ul.jflanguageselection li#active_language
{
font-size: 11px;
font-weight: bold;
}

#jflanguageselection ul.jflanguageselection li a
{
display: block;
}

#jflanguageselection ul.jflanguageselection img
{
border: none;
}

/** Styles for the drop down list */

#jflanguageselection select.jflanguageselection
{
border: 1px solid #cccccc;
margin: 1px 1px 1px 1px;
padding: 0px 0px 1px 0px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #006633/*#c64934*/;
}

#jflanguageselection label.jflanguageselection
{
/*position:absolute;
left:-1000px;*/
}

/** Controls Raw Display of Images **/

.rawimages {
text-align: center;
}
.rawimages img {
border: none;
margin: 2px;
}
.rawimages span#active_language img
{
margin: 2px;
border: none;
}
/** End Raw display of images **/

div#jflanguageselection img.langImg{ float: left; border: none; margin-top: 3px; }
div#jflanguageselection li img.langImg{ float: left; border: none; margin: 1px 3px 0px 0px; }

Nah itulah kurang lebih kode dari jflanguageselector.php. yang kiri adalah aslinya, dan yang kanan adalah yang sudah dirubah.

Hasilnya..hmm, gimana ya takut ngelanggar perjanjian, tapi silahkan perhatikan gambar-gambar berikut,

yang kiri adalah sebelum CSS diubah, sedangkan yang kanan setelah CSS dirubah. Pada gambar, sebenarnya ada tanda panah untuk gambar sebelah kiri yang menunjukkan si language selector..itu loh yang ada tulisan indonesia nya, untuk milih situs mo pake bahasa apa. Dan hitam di tengah hijau itu adalah untuk menyamarkan nama situsnya :mrgreen:

Dan sejujurnya, sa lebih suka klo language selector itu ilangin aja..pake link biasa aja, lebih nyeni getoh!?

Iklan

Berikan Komentar

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s