How do I move the product titles above the thumbnails?

[amoeba]

http://www.coralkings.co.uk/

On the front page, the product titles are above the images and centered.

If you click on the Zoas category, the product titles are below the images and slightly to the right.

What will I need to edit to get the titles like front page? I've tried looking at it with Firebug with no luck.

[ivus]

Hi amoeba,

I've tried looking at it with Firebug with no luck.

really?

/components/com_virtuemart/views/category/default.php on a default install, look on line 220 (   // Show Products ?> )

Code Select Expand



<div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
  <div class="spacer">
    <div class="width30 floatleft center">

      <h2><?php echo JHTML::link($product->link, $product->product_name); ?></h2>
      /**

          MOVE YOUR H2 HEADING TAG UP HERE AND STYLE IT HOWEVER YOU WANT TO. PUT SOME DIVS AROUND IT OR DO WHAT EVER YOU WANT TO WITH IT.

      */

      <?php /** @todo make image popup */
echo $product->images[0]->displayMediaThumb('class="browseProductImage" border="0" title="'.$product->product_name.'" ',true,'class="modal"');
  ?>
      <!-- The "Average Customer Rating" Part -->
      <?php if ($this->showRating) { ?>
      <span class="contentpagetitle"><?php echo JText::_('COM_VIRTUEMART_CUSTOMER_RATING') ?>:</span> <br />
      <?php
// $img_url = JURI::root().VmConfig::get('assets_general_path').'/reviews/'.$product->votes->rating.'.gif';
// echo JHTML::image($img_url, $product->votes->rating.' '.JText::_('COM_VIRTUEMART_REVIEW_STARS'));
// echo JText::_('COM_VIRTUEMART_TOTAL_VOTES').": ". $product->votes->allvotes; ?>
      <?php } ?>
      <?php
if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none') && (VmConfig::get ( 'display_stock', 1 )) ){?>
<!-- if (!VmConfig::get('use_as_catalog') and !(VmConfig::get('stockhandle','none')=='none')){?> -->
      <div class="paddingtop8"> <span class="vmicon vm2-<?php echo $product->stock->stock_level ?>" title="<?php echo $product->stock->stock_tip ?>"></span> <span class="stock-level"><?php echo JText::_('COM_VIRTUEMART_STOCK_LEVEL_DISPLAY_TITLE_TIP') ?></span> </div>
      <?php }?>
    </div>
    <div class="width70 floatright">
      <?php // Product Short Description
if(!empty($product->product_s_desc)) { ?>
      <p class="product_s_desc"> <?php echo shopFunctionsF::limitStringByWord($product->product_s_desc, 40, '...') ?> </p>
      <?php } ?>
      <div class="product-price marginbottom12" id="productPrice<?php echo $product->virtuemart_product_id ?>">
        <?php
if ($this->show_prices == '1') {
if( $product->product_unit && VmConfig::get('vm_price_show_packaging_pricelabel')) {
echo "<strong>". JText::_('COM_VIRTUEMART_CART_PRICE_PER_UNIT').' ('.$product->product_unit."):</strong>";
}
if(empty($product->prices) and VmConfig::get('askprice',1) and empty($product->images[0]->file_is_downloadable) ){
echo JText::_('COM_VIRTUEMART_PRODUCT_ASKPRICE');
}
//todo add config settings
if( $this->showBasePrice){
echo $this->currency->createPriceDiv('basePrice','COM_VIRTUEMART_PRODUCT_BASEPRICE',$product->prices);
echo $this->currency->createPriceDiv('basePriceVariant','COM_VIRTUEMART_PRODUCT_BASEPRICE_VARIANT',$product->prices);
}
echo $this->currency->createPriceDiv('variantModification','COM_VIRTUEMART_PRODUCT_VARIANT_MOD',$product->prices);
echo $this->currency->createPriceDiv('basePriceWithTax','COM_VIRTUEMART_PRODUCT_BASEPRICE_WITHTAX',$product->prices);
echo $this->currency->createPriceDiv('discountedPriceWithoutTax','COM_VIRTUEMART_PRODUCT_DISCOUNTED_PRICE',$product->prices);
echo $this->currency->createPriceDiv('salesPriceWithDiscount','COM_VIRTUEMART_PRODUCT_SALESPRICE_WITH_DISCOUNT',$product->prices);
echo $this->currency->createPriceDiv('salesPrice','COM_VIRTUEMART_PRODUCT_SALESPRICE',$product->prices);
echo $this->currency->createPriceDiv('priceWithoutTax','COM_VIRTUEMART_PRODUCT_SALESPRICE_WITHOUT_TAX',$product->prices);
echo $this->currency->createPriceDiv('discountAmount','COM_VIRTUEMART_PRODUCT_DISCOUNT_AMOUNT',$product->prices);
echo $this->currency->createPriceDiv('taxAmount','COM_VIRTUEMART_PRODUCT_TAX_AMOUNT',$product->prices);
} ?>
      </div>
      <p>
        <?php // Product Details Button
echo JHTML::link($product->link, JText::_('COM_VIRTUEMART_PRODUCT_DETAILS'), array('title' => $product->product_name,'class' => 'product-details'));
?>
      </p>
    </div>
    <div class="clear"></div>
  </div>
  <!-- end of spacer -->
</div>
<!-- end of product -->



[amoeba]

Thanks Ivus,


If anyone else has this problem (and also can't code), change,

<div class="width70 floatright">

on line 249 to,

<div class="width100 floatleft center">

As Ivus suggested in the code he kindly attached, move,

<h2><?php echo JHTML::link($product->link, $product->product_name); ?></h2>

To line 224. That moves the titles (h2) above the images.

[ivus]

Hi amoeba,

It's great that you've got this sorted.

It would be great if you haven't already done so to please participate in my poll. https://forum.virtuemart.net/index.php?topic=106686.0

ivus 

[amoeba]

Hi Ivus,

I voted in your poll 

Out of curiosity, how did you find that specific default.php file with Firebug? When I right click  a webpage and choose Firebug, I can only see .css styles on the right and a HTML page on the left.

Somehow you found /components/com_virtuemart/views/category/default.php on line 220 

[ivus]

Hi amoeba,

Thanks for your participation.

Somehow you found /components/com_virtuemart/views/category/default.php on line 220 

-- I know the templating structure, because I worked with it for 4 weeks straight. We usually ask for a link so we can see which sub-template we should be dealing with.

http://forum.virtuemart.net/index.php?topic=106210

I wrote on another topic about knowing which template files you need to work with... it's not always the case, but works for the most part:



Which page did you want it to display in? The template (views) naming convention is quite straight forward.

For example:

Product View, add to cart button => /component/com_virtuemart/views/productdetails/tmpl/default_addtocart.php
Product View, customer review => /component/com_virtuemart/views/productdetails/tmpl/default_reviews.php
Shopping Cart, TOTAL price in pricing section => /component/com_virtuemart/views/cart/tmpl/default_pricelist.php
Shopping Cart, User shipping address update => /component/com_virtuemart/views/user/tmpl/edit_address_addshipto.php

It's not that difficult to have a look around, all you need to know basically is which section you're in (this defines the VIEW folder), and which part you want to change (this defines the TMPL file)



Well I hope this has clarified a few things for you and hopefully will make your future development work that little bit easier.

[amoeba]

Thanks again Ivus,

I've made a note of that info.

So what .php file do I need to fix this final error?

http://www.coralkings.co.uk/index.php/zoas/test-detail

I'm assuming I just need to find a <div class="width"> somewhere in a .php so I can center the price and cart button again 

[ivus]

that'll be in your default.php file, but there's a lot of styling you'll need to do.