Support Thread - Responsive Color Changes for 155

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

[dbltoe]

I installed the color changer 1.1a to test zencart build @ www.salvagecrate.com. I noticed in the CSS checker I get 1 error.

Sorry! We found the following errors (1)
URI : http://www.salvagecrate.com/includes...stylesheet.css
291 #filter-wrapper select

Is this normal ? Or did i mess something up ? This is not my live site , i am just trying to get ready before i try this on the main site.

@jasonshanks. It looks like you made an addition in that area and might have missed something when doing a copy and paste.
Although the line numbers are different, the line 291 in your stylesheet.css

#filter-wrapper select{width5%;height:35px;}

should be

#filter-wrapper select{width:5%;height:35px;}

Note the missing colon.

HTH

[jasonshanks]

could an addon have changed it ? I pretty much thought i just installed zencart and then color changer. I will do a wipe on the test site and see if i can try again. Thank you again !

[jasonshanks]

So I opened the stylesheet.css directly from the archive i downloaded from this site. And I don't see the missing colon in the fresh file either.

[dbltoe]

Yep, as I mentioned in the answer to idtags, it looks as if a mistake got in the upload of 1.1a

Line 291 of the download file should be

#filter-wrapper select{width:25%;height:35px;}

It's there in all the copies on my home machine.

[dbltoe]

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.

Well, the short answer is that you went through the stylesheet and meticulously voided any possibility of opacity.

Almost everywhere there's an rgba listing, you've changed it to 1.0 for opacity. In other words, don't use the features of the browser to soften contrast, I'll control what the customer gets. Interesting that you left it in some and didn't in others.

You have the same problem as jasonshanks on line 300 which leads me to think a bad file might have gotten into the last upload.

As far as CURRENT problems in you css, stylesheet_colors_split.css starts with

/* /* a link tags and their colors */ */

which should be

/* a link tags and their colors */

The system was ignoring line 2 (a:link {color:#000;}) because of that.

On lines 99 and 100 are examples of why I made the original comment. In your original haste to remove opacity, you left

.centerBoxContentsNew {color:#006699;1.0;}
.list-price {color:#006699;1.0;}

which should be

.centerBoxContentsNew {color:#006699;}
.list-price {color:#006699;}

You may want to google the use of : versus ; in stylesheets. The colon is a separator between the command and "how much" of the command. I.E. width:5%

The semi-colon tells the browser that you're through with that command and to move on. You have two semi-colons on lines 99 and 100.

The beauty of open source is that you can do what you want anytime and anywhere. You just need to be careful of what you insert in the process.

Since you've been working on this for over 8 months, I hesitate to send you back in to manipulating BUT, if you are using css button styling, line 64 of stylesheet_colors_split.css has the same color for the background and text.

W3C's jigsaw can be your friend or your nemesis.

[jasonshanks]

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....62#post1331962
My question, from that post:

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.