Mengubah Background pada Header Website Joomla

Pembaca perhatikan header website Joomla pada gambar di atas, terdapat tulisan

Pembaca perhatikan header website Joomla pada gambar di atas, terdapat tulisan We are volunteers

We are volunteers yang tidak sesuai dengan website Joomla milik Anda danyang tidak sesuai dengan website Joomla milik Anda dan

mungkin juga mengurangi kenyamanan para pengunjung. Apabila diinginkan,

Pembaca dapat menghilangkannya dengan cara mengubah background header.

Langkah pertama yang harus dilakukan adalah mempersiapkan terlebih dahulu file

image

image .PNG.PNG berukuranberukuran(1060 x 288) px(1060 x 288) px..

Selanjutnya, Pembaca dapat mengubah file image background default dengan

mengikuti salah satu dari dua cara berikut:

mengikuti salah satu dari dua cara berikut: Cara pertama,

Cara pertama,

File image background header default (

File image background header default ( Beez_20Beez_20 ) ) tersimpan tersimpan pada pada folderfolder c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\

c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\

(pembaca dapat menyesuaikan

(pembaca dapat menyesuaikan BelajarJoomlaBelajarJoomla dengan nama folder yang sudahdengan nama folder yang sudah

dibuat), dengan nama file

dibuat), dengan nama file personal2.png personal2.png..

Pada cara pertama ini, Pembaca akan mengubah nama file background yang telah

disiapkan menjadi sama seperti nama file background default yaitu

disiapkan menjadi sama seperti nama file background default yaitu personal2.png personal2.png..

Langkah selanjutnya, tentu saja Pembaca harus meng-copy file background tsb ke

Langkah selanjutnya, tentu saja Pembaca harus meng-copy file background tsb ke c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\

c:\wamp\www\BelajarJoomla\templates\beez_20\images\personal\

untuk mengganti (

Cara kedua,

Cara pertama merupakan cara termudah yang dapat dilakukan untuk mengubah

header website Joomla. Pembaca cukup menyiapkan file background, memberi

nama file dengan

nama file dengan personal2.png personal2.png, lalu meng-, lalu meng-copycopy-nya ke folder yang sudah-nya ke folder yang sudah

ditentukan.

Tetapi bagi

Tetapi bagi Pembaca yang Pembaca yang tidak ingin tidak ingin mengubah nama mengubah nama file file dan meng-copy-nya dan meng-copy-nya keke

folder yang sudah ditentukan, dapat mencoba

folder yang sudah ditentukan, dapat mencoba cara keduacara kedua yang dijelaskan berikutyang dijelaskan berikut

ini:

1. Sama seperti cara pertama, siapkan terlebih dahulu file image untuk Sama seperti cara pertama, siapkan terlebih dahulu file image untuk

background header. File image bisa dalam format file image lainnya seperti

.JPG, tidak harus dalam fomat .PNG.

2. Login ke dalamLogin ke dalam backend Joomlabackend Joomla (halaman Administrator),(halaman Administrator),

3. Klik menuKlik menu [Content|Media Manager][Content|Media Manager] untuk masuk ke halamanuntuk masuk ke halaman MediaMedia

Manager

Manager..

4. Pada halamanPada halaman Media ManagerMedia Manager, klik tombol, klik tombol Choose FileChoose File, browse dan pilih, browse dan pilih

file background, lalu klik

file background, lalu klik Start UploadStart Upload. Sampai langkah ini, Pembaca sudah. Sampai langkah ini, Pembaca sudah

meng-upload file background ke website Joomla. Ikuti langkah selanjutnya.

S E R I A L E B O O K J O O M L A S E R I A L E B O O K J O O M L A M E M B U A T W E B S I T E J O O M L A 2 . 5 D I M E M B U A T W E B S I T E J O O M L A 2 . 5 D I P C / L A P T O PP C / L A P T O P 49 49 5.

5. Lanjutkan dengan klik menuLanjutkan dengan klik menu [Extensions|Template Manager][Extensions|Template Manager] untuk untuk

masuk ke halaman

masuk ke halaman Template Template Manager: Manager: StylesStyles kemudian klik link kemudian klik link Beez_20Beez_20

di kolom

di kolom Templates Templates (lihat gambar pada pembahasan mengenai(lihat gambar pada pembahasan mengenai MengubahMengubah

Logo dan Site Description pada Header Website Joomla

Logo dan Site Description pada Header Website Joomla, , didi Notes-11Notes-11

ini). Pembaca akan masuk ke halaman

ini). Pembaca akan masuk ke halaman Template Template Manager: Manager: CustomiseCustomise

Template

Template, lalu klik pada link , lalu klik pada link Edit css/personal.cssEdit css/personal.css,,

6. Selanjutnya pada halamanSelanjutnya pada halaman Template Template Manager: Manager: Edit Edit FileFile, cari dan temukan, cari dan temukan baris code

baris code di bawah ini:di bawah ini:

background

background:: #0c1a3e#0c1a3e URL(URL(../../imagesimages//personalpersonal//personal2personal2..pngpng

) no-repeat bottom right

) no-repeat bottom right ;;

lalu ubah

lalu ubah code code URL(../images/personal/personal2.png)URL(../images/personal/personal2.png) dengandengan code code URL(http://localhost/belajarjoomla/images/back-header.png)

URL(http://localhost/belajarjoomla/images/back-header.png)

sehingga baris

sehingga baris code code seutuhnya menjadi seperti di bawah ini:seutuhnya menjadi seperti di bawah ini:

background

background:: #0c1a3e#0c1a3e URL(http:URL(http:////localhostlocalhost//belajarjoomlabelajarjoomla//

/imagesimages//back-headerback-header..png) no-repeat bottom rightpng) no-repeat bottom right ;;

Perhatikan, /

Perhatikan, /belajarjoomlabelajarjoomla/ dan/ dan back-header.pngback-header.png pada baris code di ataspada baris code di atas

dapat Pembaca sesuaikan dengan nama folder website joomla dan nama file

background yang sudah disiapkan mengikuti langkah-langkah membuat

website Joomla sampai sejauh ini.

7. Terakhir, seperti Terakhir, seperti biasanya, akhiri biasanya, akhiri dengan klik dengan klik Save & CloseSave & Close. Silahkan preview,. Silahkan preview,

website Joomla sekarang sudah tampil dengan header yang baru.

S E R I A L E B O O K J O O M L A S E R I A L E B O O K J O O M L A M E M B U A T W E B S I T E J O O M L A 2 . 5 D I M E M B U A T W E B S I T E J O O M L A 2 . 5 D I P C / L A P T O PP C / L A P T O P 51 51

Dalam dokumen Ebook Joomla Vol 2 (Halaman 52-56)