clip_image002

Hướng dẫn từng bước Thiết kế giao diện PrestaShop Theme. Yêu cầu kiến thức căn bản về ngôn ngữ HTML, CSS và Photoshop.

Designing PrestaShop Themes

Nội dung chính

  • 1. Copy giao diện mặc định
  • 2. Chỉnh sửa CSS
    • Mẹo
  • 3. Tạo preview screen shot
  • 4. Test theme
  • Chia sẻ themes!

clip_image002[1]

Tip: Sử dụng Firefox plugin Firebug để so sánh, kiểm tra và bắt lỗi CSS, Javascript.

Theo các bước sau để tạo giao diện mới cho PrestaShop.

1. Copy theme mặc định

  1. Copy thư mục ../themes/prestashop/
  2. Đổi tên thư mục theme vừa copy.

clip_image003

2. Chỉnh sửa CSS

  1. Mở file global.css và sửa theo hướng thiết kế của bạn.
    Chú ý: file maintenance.css đặt cùng thư mục với global.css quy định layout của site ở trạng thái bảo trì.
  2. Thiết kế hoặc thay đổi hình ảnh trong thư mục ảnh của theme /img (vd., ../themes/MyStoreTheme/img).

Mẹo từ PrestaShop development team

  • Sử dụng CSS thay cho các thuộc tính của các thẻ HTML (vd., tabless)
  • Validate mã XHTML theo chuẩn của w3c
  • Giảm kích thước ảnh bằng công cụ nén ảnh
  • Test theme trên nhiều trình duyệt web
  • Đặt tên file bằng các ký tự in thường
  • Ký tự và logo trang chủ có thể thay đổi trong trang quản trị Back Office.

Back Office >> Modules >> Home text editor >> Configure.

  • Thay đổi vị trí của các modules như sau:
    1. Back Office >> Modules >> Positions
    2. Click Transplant a module.
    3. Từ drop-down list, chọn module cần di chuyển.
    4. Chọn vị trí mới cho module này.
    5. Nhập các tên file không xuất hiện.
    6. Click Save.

3. Tạo preview screen shot

Chụp lại ảnh màn hình giao diện của bạn và đặt tên file preview.jpg. Sau đó upload lên thư mục theme của bạn (vd., ../themes/MyStoreTheme).

Kích thước file 100 × 100 pixels .jpg.

4. Test theme

  1. Back Office >> Preferences >> Appearance >> Themes section
  2. Chọn giao diện mới và click Save.
  3. Test trên các trình duyệt khác nhau: Mozilla Firefox, Internet Explorer, Opera, Chrome,…

clip_image004

VN:F [1.9.20_1166]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.20_1166]
Rating: 0 (from 0 votes)
Bài viết này có ích hãy chia sẻ cho bạn bè:
Bài viết được cám ơn 0 lần. Bấm đây để Cám ơn ?

Bài khác

Các bài liên quan:

  1. Thiết kế banner trong PrestaShop
  2. Việt hóa PrestaShop
  3. Khôi phục mật khẩu tài khoản quản trị PrestaShop
  4. Hướng dẫn Quản trị PrestaShop
  5. Hướng dẫn viết PrestaShop Modules
  6. Hướng dẫn cách thêm ngôn ngữ cho PrestaShop
  7. Cấu hình Aliases cho từ khóa tìm kiếm trong Prestashop
  8. Tạo trang thông tin CMS trong Prestashop Back Office