Move Product Name to be above product photo

Hello,
Forgive me I'm still a bit of a noob. Please take a look at the following link

http://www.lyncar.com/test12/index.php?main_page=product_info&cPath=8_78&products_id=613

I'm looking to change the layout slightly so that the product name is aligned(horizontally) and above the product photo.

This is what it looks like now Attachment #9589
and this is what I would like it to look like Attachment #9590

Any thoughts?

Please help.

Anyone?

binkydbomb:

Please help.
Anyone?

Did ya ever get it worked out? Looking at the post date I know this is a bit late. I know it can be discouraging to not get a response.
Hope this helps.

Im guessing you're not a programmer, but if your in any way interested in tweaking code... You'll need an FTP program, eg: Filezilla, and a text editor, eg: Notepad (NOT a word processor like Word). To make life easier use Firefox as your browser & install the Firebug Extension, to help you find stuff like this in your files.

In the code, what you're looking for most likely looks something like this

<div id="productDescriptionWrapper">
<h1 id="productName" class="[B]productGeneral[/B]"> . . . </h1>

What you're looking for is in a CSS file in your "includes/templates/your-theme-folder/css" folder, usually called 'stylesheet.css'. You're looking for the class tag, .productGeneral, and the 'text-align' attribute is the one you want to change. In the CSS file it'll look something like

.productGeneral {
     text-align: center;
}

Just change 'center' to 'left'

.productGeneral {
     text-align: left;
}

That should get you what you want.

websmythe:

Did ya ever get it worked out? Looking at the post date I know this is a bit late. I know it can be discouraging to not get a response.
Hope this helps.

Im guessing you're not a programmer, but if your in any way interested in tweaking code... You'll need an FTP program, eg: Filezilla, and a text editor, eg: Notepad (NOT a word processor like Word). To make life easier use Firefox as your browser & install the Firebug Extension, to help you find stuff like this in your files.

In the code, what you're looking for most likely looks something like this

Hi websmythe,
Thanks for responding, I tried looking for the codes in my stylesheet.css in my template folder (according to the path you had shown) but it doesn't seem to exist. I added it in and ftp'd using Dreamweaver, checked out my site again and there was no change. Thank you for trying - out of the entire forum you are the only one who offered any kind of assistance

binkydbomb:

Hi websmythe,
Thanks for responding, I tried looking for the codes in my stylesheet.css in my template folder (according to the path you had shown) but it doesn't seem to exist...

np
Offering advice without see the files in question is always iffy. Obviously you stilll want an answer. PM me the link to the page and the name of the theme you're using, and I'll try and hunt it down for you. Its such a lil change, be a shame not to fix it. If you're not sure of the theme name, you can check for it in: Admin > Tools > Template Selection.

binkydbomb:

Thank you for trying - out of the entire forum you are the only one who offered any kind of assistance

Pas de sweat, with a name like binkydabomb, I almost felt like a kindred spirit. I used to fly my email under binkybonks <Smile>

Looks like the position is be controlled by a float:left statement attached to the Product Image. The easy way is to goto tpl_product_info_display.php in your includes/templates/"theme name"/templates folder (create a backup first :)) and move the Product Name statement from below the Product image statement to above it (no CSS req'd), eg:

Change

<!--bof Main Product Image -->
<?php
 if (zen_not_null($products_image)) {
 ?>
<?php
/**
* display the main product image
*/
  require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
 }
?>
<!--eof Main Product Image-->

[B]<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->
[/B]

to

[B]<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->[/B]

<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->

kooool :cool: