Cách 1: 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 JoomlaViet.. ở đâ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: HTML: /* đị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. Cách 2: Tìm file: productsnapshot.tpl.php Mã: components\com_virtuemart\themes\ja-mesolite\templates\common rồi thay bằng đoạn code sau : PHP: <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?><div id="feature_products"> <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>"> <?php // Print the product image or the "no image available" image echo ps_product::image_tag( $product_thumb_image, "alt=\"".$product_name."\""); ?> </a> <div class="products_name"> <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>"> <?php echo $product_name ?> </a> </div> <br /> <b>Price: </b> <?php if( !empty($price) ) { echo $price; } ?> <?php if( !empty($addtocart_link) ) { ?> <br /> <form action="<?php echo $mm_action_url ?>index.php" method="post"> <input type="hidden" name="option" value="com_virtuemart" /> <input type="hidden" name="page" value="shop.cart" /> <input type="hidden" name="Itemid" value="<?php echo ps_session::getShopItemid(); ?>" /> <input type="hidden" name="func" value="cartAdd" /> <input type="hidden" name="prod_id" value="<?php echo $product_id; ?>" /> <input type="hidden" name="product_id" value="<?php echo $product_id ?>" /> <input type="hidden" name="quantity" value="1" /> <input type="hidden" name="set_price[]" value="" /> <input type="hidden" name="adjust_price[]" value="" /> <input type="hidden" name="master_product[]" value="" /> <input type="submit" class="addtocart_button_module" value="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO') ?>" title="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO') ?>" /> </form> <br /> <?php } ?></div> rồi sau đó chèn đoạn css này vào file css của cái template bạn đang sài ( virtuemart template) Mã: #feature_products { height: 360px; border: #e4e4e4 1px solid;} #feature_products a { color: #5a5a5a;} .products_name { font-size: 12px; } Cách 3: (Tương tự bên trên, có thêmbo tròn khung và đổ bóng ) Edit file: productsnapshot.tpl.php thay toàn bộ bằng đoạn code dưới: PHP: <?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?><div id="khung_sp"> <a title="<?php echo $product_name ?>" href="<?php echo $product_link ?>" class="link-product"><span class="jv-span-name"><?php echo $product_name ?></span></a><br /><a href="<?php echo $product_link ?>"><?php// Print the product image or the "no image available" image {tip Tooltip Title::tbvpcnd}hihihhahaha{/tip}echo "{tip". $product_name. "::".$product_s_desc."}".ps_product::image_tag ( $product_thumb_image). "{/tip}";?></a> <?phpif( $this->get_cfg( 'showViewDetails', 1 )) {?><br /><a class="jv-a-detail" title="<?php echo $product_name ?>" href="<?php echo $product_link ?>">View Details</a><?php}?><br /><div class="jv-cart-price"><div class="jv-cart-price-inner"> <div class="jv-cart"><?phpif( !empty($addtocart_link) ){?><form action="<?php echo $mm_action_url ?>index.php" method="post"><input type="hidden" name="option" value="com_virtuemart" /><input type="hidden" name="page" value="shop.cart" /><input type="hidden" name="Itemid" value="<?php echo ps_session::getShopItemid(); ?>" /><input type="hidden" name="func" value="cartAdd" /><input type="hidden" name="prod_id" value="<?php echo $product_id; ?>" /><input type="hidden" name="product_id" value="<?php echo $product_id ?>" /><input type="hidden" name="quantity" value="1" /><input type="hidden" name="set_price[]" value="" /><input type="hidden" name="adjust_price[]" value="" /><input type="hidden" name="master_product[]" value="" /><input type="submit" class="addtocart_button_snapshot" value="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO') ?>" title="<?php echo $VM_LANG->_('PHPSHOP_CART_ADD_TO') ?>" /></form><?php}?></div> <?phpif( !empty($price) ) {?><div class="jv-price"><div class="jv-price-inner"><?phpecho $price;?></div></div><?php}?> </div></div> </div> Thêm đoạn css này vào template.css Mã: #khung_sp { border: 1px solid #DCDCDC; margin: 10px auto; padding: 10px; text-align: center; width: 130px; // <== tự điều chỉnh height:155px; // <== tự điều chỉnh -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: #e8e8e8 0px 3px 4px; -moz-box-shadow: #e8e8e8 0px 3px 4px; box-shadow: #e8e8e8 0px 3px 4px; } Chú ý: Nếu khi add code css vào theme của VirtueMart không đc ta có thể add đoạn css đó vào theme của web Tổng hợp từ nhiều nguồn trên internet
Khi mình tìm file template.css trong thư mục thì có nhiều file template.css không biết file nào, bạn có thể chỉ đường dẫn cụ thể???
Template đang dùng của VitrtureMart hoặc của web, cái này còn tuỳ nha chúng la linh động tên file có thể là Temeplate.css hoặc theme.css, chúng ta cứ lần lượt thay vào, ko đc thì xoá đi, có thế mới vỡ ra đc nhiều cái hay hơn mà tự mình làm đc
Mình làm theo cách 1 thì sản phẩm được đóng khung, tuy nhiên mình có vấn đề tính hỏi. Muốn thay đổi màu khung nền, thôn số chiều cao, rộng của khung thì chỉnh cái nào. Vì khung thấy rộng quá muốn thu nhỏ lại.
cái table đầu tiên đấy thôi, thêm thuộc tính nền, cao vào và chỉnh lại độ rộng sẵn có thành độ rộng bạn muốn.
bác này cũng chém ở đây nữa ak? file css là tùy thuộc vào templates của người đó dùng và người tạo ra. Khi tạo vào mod để điền tên css mới thì bạn có thể vào bất cứ một file css nào của templates bạn đang dùng để thêm thuộc tính css bạn vừa tạo - miễn là file đó được load lại ở toàn page trên hệ thống website. Chẳng liên quan đến nặng nhẹ ở đây cả!
components\com_virtuemart\themes\ja-mesolite\templates\common Cái màu đỏ là tùy cái bạn đang dùng nha.
http://diendan.joomlaviet.vn/threads/dong-khung-san-pham.1020/#post-5081 hoặc như thế này http://www.joomla.leweb2.com/kidshop2/ Như cái này bạn này.... Chúc bạn ngủ ngon nhé....G9 Cảm ơn bạn nhiều
nói thật với bạn nếu chỉ cho bạn thì ko khác nào là mình làm hộ luôn code, cái này chỉ cần chút kiến thức css và html căn bản là làm đc thôi, mình nghĩ bạn nên tự học sẽ tiện hơn http://www.w3schools.com/css/css_border.asp
Mình làm theo cách 2 đóng khung được, nhưng cột ở giữa lại hẹp hơn 2 cột kia, làm sao chỉnh đều 3 cột?
Mình đã làm theo cách của bạn. Nhưng mà không đóng khung được cho phần mainmenu. Mình đã chon kiểu menu là vituemart rôi. Help!