Change the font color in Product Listing page

[wilson_li]

Hello All,

How can I change the font color in my product listing page? I added

.productListing-data {
color:white;
} 

And it doesn't work at all

Here is my product listing page:
http://www.oleklejbzon.com/campbells...=index&cPath=1

[dgent]

Find these in your stylesheet and notice Ive changed the colour to #ffffff and aligned your item titles centered.

a:visited {
color: #ffffff;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
/*margin-left: -30px;*/
color: #ffffff;
}


.itemTitle { text-align:center;}

[wilson_li]

Find these in your stylesheet and notice Ive changed the colour to #ffffff and aligned your item titles centered.

a:visited {
color: #ffffff;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
/*margin-left: -30px;*/
color: #ffffff;
}


.itemTitle { text-align:center;}

Thanks dgent! It now working perfectly :)

another question on the product info page, can I move my product name, product price and product description below the first additional image, as well as below the last additional image? Make the text-align: center

here is one of my product info pages: http://www.oleklejbzon.com/campbells...&products_id=9

[dgent]

Thanks dgent! It now working perfectly :)

another question on the product info page, can I move my product name, product price and product description below the first additional image, as well as below the last additional image? Make the text-align: center

here is one of my product info pages: http://www.oleklejbzon.com/campbells...&products_id=9

Thats a bit tricky. What would be better is to have your first image as your main product image (and style it so its the size of the additional images and centered to match etc), then move your product title and price below the code for the main product image in your tpl_product_info_display.php file (remember I showed you last time) and also copy those bits of code below the end of the additional image code in the same file.

So you will have a main image, then price and and title, additional images, and price and title again. You can centre them in your style sheet. {text-align: center;}

[dgent]

Forgot to add, you need to change this in your style sheet too (Ive changed the colour to white)

a:link, #navEZPagesTOC ul li a {
color: white;
margin-top: 10em;
margin-bottom: 0px;
/*margin-left: 5px;*/
padding-top: 0px;
padding-bottom: 0px;
/*padding-right: 50px; */
text-decoration: none;
}

[wilson_li]

Thats a bit tricky. What would be better is to have your first image as your main product image (and style it so its the size of the additional images and centered to match etc), then move your product title and price below the code for the main product image in your tpl_product_info_display.php file (remember I showed you last time) and also copy those bits of code below the end of the additional image code in the same file.

So you will have a main image, then price and and title, additional images, and price and title again. You can centre them in your style sheet. {text-align: center;}

Thanks dgent, I have turned the default first image (showed in main product page) off in my stylesheet:

#productMainImage {display:none;} 

because I don't want it show in my product info page. So do I need to comment it?

Then I edited my tpl_product_info_display.php file and add

<div id="addImagecont">

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

</div>

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



<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

[dgent]

Yes comment it back in, make it the same size in admin as your additional images, and then play with the position of the addititional image in the stylesheet to line up etc...

Yes, that code you posted should work. If not, its just a matter of moving it around to suit. Very straightforward.

[dgent]

Oh I see the problem, your main product image which you use on your listings isnt like your product images.

[wilson_li]

Yes comment it back in, make it the same size in admin as your additional images, and then play with the position of the addititional image in the stylesheet to line up etc...

Yes, that code you posted should work. If not, its just a matter of moving it around to suit. Very straightforward.

Thanks dgent, another question about the text-align, I located the product name, product price with Firebug. And it is clear that I need to add text-align: center to h1, and h2, so it would become:

h1 {
    font-size: 1.5em;
    padding-right: 0px;
    color: white;
    margin-right: 0px;
    text-align: center;
    /*margin: 0.8em; */
    }

h2 {
    font-size: 1.4em;
    color: white;
    text-align: center;
    } 

The price, name are now centered but when I back the front page the front page description is centered I don't wanna my front page description to be centered is there any way to do that?

[dgent]

Make a stylesheet called index_home.css and put this in it...

h1 {
font-size: 1.5em;
padding-right: 0px;
color: white;
margin-right: 0px;
text-align: left;
/*margin: 0.8em; */
}

h2 {
font-size: 1.4em;
color: white;
text-align: left;
}


..and upload it to your templates/css folder.