Support Thread - Responsive Color Changes for 155

Now I got it, thank you for your patience.
I removed opacity 0,6 and got right color.

I will remove opacity from all lines, because I need to see original colors and to be able to identify what to change.

Unless there are some instructions, per say "map" which lines in stylesheet_colors_split.css control what on life page, how else (without proper education) to adjust store look to reasonable format?

Like you advised that line 204 controls top page color.
How to know what does line 205?

Is everything in this single file, like size of font, size of Input boxes, distance between lines, e.t.c?

Or use trials and errors to reverse engineer programmers work is my best way?

Thank you again.

I found good suggestion here

In my case english only web store it was sufficient to change only one file: /your_store/includes/languages/english.php

Find:

/ charset for web pages and emails
define('CHARSET', 'utf-8');

and replace with:

/ charset for web pages and emails
define('CHARSET', 'ISO-8859-1');

(do not forget to set permissions)

this resolved the problem.

I could not find YOUR_TEMPLATE specific file, so remember to to do the same fix after another upgrade.

P.S. Is there any way to remove temporary links after reply is submitted?
Another words: can I edit my old reply?

idtags:

Now I got it, thank you for your patience.
I removed opacity 0,6 and got right color.
I will remove opacity from all lines, because I need to see original colors and to be able to identify what to change.Congratulations, you have now created 21+ stylesheet errors that could really screw up the way a browser presents your site to the world. IF it shows it at all!
Sorry to be harsh but, you seem to be forgetting about everything else but color. Forum members have already mentioned tools you can use to inspect for color.

Firefox - Built In http://tinyurl.com/9bmrg4s
- Add-On http://tinyurl.com/6gmlg7o

Chrome - Built-In http://tinyurl.com/k9jft9l
- Add-On http://tinyurl.com/mxympj6

IE:yuck: - Built-In http://tinyurl.com/qrh9fq8
- Add-On No one cares enough to make one.

IMHO, you are doing what means failure for most new Zen Cart folks. You want to make your site look the best in the world, and to H E double-hockey sticks with selling UNTIL this thing looks just right. Reality is that any advice on color is at least six years old. We live in a society where people stand in front of a microwave and holler, "HURRY UP!"

In today's world of phones tablets, and other devices; people want the information and ease of buying. You can make an ugly site sell and a pretty site go bankrupt.

With the following steps, you can sell right out of the box with Zen Cart

1. Gather images, descriptions, weight, model numbers, taxable/non-taxable info, etc for your products. Be ready to group into categories.
2. Load Zen Cart
3. Enter necessary Store Information - Just go down the Configuration Sub-Menus and edit as needed.
4. Add Payment and Shipping Modules
5. Set Location and Taxes (if taxable products)
6. IF you are using other than English and US Dollar, set those in the admin Localization menu.
7. NOTICE we have prepared to sell BEFORE adding products.
8. Create Categories with sort orders set by 10s %% Some will move later and you'll have room to insert them.
9. Add Products to Categories with sort orders set to 10s %% Some will move later and you'll have room to insert them.
10. Catalog >> Options Names if your product(s) have options
11. If 8 above is true, Catalog >> Option Values for each option NOTE: add Please Select as the first option
12. If 8 above is true, Catalog >> Attributes Controller and add the Option Names/Values to your products. Make sure the Please Select Option Values are first for their product, sort order 0, and marked as Used For Display Purposes Only: and Default Attribute to be Marked Selected. That way, the customer can't check out without making a "real" selection.
13. We can now sell product! Even if it doesn't look "purdy", the items are available and the customer can checkout!
14. In the admin, Tools>>Define Pages Editor, edit each of the files listed there.
15. In the admin, Tools>>Layout Boxes Controller, turn off/on or move sideboxes to your liking.

With the above, we are now online selling product. We can now start massaging on a test site. Colors, position, design --- Number 45 on my list of 10.

Product description and ease of ordering will ALWAYS beat "purdy". I can't remember when last I saw a "purdy" site that didn't have poor descriptions, proper layout, ease of ordering, or something that made the shopping experience difficult if not impossible.

Thank you for your time and road map.

My original site was working fine and color has not much significance by itself.
Just after switching to responsive template my customisation which took years to tuneup was blown away.
Everything looked terrible: colors, fonts, wrong characters, input field became large and letters inside small.
Functionality though was working. I was able to sell.

So, I am not professional programmer, how to bring this in order?

My first move was to understand what controls the appearance. I found in this forum: .css files.
I started to "interrogate" them. The simplest to me is color. I was trying to find where codes for colors are?
So, simple logic tells me to search for HEX or RGB and find those lines and see which line are around.

The problem was disagreement between what I measured by "tool" and what .css file codes showed. So for me was important to understand what was wrong.

Now I understand that opacity 0.6 changes color appearance as well "probe result".
There will be there people like me, who did not programing all there life and many things of this nature are not obvious for us.
But we take time to learn and appreciate help people like you.

Thank you again.

Hello,

First off , thank you for making this add-on. Could you please help me with something. I was referred to your add on by a poster here.

https://www.zen-cart.com/showthread.php?219735-Responsive-Classic-%28built-in-to-Zen-Cart-v1-5-5%29-Support-Thread&p=1331962#post1331962
My question, from that post:

jasonshanks:

Hello,

I plan on upgrading to zencart 5.5.5e and responsive classic. I am currently using 1.5.4 and I am getting penalized by google for not being mobile friendly in search results. My site is missingcord.com. My plan is to rebuild a light (not all products or images added) version of my site on salvagecrate.com So i can get a good idea of how to get everything back and running when i try it on my main site domain. So far everything is running smooth. I really like how responsive classic looks. My problem is , i am trying to change the color of the menu button ( icon that looks like a stack of papers) in the mobile version to red like my top bar.

I noticed that when i changed line 3 in includes/templates/responsive_classic/css/stylesheet_colors.css to the hex color for black , i was able to get the default text color in the catalog how i wanted it. But the menu button in mobile also changed to black from that teal color you guys had.

How would i go about changing just that button to red like my top bar ? Do I need to make a new line with one of the options in line 3 ? Just cut and past it , while adding its on hex code ?

update: I just noticed the nav buttons on the top also turn teal when i mouse over them. Now i need to figure out how to fix that too lol

I installed your add-on on the test site I am working with to learn how to update my version of zencart to the latest with responsive classic for mobile viewers. This site is salvagecrate.com. My problem is that I would like to make the red color solid like it is when you click the menu bar in mobile version of the site. Instead of that light red color on the main page. In other words I would like to make it a single red color and not the lighter one. How would i change this ? I am reading the index file you uploaded and the quick state but i can't seem to find it. I am sure it is something very simple I am over looking , but for the life of me .. i can't find it.

Just an update to the above post . It seems that if i delete the ;background-color:rgba() after each hex line of code It gives me what i want. I just wanted to make sure I didn't mess anything up that I am not aware of.

Again , thank you so much for making this add on for us mere mortals.

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:shocking:
   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.:P

Ouch! There's a key on your keyboard named "Enter"! Separating those paragraphs by a little whitespace makes reading much more enjoyable on the eyes!:wacko:

Lol, give him HELL. Oh he deserves it lat9

Technically, that would be Enter, Enter. :smartalec: :P

dbltoe:

Technically, that would be Enter, Enter. :smartalec: :P
You are, of course, correct ... smarty-pants!

All that and you didn't touch on simple gradients with transparency..

background: -moz-linear-gradient(top,  rgba(235,132,159,0.52) 0%, rgba(164,0,0,0.99) 67%, rgba(164,0,0,1) 68%); 
background: -webkit-linear-gradient(top,  rgba(235,132,159,0.52) 0%,rgba(164,0,0,0.99) 67%,rgba(164,0,0,1) 68%); 
background: linear-gradient(to bottom,  rgba(235,132,159,0.52) 0%,rgba(164,0,0,0.99) 67%,rgba(164,0,0,1) 68%);

Which work excellent with CSS Buttons... without using transparency.

I don't want to get into the tomato - tomatoe thing here, but.... Transparency is attributed to images which cannot use the rgba. Opacity IS the reason for the Alpha call (the a in rgba). Your example is technically using opacity. And, yes it is used not only in straight colors but gradients, hovers, and other fun things. I was trying to keep it short of War and Peace.:P

(Note spacing /\ /\ /\ ) Without writing another book, a very good explanation/tutorial can be found at http://tinyurl.com/y929h5f6. I love the hover part even if it does probably muddy things by using "translucent." Knowledge is power.

Thank you for this plugin. I am still hoping it will be helpful, however, just like a previous poster, I am unclear how to identify what part of what file controls what. I uploaded the "default" stylesheet files and see that blue themed color. In fact, it is kind of close to my original site color so I kind of like them but I would still like to do some tweaking but I am really unsure where. (I have to admit that I am allergic to css ;) )

Could you please direct me? In the past, I have done a ton of trial and error, trying to search for a particular hex color in a css file (I think, but it was so long). The more I understand where what information is, the better I will be to do some tweaking.

Thank you again.

I posted a long version earlier but I guess Harvey blew it away.

For firefox browser -- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

For Chrome browser -- http://anti-code.com/devtools-cheatsheet/

I don't recommend using in other browser in windows. They're just not true to the look.

NOTE: Please consider unloading your double-barrel shotgun. It is not helping you. Most problems in any installation are cured by taking a direct shot at the problem. A sniper is more effective at eliminating a problem and they never use a shotgun. That means working that problem, and only that problem till the problem is solved. Then, and only then, should you move on to the next item. Respectfully, you are so into shooting the flies with a shotgun that you are not taking the time to read everything that comes with a mod and, occasionally, missing an important step in a forum response. There are many things under the "cellophane wrap" that needs to be understood. Different mod developers use different methods to present their instructions. Stop and smell the roses.

Like Hurricane Harvey headed our way, categories in storms are not simple mathematical progressions but logarithmic progressions. Growing from category 1 to 2 does not mean that the storm is twice as bad. Actually, it's much worse. Most storms are never 1 + 1 equals 2. Likewise, adding mods with problems to your cart is not mathematical but exactly like a tornado, earthquake, or hurricane. If you have a problem and, yet, continue to install other mods and try solutions other than what is provided, your problems will only fester to a point of frustration. The point where you will at best need to start over or, at worst, give up. Fertilizer is good for the roses but, too much will kill them.

:hug:

dbltoe:

I posted a long version earlier but I guess Harvey blew it away.

For firefox browser -- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector

For Chrome browser -- http://anti-code.com/devtools-cheatsheet/

I don't recommend using in other browser in windows. They're just not true to the look.

NOTE: Please consider unloading your double-barrel shotgun. It is not helping you. Most problems in any installation are cured by taking a direct shot at the problem. A sniper is more effective at eliminating a problem and they never use a shotgun. That means working that problem, and only that problem till the problem is solved. Then, and only then, should you move on to the next item. Respectfully, you are so into shooting the flies with a shotgun that you are not taking the time to read everything that comes with a mod and, occasionally, missing an important step in a forum response. There are many things under the "cellophane wrap" that needs to be understood. Different mod developers use different methods to present their instructions. Stop and smell the roses.

Like Hurricane Harvey headed our way, categories in storms are not simple mathematical progressions but logarithmic progressions. Growing from category 1 to 2 does not mean that the storm is twice as bad. Actually, it's much worse. Most storms are never 1 + 1 equals 2. Likewise, adding mods with problems to your cart is not mathematical but exactly like a tornado, earthquake, or hurricane. If you have a problem and, yet, continue to install other mods and try solutions other than what is provided, your problems will only fester to a point of frustration. The point where you will at best need to start over or, at worst, give up. Fertilizer is good for the roses but, too much will kill them.

:hug:

Thanks for the recommendation. Right now everything is "working" as it should with the FEW mods i added. The main reason i was working on more than one, at the time (and i was honestly trying mods that were addressing very different areas) was that when I was stuck, I could not expect one of you to be there within the minute so i would go on to a different mod that i hoped, would not interfere with the one i was waiting on.

Now, onto tweaking those colors for a general look (i won't do the fine details, but at least, i hope to understand the stylesheet better) and trying to understand that developer tool (that looks scary). Is there a dictionary that comes with that page of tools???

I am really lost. Maybe I am missing something too basic to be able to understand. So I'll ask one question:

Can someone indicate one clear and SIMPLE edit to make in the stylesheet and the stylesheet_color_splits to make sure I have things all in place and I would be editing the correct files to see SOMETHING changing from the "default" stylesheets that came with this plugin?

Maybe I have been looking at the wrong place for the last few hours?

CaroleAs:

I am really lost. Maybe I am missing something too basic to be able to understand. So I'll ask one question:

Can someone indicate one clear and SIMPLE edit to make in the stylesheet and the stylesheet_color_splits to make sure I have things all in place and I would be editing the correct files to see SOMETHING changing from the "default" stylesheets that came with this plugin?

Maybe I have been looking at the wrong place for the last few hours?

Give me your url and I will show you

gunni:

Give me your url and I will show you

http://challengemehq.com is where I am building my test site.
http://creationcassel.com/store is the current live site that I would try to "somewhat" copy (I am not going for fine details yet, at all, just get a feel for it)

CaroleAs:

http://challengemehq.com is where I am building my test site.
http://creationcassel.com/store is the current live site that I would try to "somewhat" copy (I am not going for fine details yet, at all, just get a feel for it)

@ http://challengemehq.com
@ stylesheet_colors_split.css:
around line 166:
#logowraper - change the color to red in the code and see the top part where the logo is going red (background).