Changing text color in Featured Products grid

[Brewhaus]

I am having a problem getting the color to change for the product names and sale prices on the Featured Products list without losing the bold font face. Changing the color can be done, but I seem to be stuck choosing between that and the 'highlight'. Can anyone help with this?

[m_plugables]

Modify the style.css of your current store theme and change the color values for following styles. Only change the value of color attribute to some of your custom value leave other attributes as it is. For example i changed the color of product name and price to red.

Code: Select all

a.highlight{color:RED; }
p.highlight{color:RED;}

But the above changes will change the color of all the text which have the class a.highlight or p.highlight. If you only want to change the color of product name and price within the products grid. Then add the following new styles to the style.css and provide some color value there

Code: Select all

.productsGrid .details a.highlight{color:Red;}
.productsGrid .details p.highlight{color:Red;}

This modification will only change the text color for the items within the ProductsGrid. If you see that you are losing the bold font-weight then just add the following line below the color line.

Code: Select all

font-weight:bold;

[Brewhaus]

That worked great. Yes, I did have to add the suggested lines of code, otherwise it also turned sub-category links red, as well. But, when I made the addition, it also suddenly applied only to the Featured Products grid. Items on the standard product pages went back to the default deep gray. Is there a simple way to correct this?

[m_plugables]

Add following code to CSS

Code: Select all

.tableNode {color:Red;}
.tableNode a.highlight{color:Red;}

[Brewhaus]

This changes the product name color, but also the sub-category color. I am going to assume that there is no way to change one without the other (except on the Featured Product pages, which we have accomplished thanks to your code addition).

[m_plugables]

Yes you are right in order to match your requirements you may have to change a little bit HTML. for example to put some of your own classes on the text which you want to change

[Brewhaus]

Can we use only a. and p. for this? First, I find that using 'p', we end up with a blank line that I would like to do away with. But, I cannot use the 'a' highlight, as it is already being used for a different color and purpose. Also, adding a third may (hopefully) allow me to put the regular price and sale price into different colors.

Update: Skip that first part- I worked it out.

[Brewhaus]

It has been a little while, but I would really like to revisit this. We do not want to change the sub-category name colors, but do want to change the color for the product names. I tried adding <p><span color...> directly to the product name, and this worked fine except that it then shows some code for the graphic. Hey, it was worth a shot.

So, is there anyone that can guide us on how to do this? We were able to change the text color on the Featured Products page, but cannot change it on the category pages without also changing the text for sub-categories.

[mazhar]

For the category pages and search page try following code by adding it to your CSS

Code: Select all

.tableNode a.highlight { font-weight:bold; color:red; padding-top:5px; padding-bottom:5px; margin-top:5px; text-decoration:none; }

[Brewhaus]

Won't this also change the category names for the sub-categories. For example, on

http://
www.
hotsaucedepot.
com/By-Sauce-Brand-C12.aspx

would the category names be changed to red? We want to change only the product names.

[jmestep]

Do you use the same category display page for categories with subcategories and those with products? If so, you might have to put some conditional code in, but it's hard to tell without knowing what the display page is.

[Brewhaus]

I use CategoryGrid4 for all pages (well, excluding the home page, obviously). So yes, the same page is used for categories and products. Would it work to basically make a copy of the CategoryGrid4.ascx and .cs files, with the one 'highlight' code added, and then select it for the product pages (ie. the categories with only products below)? I assume this would allow us to have the text for the products in a different color than the text for categories.

[jmestep]

Try making a code change such as this in CategoryGrid4.ascx.cs
Original:
//OUTPUT LINKED NAME
itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"highlight\">{1}</a><br />", catalogNodeUrl, catalogNode.Name)));

New: (untested code)
//OUTPUT LINKED NAME
if (catalogNode.CatalogNodeType == CatalogNodeType.Product)
{
itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"producthighlight\">{1}</a><br />", catalogNodeUrl, catalogNode.Name)));
}
else
{
itemTemplate1.Controls.Add(new LiteralControl(string.Format("<a href=\"{0}\" class=\"highlight\">{1}</a><br />", catalogNodeUrl, catalogNode.Name)));
}

[Brewhaus]

This does work in that it changes the color of the product name. It also loses the bold formatting and it underlines the name. Can we avoid this (ie. just change the color of the name, and nothing more)?

[jmestep]

Just make sure in the productclass you set up in the css has text-decoration:none and font-weight:normal as well as the new color.

[Brewhaus]

I have tinkered a bit, but cannot seem to separate the formatting for the product name from the manufacturer listing below it with the code above. In other words, when I incorporate the code that you listed, the product name takes on the same formatting as the 'by XXX' mentioned right below the product name. I assume that this is because I am using the same formatting section in our style sheet. Can I simply add another formatting line to achieve what we are trying to do?

The applicable section from our style sheet is:

/* default styling for links */
a { color:#8C0901; }
a:hover { color:#000000; }

/* link styling for links that are highlighted on a page */
a.highlight { font-weight:bold; color:#575757; padding-top:5px; margin-top:5px; text-decoration:none; }
b.highlight { font-weight:bold; color:green; padding-top:5px; margin-top:5px; text-decoration:none; }

/* link styling for links that are highlighted on a product page */
.productsGrid .details a.highlight{color:#8C0901;}
.productsGrid .details b.highlight{color:green;}

[jmestep]

Yes, you can add a new formatting section and apply that.

[Brewhaus]

Thank you, Judy. I added the class in the style sheet, and also made the change to the Search file to keep things consistent on the site. Now on to other little issues.