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:

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:

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

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
  
• 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:

#listCell0-1, #listCell0-2, .productListing-heading a {
color: #ffffff;
font-size: 1em;
text-align: center;
}

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.

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:
.productListing-heading a {

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:

So it looks like that #contentMainWrapper a is overriding things. I noticed in my CSS file it doesn't specify a color:

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

Can you try moving the color specification maybe to #mainWrapper? Alternatively what happens if you just comment it out?

/*
#contentMainWrapper a
{
color: blue;
}
*/

What's the effect?

This issue was killing me. You fix worked perfectly. You have to do this in the template folder, in my case it was "Classic". Thanks for putting this together.

talk2kmf:

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:

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

3. Save the file.

Cheers.

Hello,

Thanks for your message. I had the same issue and it really worked great for me. Thanks a lot.

However One more issue I have related to this. I was able to change the color to white of Item Name and Price titles. but I also added the another css style for changing color on mouse hover. but it didn't work. Can you please advise. I added the follow style code.

.productListing-heading a:hover {
color: #ffffff;
}

Regards
Ali

Thanks for posting this solution!
Pasting:

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

at the end of the stylesheet.css worked perfectly!
Now only about 37 more tweaks to go :D

eb

Thanks for the solution in this forum. I had the same problem; i.e., Item Name and Price were in blue with a green background so difficult to see. On my own I got as far as figuring out:
.productListing-heading {
color: #FFFFFF;
}
as an additional line in my Classic/css/stylesheet.css. But what I was missing was the "a".
Need to put the "a" for active link after the class:
.productListing-heading a {
color: #FFFFFF;
}
Problem solved:clap: