Cách tạo khung trang trí cho sản phẩm của Virtuemart

Thảo luận các vấn đề vể cài đặt và sử dụng Joomla! và các Extension của Joomla!
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: viewtopic.php?f=2&t=318247

Cách tạo khung trang trí cho sản phẩm của Virtuemart

Gửi bàigửi bởi TruongLe » 04/07/2011 - 12:38

Thí dụ khi dùng Mod Latest Products để hiển thị các sản phẩm mới trên trang chủ (Home), cách hiển thị thế nào thì các bạn tìm xem trên Trang web hoặc Diễn đàn BuaXua.vn... ở đây chỉ nói đến việc trang trí màu mè mà thôi.

- Vào mod_virtuemart_latestprod
- Nhập -xyz (hoặc bất cứ chữ gì bạn muốn) vào mục Module Class Suffix
- Save.

Trong tập tin template.css của Template tạo thêm các dòng CSS vào dưới cuối:
Mã: Chọn tất cả
/* định dạng cho toàn bộ Module */
table.moduletable-xyz, div.moduletable-xyz  {
    width: 100%;                               
}

/* định dạng khoảng cách trên và dưới cho các thành phần bên trong Module */
table.moduletable-xyz div, div.moduletable-xyz div {
    margin: 5px 0;;                               
}

/* định dạng màu nền, viền cho các ô (cell) trong Module (đây chính là các ô sản phẩm trong VM) */
table.moduletable-xyz td, div.moduletable-xyz td  {
    padding: 2px;
    border: 1px solid #fff;
    text-align: center;
    vertical-align: top;
    background: #eee;
}

/* định dạng màu nền, viền cho hình ảnh trong mỗi ô (cell)  */
table.moduletable-xyz td img, div.moduletable-xyz td img  {
    background: #000;
    padding: 1px;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
}


Lưu ý:

* -xyz phải giống như khai báo trong phần Module Class Suffix. Vì không biết Template của các bạn dùng Table hay DIV nên chơi 2 cái luôn (table.moduletable và div.moduletable), có thể bỏ bớt 1 cái nếu muốn.

* Đây là căn bản, có thể áp dụng cho nhiều Module khác nữa.

* Nếu làm y như vậy thì được giống như hình dưới này, nhớ để thêm © buaxua.vn :)
virtuemart_latest_products.png
* Hãy sử dụng công cụ tìm kiếm của Diễn đàn trước khi đặt câu hỏi.
* Hãy đặt tên cho Chủ đề diễn tả đúng với nội dung để thuận tiện khi tìm kiếm.
* Hãy chia sẻ kiến thức của bạn vì không chỉ giúp được mọi người mà còn giúp mình ghi nhớ những điều đã biết!
Hình đại diện của thành viên
TruongLe
Thành viên
Thành viên
 
Bài viết: 1684
Ngày tham gia: 14/09/2010 - 20:20

Re: Cách tạo khung trang trí cho sản phẩm của Virtuemart

Gửi bàigửi bởi upshoppro » 15/07/2011 - 13:46

Cám ơn bạn,tuy nhiên mình có vài lỗi sau:
-mod_virtuemart_featureprod ,mod_virtuemart_latestprod :hiển thị
-mod_product_categories ,mod_virtuemart_manufacturers :kg hiển thị
Mong các bạn giúp.
Hình đại diện của thành viên
upshoppro
Thành viên
Thành viên
 
Bài viết: 16
Ngày tham gia: 12/07/2011 - 23:14

Re: Cách tạo khung trang trí cho sản phẩm của Virtuemart

Gửi bàigửi bởi TruongLe » 15/07/2011 - 22:10

Đây chỉ là cách đơn giản, do một số layout của VM sẽ khác nhau nên có thể không áp dụng được... thông thường nếu muốn VM có layout đẹp thì phải can thiệp vào code mà việc này thì không đơn giản tí nào...

:)
* Hãy sử dụng công cụ tìm kiếm của Diễn đàn trước khi đặt câu hỏi.
* Hãy đặt tên cho Chủ đề diễn tả đúng với nội dung để thuận tiện khi tìm kiếm.
* Hãy chia sẻ kiến thức của bạn vì không chỉ giúp được mọi người mà còn giúp mình ghi nhớ những điều đã biết!
Hình đại diện của thành viên
TruongLe
Thành viên
Thành viên
 
Bài viết: 1684
Ngày tham gia: 14/09/2010 - 20:20

Re: Cách tạo khung trang trí cho sản phẩm của Virtuemart

Gửi bàigửi bởi duchaidlu » 06/10/2011 - 13:35

TruongLe đã viết:Thí dụ khi dùng Mod Latest Products để hiển thị các sản phẩm mới trên trang chủ (Home), cách hiển thị thế nào thì các bạn tìm xem trên Trang web hoặc Diễn đàn BuaXua.vn... ở đây chỉ nói đến việc trang trí màu mè mà thôi.

- Vào mod_virtuemart_latestprod
- Nhập -xyz (hoặc bất cứ chữ gì bạn muốn) vào mục Module Class Suffix
- Save.

Trong tập tin template.css của Template tạo thêm các dòng CSS vào dưới cuối:
Mã: Chọn tất cả
/* định dạng cho toàn bộ Module */
table.moduletable-xyz, div.moduletable-xyz  {
    width: 100%;                               
}

/* định dạng khoảng cách trên và dưới cho các thành phần bên trong Module */
table.moduletable-xyz div, div.moduletable-xyz div {
    margin: 5px 0;;                               
}

/* định dạng màu nền, viền cho các ô (cell) trong Module (đây chính là các ô sản phẩm trong VM) */
table.moduletable-xyz td, div.moduletable-xyz td  {
    padding: 2px;
    border: 1px solid #fff;
    text-align: center;
    vertical-align: top;
    background: #eee;
}

/* định dạng màu nền, viền cho hình ảnh trong mỗi ô (cell)  */
table.moduletable-xyz td img, div.moduletable-xyz td img  {
    background: #000;
    padding: 1px;
    border-right: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
}


Lưu ý:

* -xyz phải giống như khai báo trong phần Module Class Suffix. Vì không biết Template của các bạn dùng Table hay DIV nên chơi 2 cái luôn (table.moduletable và div.moduletable), có thể bỏ bớt 1 cái nếu muốn.

* Đây là căn bản, có thể áp dụng cho nhiều Module khác nữa.

* Nếu làm y như vậy thì được giống như hình dưới này, nhớ để thêm © buaxua.vn :)
virtuemart_latest_products.png

Hướng dẫn hay quá, đang cần mà làm theo ko được.
Mình xài temp artisteer
Mong được hướng dẫn cụ thể cho loại temp này
duchaidlu
Thành viên mới
Thành viên mới
 
Bài viết: 1
Ngày tham gia: 06/10/2011 - 13:23

Re: Cách tạo khung trang trí cho sản phẩm của Virtuemart

Gửi bàigửi bởi TruongLe » 06/10/2011 - 15:30

Bạn xem kỹ lại, trước tiên hãy thực hiện theo đúng như hướng dẫn, sau khi làm được rồi mới thay đổi tùy ý để tránh trường hợp gặp lỗi mà không biết do đâu.

:)
* Hãy sử dụng công cụ tìm kiếm của Diễn đàn trước khi đặt câu hỏi.
* Hãy đặt tên cho Chủ đề diễn tả đúng với nội dung để thuận tiện khi tìm kiếm.
* Hãy chia sẻ kiến thức của bạn vì không chỉ giúp được mọi người mà còn giúp mình ghi nhớ những điều đã biết!
Hình đại diện của thành viên
TruongLe
Thành viên
Thành viên
 
Bài viết: 1684
Ngày tham gia: 14/09/2010 - 20:20

Trang kế tiếp

  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về Joomla!

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào đang trực tuyến4 khách

Dịch vụ hỗ trợ thiết kế Web của BuaXua.vn Dịch vụ hỗ trợ thiết kế trang Web và hướng dẫn sử dụng Joomla!
Quảng cáo trên trang Web BuaXua.VN