Support Thread - Responsive Color Changes for 155

[dbltoe]

Also mobile and tablet files need to be revise since logo is not showing on those devices.

Sorry, missed this one. The logoWrapper was intentionally set to display:none; in both as the logo did not play well in responsive. It was felt that the customer would know where they were and would be "put off" by having to scroll past the large (often entire screen) advertising to get to information. Both those are removed in the newer version.
However, I would suggest that anyone using this mod ensure that the logo does not overpower the mobile/tablet appearance.

[idtags]

Hello,

I migrated my question from other thread

I copy it again as no suggestion so far bring me to a lead.

I used all instructions to install Responsive Color Changes for 1.5.5 in combination with cloned classic responsive template.

https://www.zen-cart.com/downloads.php?do=file&id=2088

My thought was that all color changes in responsive template should be now in a single file: stylesheet_colors_split.css.

So I have my website, where on very top Photoshop probe tells me the color of "bluish" field HEX is #66a3c2. and RGB 102, 163, 194

My logic is that I should be able to find this color in file: stylesheet_colors_split.css.

But this color is not present in the file. I expect to see HEX #006699 and RGB 0,102,153 which is in the file.

And if I can not find it, I will not able to modify it.

I searched all website using Developer Kit tools and found nothing for both #66a3c2 and rgb 102, 163, 194. So where this color is generated?

I used f12 button to inspect element and none of these could be found.
My goal is to use the same colors and fill as original website was (none responsive).
Or I am fundamentally wrong? Responsive template can not have the same colors because something changed in general that I am not aware?

Where is my thinking wrong? How user customize colors, size and colors of fonts and distance between lines and input fields?

How to deal with "gost" colors?

Could be this customisation added in future to admin panel as other elements of structure?

My other thought is if this is a problem of the module "Responsive Color Changes for 155" and I better return back to the original design?

Any further help is appreciated.

[idtags]

I have another unusual thing: suddenly in description of the products web page generated question marks in solid diamond shape.

Attachment 17124

How this can be fixed?

Thank you.

[dbltoe]

These characters are not a result of css or this mod.
They are a result of upgrading from one database that does not use utf8 to the current Zen Cart character set which IS utf8.
You might find the right directions at https://www.zen-cart.com/showthread....le-Description.
Or... try the mod at https://www.zen-cart.com/downloads.php?do=file&id=1318

[idtags]

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?

[dbltoe]

From the other thread that you got "no suggestions" from

Another "trick" to use when finding colors and background colors is to look for a div that ends in "Wrapper." In the case of our mod, the navMainWrapper is where the color is called for that background. More specifically, line 204 of the includes/templates/responsive_classic/css/stylesheet_colors_split.css.

In fact, the color of your navMainWrapper IS located on line 204 of your stylesheet_colors_split.css BUT since you did clone it (we would have known this if the posting tips were ever answered), the link is includes/templates/responsive_idmedicaltags/css/stylesheet_colors_split.css.
Also, as I mentioned in my second answer, your color is #006699. Since your browser is new enough, it will never show as #006699 since it (and photoshop are using the rgba of 0,102,153,0.6
Without the 0.6 on the end of the rgba color, the browser would always show #006699 or #069 as it is a "websafe" color. Websafe colors should always be the first choice on a web page.
tutorial at https://www.w3schools.com/css/css3_colors.asp
Using the opacity allow you to soften a harsh, websafe color into something more pleasing to the eye.

[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.

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?

[dbltoe]

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 - 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.

[idtags]

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.

[idtags]

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!

I was asked in this thread about these 21+ stylesheet errors.
Where could you see them as errors?

I checked in all browsers and a few mobil devices https://www.idtagsonline.com/test/ colors appear are normal.

Thank you.