• Tìm hiểu về PES 2012 - Khám phá giao diện (Phần 1)
• Tối ưu máy tìm kiếm SEO với PrestaShop Module - Canonical URL hoặc MetaCanonical
• Thay đổi module sản phẩm mới blocknewproducts trong PrestaShop
• Áp dụng loại tiền với PrestaShop Module - Force Currency
• Thêm thông tin vào danh mục sản phẩm trong PrestaShop với IceCat module

• 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!

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.

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,...

Chia sẻ themes!

Bạn có thể chia sẻ thành quả của mình tại Forum PrestaShop. Hoặc email cho Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. để chúng tôi kiểm tra giúp bạn.

Cao Thế Toàn

Ghi rõ nguồn www.Kenh360.com nếu bạn phát hành lại thông tin bài viết này.

• 24/07/2011 00:00 - Tìm hiểu về PES 2012 - Khám phá giao diện (Phần 1)
• 25/04/2009 22:01 - Tối ưu máy tìm kiếm SEO với PrestaShop Module - Canonical URL hoặc MetaCanonical
• 25/04/2009 08:14 - Thay đổi module sản phẩm mới blocknewproducts trong PrestaShop
• 25/04/2009 08:03 - Áp dụng loại tiền với PrestaShop Module - Force Currency
• 25/04/2009 07:38 - Thêm thông tin vào danh mục sản phẩm trong PrestaShop với IceCat module

• 14/04/2012 10:41 - Bộ sưu tập free PrestaShop Themes phần 3
• 13/04/2012 16:54 - Bộ sưu tập theme Prestashop miễn phí phần 2
• 13/04/2012 16:49 - Top 10 Free PrestaShop Themes
• 27/05/2009 10:15 - Bộ sưu tập Giao diện Premium PrestaShop Themes chuyên nghiệp
• 21/04/2009 22:14 - Thiết kế banner trong PrestaShop

• 26/03/2009 22:22 - Giao diện Prestashop Iris - Free Prestashop theme
• 16/02/2009 15:43 - Bộ sưu tập Prestashop theme phần 1
• 15/01/2009 11:20 - Giải đáp một số vấn đề về giao diện Prestashop