My Share
Thiết kế banner trong PrestaShop
Banner website luôn là một phần quan trọng mang đến tính hiệu quả của website. Vậy phải thiết kế banner trong PrestaShop ra sao cho hiệu quả và phù hợp với giao diện PrestaShop Theme của bạn?
1. Thứ nhất bạn cần Thay đổi Style CSS cho banner trong PrestaShop
Chọn độ rộng width bằng với độ rộng của header: khoảng 980px.
2. Tối ưu kích thước banner, giảm độ sâu màu, giảm chất lượng hình ảnh đến mức thích hợp để tiết kiệm băng thông cho website.
3.1. Nếu bạn sử dụng banner flash thì bạn sử dụng swfobject thay vì nhúng trực tiếp thẻ <object>, <embed> vào file template của PrestaShop để tương thích với chuẩn valid XHTML1.0 của W3C.
Thực hiện
Chèn mã Javascript vào file /themes/your-theme/header.tpl.
Mã Javascript :
<script type="text/javascript" src="/js/swfobject.js">
</script>
<div id="logo"> <div id="flashcontent">
<script type="text/javascript"> var so = new SWFObject("/img/star.swf", "banner", "1055px", "232px", "9.0.115.0", "#cccccc"); so.addParam("quality", "high"); so.addParam("scale", "scale"); so.addParam("menu", "false"); so.addParam("salign", "lt"); so.addParam("wmode", "transparent"); so.write("flashcontent"); </script>
</div></div>
3.2. Nếu là banner ảnh thì thêm thuộc tính background-image ảnh nền cho logo của site đưa vào CSS.
Thay đổi độ rộng logo cho phù hợp.
Mở file header.tpl tìm
<h1 id="logo"></h1>
Xóa hoặc comment thẻ img
Mở File /themes/your-theme/global.css
Tìm đến dòng 188
Mã CSS:
#logo { background:transparent url(../img/banner.jpg) no-repeat center top; border-width:1px; float:left; height:232px; margin-top:0.5em; padding-left:0; width:1055px; }
#header{/* Style của bạn*/}
Download swfobject tại đây
![]() | 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:
- Tạo trang thông tin CMS trong Prestashop Back Office
- Khôi phục mật khẩu tài khoản quản trị PrestaShop
- Hướng dẫn cách thêm ngôn ngữ cho PrestaShop
- Hướng dẫn Quản trị PrestaShop
- Việt hóa PrestaShop
- Hướng dẫn viết PrestaShop Modules
- P1-NHẬP MÔN JAVASCRIPT
- BIẾN TRONG JAVASCRIPT
- XÂY DỰNG CÁC BIỂU THỨC TRONG JAVASCRIPT
- P2- Nhập môn Javascript
Print article | This entry was posted by zenzen on 10/25/2010 at 17:22, and is filed under PrestaShop. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |