Product Listing Title Colour

[maXSG]

Hi

After clicking on a Catagory, I get my products for that catagory listed.

What I would like to do is change the colour/size etc of the clickable Product Title to help the listing stand out a little. Happy to leave the short description as is, but really want to change the title...and the hover colour for it.

Guessed it was in stylesheet but cant seem to suss it out!

Any help much appreciated.

Such a simple thing but absolutely doing my head in

[schoolboy]

As you develop your webshop, you will want to resolve many more issues like this.

Can I suggest that you use FIREFOX and a add-on called "web developer toolkit" by Chris Pederick.

This tool will help you identify core components in the page code - including css and style tags.

When using firefox and the add-on, you will find what you need to edit in a matter of seconds.

Also, consider doing the W3C online tutorials for CSS. They will help you understand how css works, and how to set your styles.

[maXSG]

Thanks for that.

I've done as suggested, but not being ofay with Firefox, i'm probably more lost now than before.

Jut looking for a quick fix for now if anyone can point me in the right direction.

Cheers

[schoolboy]

Are you using a Standard template, or have you installed a Custom template?

In order to point you in the right direction, I'll need to know where the relevant CSS is located.

[maXSG]

Custom template. A variation on the'darkness' template

[schoolboy]

I don't know this template, so the following may not apply...

However...

In the STANDARD templates, the Product Name text (which appears on your individual product description pages) is largely governed by the " h1 " css style attribute. Therefore, any component sharing the " h1 "style, will look similar in colour and size to each other.

You can however, apply an individual style to the Product Name.

The css code you need is probably in:-

includes/templates/YOUR-DARKNESS-TEMPLATE/css/stylesheet.css

Add this to the stylesheet:-


#productName { color: #000000; }

...where #000000 is changed to give your chosen colour.

[maXSG]

Thanx

I already have already changed the one on the actual Product Information page, so do you think your solution will change the product title in the product list (previous page if you like)

I know i've probably not made myself veryclear so far (i'm told that a lot), so if it helps here is the site i'm trying to modify (for example)...

http://max-sunglasses.co.cc/store/in...0fb44e47bceb22

Thanks for your patience :)

[schoolboy]

Try looking for :-

.itemTitle

... in the stylesheet.

In a standard template, this is what controls the style of the product name in the listings pages.

[maXSG]

This is the only reference I can find using the Developer Tools in Admin

/home/maxsg/public_html/store/includes/modules/product_listing.php 

Line #97 : $lc_text = '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ? zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>' ; 

Line #99 : $lc_text = '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ? zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>';

but it's not obvious to me what I need to change without messing the whole thing up

[schoolboy]

Okay... for stylesheet changes, you ought not need to use the Developer's Toolkit in the Admin.

If you already made changes to your stylesheet(s)...

I already have already changed the one on the actual Product Information page

... then you'll make this change to the SAME stylesheet.

So, you'll be looking for a file called "stylesheet.css" (or something like that, with the extension ".css".

The files you found above are CORE CODE files. You need to find the CSS file(s).

If the " .itemTitle " style tag does not exist in the stylesheet, you'll have to insert it, then apply to it, the styles you want.