Can't change the "price" and "Item Name" Link

I was moving along swiftly changing all the colors on my site with the Firefox plug ins. I managed to change the product listing links, backgrounds and headers. However, I can't figure out how to change the blue links for Price and Item Name. Can anyone help?

Another problem is when I change the link color in my product listing by adding h3 a:link, a:visited, it also will change the link color in my catergories and mess with ez pages links. Is there a way to have link color for a specific area?

This is what I did.

h3 a:link, a:visited, #indexProductList, #indexProductListCatDescription, .productListing-odd, .productListing-rowheading {
background-color: #000033;

color: #ffffff;
a color:#ffffff;
}

Thanks!

I found the solution. I tried to do everything in one step but I just broke it down. This was what I did.

#indexProductList, #indexProductListCatDescription, .productListing-odd, .productListing-rowheading a, productListing-Data a {
background-color: #000033;

color: #ffffff;
}


#indexProductList a {color: #ffffff}

Did you find a solution for this? I tried this and my category headings on the Search results page are still displaying in blue:

http://www.lakecourt.com/help/links.gif

Any suggestions???

Many thanks!:frusty:

Here's a CSS snippet for changing the color (or any other attributes-- font, size, etc) of the "Item Name" and "Price" titles on the product list page. Since they're links they change colors unlike the "Product Image" title.

As a newbie this took me ages to figure out (naturally I was very Zen about it :smile:.) There may be a better way to do this but since no one posted one... I hope this saves others some time:

I'm using the classic template, just change "classic" for your template directory

1) Open /includes/templates/classic/css/stylesheet.css
2) Add:

[FONT="Courier New"]#listCell0-1, #listCell0-2, #listCell0-3, #listCell0-4, .productListing-heading a {
color: #ffffff;
font-size: 1em;
text-align: center;
}[/FONT]

3) Save the file.

Cheers.

Thanks for the info. I tried this and nothing changed.

Is this for the headings (manufacturer, model, item name) on the search results page?

In my template it's for both the product list and search pages but you may have different setting for each page.

Here's what I recommend:

• If you don't already use the Firefox browser, install it.

• Install the web developer add-on: http://chrispederick.com/work/web-developer/
  

• Restart Firefox (if it's already open)

• Open your page and do a search

• Click on the Web Developer Button: Information => Display ID & Class Details

• It should look something like this
  http://www.flan-king.com/images/webdev1.jpg

• Look at the "#" and "." fields to the left of the names you want to change, here they are:

#listCell0-1 .productListing-heading and #listCell0-1 .productListing-heading

That's what you need to change in your templates/[CUSTOM]/CSS/stylesheet in the following format

#[#name1], #[#name2], .[.nameheading1] a {
color: #[hex color];
font-size: [size number];
}


NOTE: It is case sensitive, so you need to type EXACTLY what it says in the Web developer display

Some this one here is:

[FONT="Courier New"]#listCell0-1, #listCell0-2, .productListing-heading a {
color: #ffffff;
font-size: 1em;
text-align: center;
}[/FONT]

Note that I only needed to put the .productListing-heading once since it was the same for both fields.

Good Luck!

hi talk2kmf - thanks for the reply and thanks for the web developer tool kit tip - great info and app for firefox!!

I added the code at the bottom of the css and nothing happened.

http://www.lakecourt.com/help/image.gif

I have got to be missing something somewhere. i know its not that difficult, right?

I am getting so close I think.

When I edit this:

#contentMainWrapper a{
color: blue;
}

to color: white

all the links on my page change from blue to white. This is goos for the headings i want to be white but not good for the rest of the links on my page due to my white background.

Any way to parse these apart?

I think what's happening is that they're links. So the link attribute is overriding the settings that you're specifying. The trick is to have the specific setting override the link attribute for just those two items. I'm new to this to so I'm trying to figure how this stuff all works too. Here's something to try:

Open the search page with as before
Using web developer click on CSS=> View Style information
Then click on the word "Manufacturer"
What should show at the bottom is the order of styles (and which file, and which line) that are being read for that item.

Something like:

https://<your directory>/css/stylesheet.css

a:link, #navEZPagesTOC ul li a (line 21)
{
color: #006699;
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 (line 31)
{
color: #ff0000;
}

#listCell0-1, #listCell0-2, #listCell0-3, #listCell0-4, .productListing-heading a (line 580)
{
color: #ffffff;
font-size: 1em;
text-align: center;
}

First make sure your new setting shows in the list. If not, you're either editing the wrong file or the text is not in the right format so the system isn't reading it.

If it's there, double check your syntax. For example you need to have the "a" in there after .productListing-heading as in:
[FONT="Courier New"].productListing-heading a {[/FONT]

Then I think it needs to be the last entry in the list. So if you have a link attribute below it, that's over riding the special setting. Try changing the order of the entries in the file. And see if it makes a difference.

Hi again - Thanks so very much for your insight with this issue.

I did as you said and here are my results from the firefox web tool view:

a:link, #navEZPagesTOC ul li a (line 21)

{

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 (line 31)

{

color: #ff0000;

}

#listCell0-1, #listCell0-2, #listCell0-3, #listCell0-4, .productListing-heading a (line 734)

{

color: #ffffff;

font-size: 1em;

text-align: center;

}

#contentMainWrapper a (line 180)

{

color: blue;

}

The links on the search results page are still in blue. i imagine that the contentMainWrapper is making them default to blue so when i change that to white, all my other links within the web site are white too. grrr. oh the delimma......:frusty: