Change text color in Navbar Ttitle

Drawing a blank on how I can change the color of the text for the NAVBAR TITLE for a Category, such as these:

http://designerperfumesnob.authsafe.com/mens-cologne-c-652.html

http://designerperfumesnob.authsafe.com/aftershave-c-1359.html

The pink is too girly for Men's Cologne and Aftershave and I'd like to make it a grey, but can't remember where to go to change it.

That would be #productListHeading in the stylesheet.

stevesh:

That would be #productListHeading in the stylesheet.

OK, how do I isolate just the two categories Men's Cologne and Aftershave to show the different text color for the heading?

I see this in the sytlesheet:

/bof product listing/
.listingDescription {text-align:left;font-size: 1em;font-family: verdana, arial, helvetica, sans-serif;font-style: normal;}
.productListing-even {border:1px dashed #ccc;}
.productListing-rowheading {background-image:url(../images/sidebox-bk.png);height:50px;color:#fffffd;text-transform:uppercase;}
.productListing-rowheading a{color:#fffffd;}
.productListing-rowheading a:hover{color:#ed3a84;}
#productsListingTopNumber {margin-top:15px;margin-bottom:15px;}
#productsListingBottomNumber {margin-top:15px;margin-bottom:15px;}
#productListHeading {margin-bottom:15px;}
.tabTable {border-left:1px solid #dfdfe7;border-right:1px solid #dfdfe7;border-top:0px solid #dfdfe7;}
.productListing-data {border-bottom:1px dashed #ccc;}
.itemTitle {font-size: 1.1em; font-weight: normal;}

If you look at the readme file located in the css folder, it will tell you how to add a stylesheet for a specific category. You would just add the change you want for that category. Hopefully, your URL rewrites won't be a problem with this.

What's actually being colored (#ED3A84) are the h1 and customeHeaderTwo tags in the basic stylesheet. So... For the categories stylesheet, you'd have> h1 {color:#444443;}

#customJeaderTwo {color:#444443;}This would match the basic font color for both the Men's Cologne and FREE U.S. SHIPPING headings.

dbltoe:

If you look at the readme file located in the css folder, it will tell you how to add a stylesheet for a specific category. You would just add the change you want for that category. Hopefully, your URL rewrites won't be a problem with this.

What's actually being colored (#ED3A84) are the h1 and customeHeaderTwo tags in the basic stylesheet. So... For the categories stylesheet, you'd haveThis would match the basic font color for both the Men's Cologne and FREE U.S. SHIPPING headings.

Having a real hard time with this. Since I only need to do this twice, I've been trying to come up with an HTML inline style for h1 for the color #444443 that I can simply add to the Men's Cologne and the Aftershave and be done with it, but after trying a few things, I can't seem to come up with the correct inline code.

Could you please help?

Thanks!

You probably can't do it inline. Did you try the method dbltoe suggested ?

stevesh:

You probably can't do it inline. Did you try the method dbltoe suggested ?

Yes, but I probably didn't name the file correctly because nothing happened. This is what Men's Cologne looks like:

http://designerperfumesnob.authsafe.com/mens-cologne-c-652.html

I tried a few variations in the file name, but nothing worked.

Ditto for Aftershave:

http://designerperfumesnob.authsafe.com/aftershave-c-1359.html

Any ideas?

Looking at the Men's Cologne page in Firebug, I don't see a separate stylesheet for that category, which is what the tutorial suggests.

I hope I can offer two very important suggestions:

1. Please install the Firefox browser and the Firebug plugin and take a little time to learn how to use it. You can easily figure out the answers to most of your styling questions with that essential tool.

2. You joined the forum a little over a year ago and have posted 338 times, mostly asking questions about minor styling issues. My suggestion is that you fix the few major problems with your site (mainly the All Products dropdown in your mega menu and some default text in some of your define pages), set up your payment and shipping modules and get down to business. I understand the compulsion to make sure every tiny detail is the way you want it (once called 'finishing fear' by a guy a lot smarter than I am), but you're not making any sales in the meantime. Almost all of your customers don't care at all what color that text is if your products and prices are what they're looking for. Get your store up and running, then come back for the rest.

stevesh:

Looking at the Men's Cologne page in Firebug, I don't see a separate stylesheet for that category, which is what the tutorial suggests.

I hope I can offer two very important suggestions:

1. Please install the Firefox browser and the Firebug plugin and take a little time to learn how to use it. You can easily figure out the answers to most of your styling questions with that essential tool.

2. You joined the forum a little over a year ago and have posted 338 times, mostly asking questions about minor styling issues. My suggestion is that you fix the few major problems with your site (mainly the All Products dropdown in your mega menu and some default text in some of your define pages), set up your payment and shipping modules and get down to business. I understand the compulsion to make sure every tiny detail is the way you want it (once called 'finishing fear' by a guy a lot smarter than I am), but you're not making any sales in the meantime. Almost all of your customers don't care at all what color that text is if your products and prices are what they're looking for. Get your store up and running, then come back for the rest.

I tried naming the stylesheet various things, and entering the code provided, but nothing happened. I had hoped someone could offer the correct name for the new stylesheet for the men's cologne and the aftershave pages.

I am going to get the coding done for the mega menu.

I was unaware of major errors in the default text in the define pages, could you possibly just tell me how I could search for these errors if you didn't want to point them out?

Certain personal circumstances exist that preclude my opening of the store just yet. In the meantime, I hope I can still request assistance.

I'm only assuming as I haven't looked to see which pages, but admin-tools-define pages is most likely where you'll find your pages of default text.

stevesh:

Looking at the Men's Cologne page in Firebug, I don't see a separate stylesheet for that category, which is what the tutorial suggests.

I hope I can offer two very important suggestions:

1. Please install the Firefox browser and the Firebug plugin and take a little time to learn how to use it. You can easily figure out the answers to most of your styling questions with that essential tool.

2. You joined the forum a little over a year ago and have posted 338 times, mostly asking questions about minor styling issues. My suggestion is that you fix the few major problems with your site (mainly the All Products dropdown in your mega menu and some default text in some of your define pages), set up your payment and shipping modules and get down to business. I understand the compulsion to make sure every tiny detail is the way you want it (once called 'finishing fear' by a guy a lot smarter than I am), but you're not making any sales in the meantime. Almost all of your customers don't care at all what color that text is if your products and prices are what they're looking for. Get your store up and running, then come back for the rest.

I would really appreciate it if you would specify which major problems you were referring to regarding the default text. Are you talking about user permissions for Define pages? I don't know how to go about finding the problems you found so easily.

Thanks!

You're complicating the matter by "hard-coding" the color for the customHeaderTwo. I misspelled it earlier in the quote.

Have you tried creating a css file in your includes/templates/piccadilly_posh/css directory called c_652.css with the following> /**

• CSS Stylesheet for Category 652
• @package templateSystem
• @copyright Copyright 2003-2007 Zen Cart Development Team
• @copyright Portions Copyright 2003 osCommerce
• @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
• @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
  */

h1 {color:#444443;}
#customHeaderTwo {color:#444443;}IF that works, you will then need to create another in the same directory titled c_1359.css. (Change the 652 in red to 1359 for clarity)

Once established, you can use these files to change any stylesheet-controlled item for that category.

dbltoe:

You're complicating the matter by "hard-coding" the color for the customHeaderTwo. I misspelled it earlier in the quote.

Have you tried creating a css file in your includes/templates/piccadilly_posh/css directory called c_652.css with the followingIF that works, you will then need to create another in the same directory titled c_1359.css. (Change the 652 in red to 1359 for clarity)

Once established, you can use these files to change any stylesheet-controlled item for that category.

This worked beautifully! I tried many different file names and never thought of the correct ones, nor did I have the correct format for the page.

Two questions if I may:

If I wanted these two pages a different background than the rest of the site, are there many steps involved?

If I didn't hard-code the color for the customHeadertwo, would I just add that as needed?

Thanks a million!

You need to remove the hard coding of the color that you added to the text for the customHeaderTwo so the the stylesheet can do its job.

Next, add a line to each of the category css sheets like> body {background: url("../images/bk####.png") repeat scroll 0 0 transparent;}the bk####.png file would be a 100 x 100 pixel image that would replace the existing pink background. You would place it in the /images folder of your site.

I've attached one as an example for category 652 but it could be used for both. It matches the pattern in the current image.

[Attachment no longer available]

Note: With the exception of a Zen Cart tutorial on stylesheets, all the information needed to do this could be found using the firebug add-on for Firefox browser. A VALUABLE tool for any Zen Cart user.

dbltoe:

You need to remove the hard coding of the color that you added to the text for the customHeaderTwo so the the stylesheet can do its job.

Next, add a line to each of the category css sheets likethe bk####.png file would be a 100 x 100 pixel image that would replace the existing pink background. You would place it in the /images folder of your site.

I've attached one as an example for category 652 but it could be used for both. It matches the pattern in the current image.

[Attachment no longer available]

Note: With the exception of a Zen Cart tutorial on stylesheets, all the information needed to do this could be found using the firebug add-on for Firefox browser. A VALUABLE tool for any Zen Cart user.

May I use your image?

It's not mine. It's just a colorless (grayscale) version of the current bk.png of your site.

If you use it in both the categories, I suggest you make a copy of it for each. That way, a later change will not suddenly change both categories.

dbltoe:

It's not mine. It's just a colorless (grayscale) version of the current bk.png of your site.

If you use it in both the categories, I suggest you make a copy of it for each. That way, a later change will not suddenly change both categories.

I am going to use it for both. I think it will be a more cohesive look than the one I was going to go with which is totally different than the pink design.

I removed the color from the customHeadertwo.

Thank You.

I added the background and I love it. It's just perfect! Thank you so much!!