Forums / Templates, Stylesheets, Page Layout / Change the font color in Product Listing page

Change the font color in Product Listing page

Started by wilson_li on 8 Aug 2011, 2:37 AM · Views: 3,507

Results 1 to 20 of 28
8 Aug 2011, 2:37 AM
#1
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Change the font color in Product Listing page

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/campbellsloft3/index.php?main_page=index&cPath=1

8 Aug 2011, 9:18 AM
#2
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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;}

8 Aug 2011, 10:31 AM
#3
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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;}

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/campbellsloft3/index.php?main_page=product_info&cPath=1&products_id=9

8 Aug 2011, 10:46 AM
#4
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

wilson_li:

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/campbellsloft3/index.php?main_page=product_info&cPath=1&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;}

8 Aug 2011, 11:00 AM
#5
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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;
}

8 Aug 2011, 11:07 AM
#6
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

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 ```php

<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 --> ```
8 Aug 2011, 11:10 AM
#7
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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.

8 Aug 2011, 11:16 AM
#9
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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.

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?

8 Aug 2011, 11:20 AM
#10
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

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.

8 Aug 2011, 11:36 AM
#11
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

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

Exactly, that's because I added ```php
#productMainImage {display:none;}


When I commented it the main product image shows up :(. Right now I have my name, price, description below my last additional image. How I can add price, name, description below the 1st additional image?
8 Aug 2011, 11:54 AM
#12
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

wilson_li:

Exactly, that's because I added ```php
#productMainImage {display:none;}

> 
> When I commented it the main product image shows up :(. Right now I have my name, price, description below my last additional image. How I can add price, name, description below the 1st additional image?

You can't, it would require hacking of the additional images module which I don't know what to do.

One way to get around it, would be put the product title and price below the product description code, and then simply add the FIRST image via HTML tags in your product description (in admin) to display it.

ie...

<img src="images/yourimage.jpg" align="center">

(or don't add the align="center" tag and align all of the product description in your stylesheet to center)

Bit crude, but will work fine.
8 Aug 2011, 12:03 PM
#13
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

You can't, it would require hacking of the additional images module which I don't know what to do.

One way to get around it, would be put the product title and price below the product description code, and then simply add the FIRST image via HTML tags in your product description (in admin) to display it.

ie...

<img src="images/yourimage.jpg" align="center">

(or don't add the align="center" tag and align all of the product description in your stylesheet to center)

Bit crude, but will work fine.

Thanks dgent, I'm trying to do this way. By the way, if you look at the footer: Copyright © 2011 campbellsloft. Powered by Zen Cart the color of "campbellsloft" and "Zen Cart" are in white which is caused by :

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

Can I revert it to black (the product listing page's text remains white)?

8 Aug 2011, 1:26 PM
#15
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

Why not just make that block at the bottom black, and make all the text it in white?

That's weird...... when I launched Google Chrome, and Firefox 5.0 the text showed on the footer..

8 Aug 2011, 1:53 PM
#16
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

Why not just make that block at the bottom black, and make all the text it in white?

Thanks dgent, I tried to add border (white) it worked but effected other sections :(

#addImagecont {
    border-color: [B]white[/B];
    border-style: solid;
    border-width: 70px 80px;
    padding-left: 2px;
    padding-right: 0;
    width: 845px;
}

The line of code adds left-border-width: 70px, right-border-width: 80px, color in white to the additional image. However, the background color in header was in white as well.

Is there any way to add border like what showed in the attachment?

thanks

8 Aug 2011, 2:43 PM
#17
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

Add this to your style sheet

.additionalImages img { border: solid white 70px;}

Also, on your body tag in your stylesheet, you have 'color: black' - Did you mean background-color? Make all of the background black then, no white sides.

8 Aug 2011, 3:03 PM
#18
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

dgent:

Add this to your style sheet

.additionalImages img { border: solid white 70px;}

Also, on your body tag in your stylesheet, you have 'color: black' - Did you mean background-color? Make all of the background black then, no white sides.

Thanks again, dgent! I once tried this line in my stylesheet, however it created much more space between additional images (that's I don't want to see).

8 Aug 2011, 3:13 PM
#19
wilson_li avatar

wilson_li

New Zenner

Join Date:
Jul 2011
Location:
New Jersey
Posts:
98
Plugin Contributions:
0

Re: Change the font color in Product Listing page

Actually this can be achieved by editing:

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    background-color: white;
    border-color: white;
    border-right: 0 solid white;
    border-style: solid;
    border-width: 0;
    color: white;
    margin-top: 3.6em;
    padding: 0.8em;
    width: 1007px;
}
.back {
    background-color: white;
    float: left;
    margin-top: -5px;
}

However, I still have some problems with the header in white :(

8 Aug 2011, 3:14 PM
#20
dgent avatar

dgent

Totally Zenned

Join Date:
Nov 2009
Location:
UK
Posts:
1,117
Plugin Contributions:
0

Re: Change the font color in Product Listing page

wilson_li:

Actually this can be achieved by editing:

.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
background-color: white;
border-color: white;
border-right: 0 solid white;
border-style: solid;
border-width: 0;
color: white;
margin-top: 3.6em;
padding: 0.8em;
width: 1007px;
}

> 
> ```php
.back {
    background-color: white;
    float: left;
    margin-top: -5px;
}

However, I still have some problems with the header in white :(

Don't edit those, edit the body tag only.

background-color: #000 !important;