The Bookshelf Mystery - Case of the Disappearing Text, CSS problem

I am using the "Bookshelf" template and discovered a great mystery. Since my site is locked down, you can get the same experience at this site. Simply select "The Bookshelf" from the drop down menu.

Go into one of the product categories and resort the listings by clicking either the Item Name or Price. After two clicks (ascending/descending sorts), you will notice the text disappears. It will not come back unless you clear your browser history.

The clues that I have gathered so far include the following code, starting around line 36:

a:visited {
    color: #550000;
    text-decoration: none;
}
#navMain a:visited, .productListing-rowheading a:link {
    color: #FDF4D7;
    text-decoration: none;

The other text, such as for products, does not change color after clicking on the text and visiting the page. So the question must be asked.....why does the text "Item Name" and "Price" disappear like a ghost into the background after two clicks.

Those who can solve this mystery and let me know how to modify the stylesheet.css will be rewarded with knowing that I might to get to spend some time with my wife tonight. :hug:

Treadle:

I am using the "Bookshelf" template and discovered a great mystery. Since my site is locked down, you can get the same experience at this site. Simply select "The Bookshelf" from the drop down menu.

Go into one of the product categories and resort the listings by clicking either the Item Name or Price. After two clicks (ascending/descending sorts), you will notice the text disappears. It will not come back unless you clear your browser history.

The clues that I have gathered so far include the following code, starting around line 36:

a:visited {
color: #550000;
text-decoration: none;
}
#navMain a:visited, .productListing-rowheading a:link {
color: #FDF4D7;
text-decoration: none;

> 
> The other text, such as for products, does not change color after clicking on the text and visiting the page.  So the question must be asked.....why does the text "Item Name" and "Price" disappear like a ghost into the background after two clicks.
> 
> Those who can solve this mystery and let me know how to modify the stylesheet.css will be rewarded with knowing that I might to get to spend some time with my wife tonight. :hug:

a:visited {
    color: #550000;

is the same colour as the row header **background** colour, so once the link is VISTED, it will show up in the colour it is told to... in this case, the same colour as the row header background colour...

I would just COMMENT OUT this "visited" declaration. Unless there's a compelling reason to show people what pages they may have viewed earlier...

```php
/*    a:visited {
color: #550000;
    text-decoration: none;
}  */

or... give it a different colour:

a:visited {
    color: #FF00FF;
    text-decoration: none;
}

NB: The above colour change will apply SITE WIDE... not just the row headings. You will have to add further ID / CLASS limiters to make it apply only to the row headers.

PS: don't forget to tell your wife to thank me... :D

Schoolboy,

Thank you so much for your reply. I tried your method of commenting out the code, but that was required to keep the visited pages at color #550000. When I blocked it out, the visited pages turned to an unfortunate shade of purple. :yuck:

Using Firebug and looking at the CSS code for other templates, I found the solution. I noticed that other templates did not change the text color in the heading and I was able to copy their code and paste it into my stye sheet. Here is the solution.

/* #navMain a:link, .productListing-rowheading a:link {
	color: #FDF4D7;
    text-decoration: none;
	} */

a:visited {
	color: #550000;
    text-decoration: none;
	}
	
#navMain .productListing-heading a, .productListing-heading a:link, .productListing-heading a:visited {
	color: #FDF4D7;
    text-decoration: none;

Note the top section where I commented out the other information for the ProductListing-rowheading. The bottom section of code is what fixed the problem. As noted, the a:visited code is required to keep the same color after selecting pages.

This project is my first attempt at computer programming since college many years ago. I remember working on Fortran, but that doesn't do me much good here. I use the basics in testing - ONE CHANGE AT A TIME - and good file management as well as all the wonderful tools that are available and have been able to get through several problems. I get frustrated but am well pleased with Zen Cart.

P.S. - Schoolboy, I will definitely tell tell my wife to thank "ME". :smoke:

The problem is here:

#navMain a:visited, .productListing-rowheading a:visited {
   color: #FDF4D7;
   text-decoration: none;
	}

It should be a:visited not a:link

Doing it this way will keep the code cleaner. Hope that helps.

I realise that it's "early days" for you as far as all this CSS stuff goes, but the beauty of the CSS, is that it can easily be edited - once you know what to do.

There are very good tutorials online, for learning CSS.

The other thing that is MANDATORY is to use the FireFox browser, and get the following PLUGINS for it, from the mozilla site:

1. Firebug
2. Colorzilla

And from https://www.chrispederick.com, get the web developers toolkit for Firefox.

These tools allow you to do comprehensive analysis of displayed web pages, allowing you to make "off-line" changes that you can later commit to the live server.

For example, Firebug has an "inspect" tool, which will show you little popups on screen of what an element's Style ID or Class is. You can then (at the same time) make edits to the CSS and see in real-time the effect of your edits.

These tools are essential for enthusiastic web developers - novice and professional.

They enable you to achieve things in a few minutes, that can otherwise take hours to unpick and resolve.

There are very good tutorials online, for learning CSS.

The other thing that is MANDATORY is to use the FireFox browser, and get the following PLUGINS for it, from the mozilla site:

1. Firebug
2. Colorzilla

And from https://www.chrispederick.com, get the web developers toolkit for Firefox.

These tools allow you to do comprehensive analysis of displayed web pages, allowing you to make "off-line" changes that you can later commit to the live server.

For example, Firebug has an "inspect" tool, which will show you little popups on screen of what an element's Style ID or Class is. You can then (at the same time) make edits to the CSS and see in real-time the effect of your edits.
Also available for Google Chrome. :yes:

ideasgirls,

Thanks for your input. Since you are the designer of this template, it's wonderful to hear from you. I didn't reply back to this thread, but I found another problem with my "fix". The text in the header then changed to the same background color. So I fixed that and then the text in the footer turned too light. :no: Kind of like pushing a bubble around in the wallpaper. Now I guess I will download the file and go through WinMerge to get it back to it's previous condition and add your fix. I already made quite a few other style changes, such as the wallpaper, so I can't go back to the original right now.

Schoolboy,
You have some great information there. I am using your suggestions already, except for Colorzilla. This is the first time I heard about that AddOn. I will check it out. The problem with the "off-line" changes is that I was focusing in on one problem. I solved that, but didn't notice the other problems that cropped up until the hard changes were made to the style sheet. So I will go back to the drawing board and see if we can get this straightened out.

Thanks again to everybody for your input.

IdeasGirls,

:clap: Your fix worked. Thank you very much. After some checking, I found the correct version of the stylesheet that I needed to modify, made the changes in WinMerge, and uploaded it. My testing confirmed your wisdom in template design.

There is one other little quirk that I noticed. The button for "Search" needs to be enlarged in the header. It is fine in the sidebox since the text is smaller. The "h" gets cut off in the button in the header. Other than that, we are pleased with the layout of this template. I may update the buttons to get away from the "Classic" look though. Your color selection was very nice. I will try to remember to send you a link when I get the store open for business.

Thanks again.

That's great to know Treadle, I'll be waiting for that link.

Thanks for bringing this issue to attention since nobody mentioned it before I didn't notice.