Support Thread - Responsive Color Changes for 155

[dbltoe]

Required reading for everyone should be https://www.w3schools.com/cssref/css_colors_legal.asp. Knowledge is power.
Soon, we will be using not only hex, rgb, and rgba but hsl and hsla as well. Finding colors with colorpicker is going to become a thing of the past.
Even McDonalds is getting away from the harsh red/yellow to softer hues in their stores. Did you know the harsh red/yellow was a psychological choice that makes the customer not want to stay. It caused them to eat and go. Today, the only place you find the red/yellow is the logo itself. Their background is an image of paper and the top menu overlay is rgba(0,0,0,0.5). That gives the cool effect of text sliding under the header as you scroll.
Softer hues can be helpful in not overpowering your product. A rather long, but good, read at https://www.helpscout.net/blog/psychology-of-color/ It pretty much covers all sides of the issue. Knowledge is power.
I get it that a great place to start is with the colors of your logo. We often take a customer's logo and blow it up till it pixelates. Using those pixels can be very helpful in color design. It is not so easy if your logo is mostly three colors that are commonly used for text, backgrounds, and warnings. Additionally, your logo is not always with you. Especially if you want to put emphasis elsewhere -- like on your product or the images on the page. Even John Deere's blog does NOT contain green or yellow. Probably because it would detract from the photos. You won't find much yellow or green on their product pages either. Interesting that many of the images on their build-your-own show "image not available." But, I digress.
The colors are, of course, your selection. The way you ADJUST/PRESENT them may need to be re-thought simply due to new methods being used. AND...adjusting without knowing what the result will really be can be dangerous.
idtags removed the opacity settings for each color. That would have worked IF he had also changed the call from rgba to rgb.
jasonshanks removed the complete rgba call from the stylesheet when changing the a portion of the rgba call to 1.0 would have given the same result BUT left the option open for later use.
To the problem of finding the colors. One needs to know things like active, hover, visited, focus, unfoccus, etc. These can be attributed to a tags and input tags as well as others. The a and input tags are sometimes the hardest to find with built-in or add-on developers tools. A link on your site can be be a certain color when never touched, another color when hovered over, another color when you're physically on the link, and yet another to show that you have already visited that link. Most developers tools do not show other than the "base" color of the link. The same is true with input as it can be static, focused, or nonfocused. One needs to find the general call and then search the responsible stylesheet for that call. This is one of the main things we did when we created the stylesheet_colors_split.css. Lines 1 thru 25 show the colors for standard links. Sitting there doing nothing and not having been touched, the color would be as shown on those lines. If you want to let someone know that it is a link, you can set a link color here. Most sites use a blue or underline. But, if that doesn't work with your scheme, you can always turn on the blue and underline when someone hovers over the link. That's covered in lines 26 thru 65 of the stylesheet_colors_split.css. Farther down are calls for visited and active links. Next, the focus colors. Finally, the font colors on lines 86 thru 155.
With the original stylesheet_colors.css, changing the color on line 2 of the stylesheet from black (#000000) to white (#FFFFFF) would change the color of:

1. the body text color of the entire document
2. several messageStack... calls
3. a table for quantity discounts
4. links in the Categories List Box
5. the store greeting link

Changing the color on line 3 effects hovers, visiteds, regular links, and headings h1 & h2
The responsive_classic template is a great addition to Zen Cart. IMHO, they just went one step too far and tried to make the css footprint smaller through consolidation. That, in turn, made it harder to manage colors.
Knowledge is power.
We are teachers at heart who try to pass it on. I could write a book!
Oh, wait. I did.