Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Membuat Theme Magento: Memberikan Style pada Home Page

by
Length:ShortLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 3
Magento Theme Development: Category Page, Part 1

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Saya tahu tiga artikel sebelumnya mungkin berisi terlalu banyak informasi, dan anda mungkin mengalami kesulitan mengikuti beberapa langkahnya. Tapi kabar baiknya adalah bahwa kita sudah selesai dengan bagian yang sulit sekarang, dan sisa rangkaian pengembangan theme ini akan terlihat relatif mudah dibandingkan dengan artikel sebelumnya, karena kebanyakan kita akan mengulangi teknik yang sama berulang-ulang, yang mana telah kita pelajari di artikel tersebut.

Sejauh ini kita telah menyelesaikan layout dari home page, dan dalam artikel terakhir tentang home page ini, kita akan memperbaiki beberapa masalah styling. Jika anda telah mengikuti semua langkah dari artikel sebelumnya, anda seharusnya sudah memiliki home page yang terlihat seperti ini:

Before Styling Homepage

Meskipun memiliki semua komponen yang dibutuhkan di tempat yang tepat, beberapa style tidak aktif. Untuk mulai memperbaiki style ini, kita akan mulai dari bagian atas halaman dan memperbaiki style pada header terlebih dahulu. Jika anda melihat dengan saksama saat ini, anda akan menemukan beberapa kekurangan.

Pertama-tama, icon pada pojok kiri atas memiliki beberapa masalah padding, logo tidak lurus pada bagian tengah seperti pada HTML, dan menu bar memerlukan beberapa style lebih lanjut. Hal lain, yang bukan merupakan sebuah masalah syle tapi sangat dibutuhkan, adalah welcome text (teks selamat datang) di pojok kiri atas.

Header Before CSS

Karena memperbaiki welcome text adalah yang paling mudah, pertama-tama kita akan menangani ini dulu. Untuk mengatasinya, kita akan mengedit welcome text dari System > Configuration > General > Design > Header, dan kita akan mengubah text Call Us Now seperti yang diperlihatkan pada HTML kita.

Changing Welcome Text

Selanjutnya kita akan melihat Chrome Inspector untuk memeriksa style dari komponen yang berbeda satu per satu, dan mulai mengeditnya.

Using Chrome Inspector

Kita akan mulai dengan mengedit icon bagian kanan atas, dan merata tengahkan logo. Untuk itu, buatlah file CSS baru, styles.css, link-kan dari file header.phtml, dan mulailah menambahkan baris kode ini di dalamnya:

Ini akan memperbaiki masalah padding pada icon dan merata tengahkan logo. Selanjutnya kita perlu meng-customize navigation bar dan search box. Seperti yang dapat anda lihat, seperti inilah search bar kita seharusnya terlihat:

Header After CSS

Tapi untuk saat ini terlihat seperti berikut:

Navbar

Untuk memperbaiki search box dan navigation bar, kita akan menambahkan baris style ini ke dalam file CSS kita yang baru dibuat.

Semoga, bila anda menambahkan style ini, search box dan navigation bar anda akan terlihat bagus sekarang:

Afer CSS Menubar

Meskipun home page slider terlihat baik-baik saja, tapi jika kita melihat lebih dekat, ada satu kekurangan kecil di slide ini:

Slider Before CSS

Teksnya terlalu jauh ke kiri home page kita; Seharusnya terlihat seperti ini:

Slider After CSS

Untuk menempatkan teks di tempat yang tepat, kita akan menambahkan baris kode ini ke dalam file CSS kita:

Selanjutnya menuju ke latest product carousel. Semuanya terlihat bagus di sini, kecuali warna dari price-nya, yang seharusnya hitam.

Main Content Before CSS

Untuk memperbaikinya, kita akan menambahkan baris ini ke file CSS.

Sekarang seharusnya masalah selesai diatasi dan kita seharusnya sudah memiliki products carousel baru yang nyaman dipandang. Seperti ini:

Slider after CSS

Footer memiliki beberapa masalah styling juga, terutama subscription box dan bagian link.

Footer Before CSS

Kita akan menggunakan style berikut untuk memperbaiki masalah ini:

Sekarang seharusnya terlihat seperti ini:

Footer After CSS

Ini adalah semua perbaikan style yang kita butuhkan untuk membuat home page kita terlihat sedekat mungkin dengan desain HTML yang seharusnya. Jika anda telah mengikuti semua langkah ini, home page akan terlihat seperti ini:

Homepage After CSS

Jika anda telah berhasil mengikuti semua langkah ini, dan semoga home page anda terlihat seperti screenshot di atas, maka selamat, anda telah membuat kemajuan yang signifikan dalam menyesuaikan theme Magento anda yang pertama.

Meng-customize first page adalah tugas yang paling menakutkan dalam membuat theme baru, seperti pada semua halaman lainnya sebagian besar komponen seperti header, footer, menubar, dll, akan digunakan, dan kita hanya akan mengubah style pada bagian content. Oleh karena itu lebih mudah untuk mengubah page atau halaman lain setelah anda menyelesaikan styling pada home page.

Saat styling home page, kita telah menggunakan hampir semua teknik yang akan kita gunakan untuk menyesuaikan theme lainnya. Semua teknik ini seperti menggunakan Chrome Inspector, menentukan file phtml yang bertanggung jawab atas layout pada bagian halaman tertentu, memodifikasi CSS, PHP, HTML dan XML dalam file yang relevan, membuat  new page dan static block, dan mendaftarkan static block tersebut melalui XML, seharusnya pelajarannya cukup berharga buat anda.

Selanjutnya dalam theme kita, kita akan mulai memodifikasi category listing page. Karena kita telah menyelesaikan bagian header, footer dan navbar, kita hanya perlu menyesuaikan bagian product listing (daftar produk) dan bagian sidebar. Kita akan menyesuaikan keduanya dalam dua artikel terpisah.

Sebelum anda memulai membuat perubahan pada category page (halaman kategori), saya akan sangat menyarankan anda untuk memeriksa kode pada category page di desain HTML kita, dan juga dengan mengaktifkan template hints, periksa file apa yang bertanggung jawab atas layout rendering dari category page di Magento. Cobalah untuk memodifikasi template category page itu sendiri, dengan mencocokkannya dengan halaman HTML. Jangan lupa untuk menyalin file-file itu terlebih dahulu ke dalam theme baru kita, dan lakukan backup, karena kita tidak ingin mengacaukan file theme dari RWD theme yang sebenarnya.

Untuk sementara, saya akan meninggalkan anda dengan tugas ini. Setelah anda siap, mulailah pengeditan category page dengan mengikuti tutorial berikutnya.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.