Support Thread - Responsive Color Changes for 155

This is the establishment of a support page for add-on/modification Responsive Color Changes for 155.

The add-on/modification is the result of tweaking six of the existing stylesheets and changing the stylesheet_colors.css to make changing colors far easier.

Background:

• Consolidation of colors for version 1.5.5 may have gone a little too far as it did the final consolidation by color rather than area or wrapper. While the consolidation is NOT incorrect, it does cause some difficulties when changing colors. For example, a color change for the header will also affect a sidebox heading and a particular hover. A lot of stylesheet changing is needed to separate out the backgrounds from the fonts and the hovers. This add-on/modification provides a solution for that and more.
• We added rgba color styling to add opacity to the colors. This softens contrast and provides for some nice effects in modern browsers while still providing basic colors for the older browsers.
• When the stylesheets were revamped, we found several instances of call repetition and overuse. Some resulted in a few pages not working well on some mobile devices. Those adjustments are included in these files.

Support:

• This thread is meant to provide support as it pertains to specific methods used to adapt colors to Zen Cart.
• It is NOT intended to be used to teach CSS and stylesheets. Google "CSS3 for beginners" for some great tutorials. W3C is good.
• It is NOT intended to be a discussion base for "this looks better than yours" discussions. The beauty of open source is that you can change what you want to when you want to without having to ask permission.
• We hope it IS used to help your site become a better representation of your business.

Kudos:

• Thanks to rbarbour for bringing support for responsive templates to Zen Cart. :clap:
• Thanks to picaflor-azul for all her work leading up to the responsive_classic template used in Zen Cart 1.5.5. :hug:
• Thanks to haredo for sitting in the office with me for four weeks while we worked this out. We both learned a lot! :bigups:

Additional Info:

• Until it is published in the Plugins Section, this add-on/modification will be showcased and available for download at our test site.
• The test site is a standard installation of Zen Cart with the Responsive Color Changes for 155 and also includes the demo items as well.

NOTE: It does not help the forum if an answer is given in a PM. Keep the discussions here in this thread and we will answer in this thread.

The Plugin is now available at https://www.zen-cart.com/downloads.php?do=file&id=2088. Please provide any feedback good or bad.
THANX

This plugin is now part of my standard upgrade toolkit! Splitting out the coloring, which is the biggest challenge in a site's conversion to the responsive_classic template, makes an upgrade (or install) and conversion to that template with site-specific coloring much easier.

Thanks for the flowers. The first thing we do after changing colors is use the clone template mod. Thanks for that.

Hello dbltoe,

Thanks for this wonderful work...

Playing with it today after uploading the files (without any changes) the product details (model #, weight, etc.) won't show up, and I can see that even on your sample page they are not showing up.

I believe the culprit line is 515 (stylesheet.css) where you have:

Code:

---

#pinfo-right {display:none;}

---

That line is substituting previous line 350:

Code:

---

#pinfo-right{float:right;width:55%;padding:20px 0 0 0;}

---

Also if the description doesn't align properly I suggest people to pay attention to line 354

Code:

---

#productDescription{float:right;width:70%;padding:20px 0 0 0;}

---

which is making the description go to right and make the review buttons to come up to the left of description.

Looks like one of the fixes for a separate site got included in the mod submission.:blush:

Try inserting a line after #pinfo-left (around 348-350) with a small change

Quote:

---

#pinfo-right{float:right;width:70%;padding:20px 0 0 0;}

---

and deleting the line calling for the display:none of #pinfo-right (around line 515). This will return the listing and align it as a box to the width of the product description.

We also make a slight change to the line (around 354) adding a justified text for a cleaner look.

Quote:

---

#productDescription{text-align:justify;float:right;width:70%;padding:20px 0 0 0;}

---

Definitely not a required look but, WAY more pleasing to the eye than the centered text you see so much of these days.

I will post the changes later this evening.
THANX

I already did the changes as I mentioned and for #productDescription just left the justification and padding.

I tried your suggestion and continues miss-aligning the product description, so for now I commented it out.

------
Also the EZPages menu disappears from the header. You have it display:none as well. You should also fix that.

Found several instances where the stylesheet was modified for a specific site. Tried to keep them separate but %)# happens. Curious to see what's different between netzencommerce.com and your site. Can you provide a link? PM if needed or just post stylesheet.css you are using.
THANX

Sure, my sandbox is ideascg.com/sandbox

<<Let me know when you have seen it because I will be working on a new template coloring and I will need to switch>>

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

Version 1.1.0 has been submitted to the Plugins for update. Until approval, the file is available at our test site.

NOTE: We have upgraded the instructions to recommend lat9's Clone a Template as a simple way to create a copy of the respsonive_classic template for use with the color changes. Clone the responsive_classic to new_template (pick a name), change template to new_template in YourAdmin >> Tools >> Template Selection, then add this mod to the new_template.

Details are included in the index.html file.

Quote:

---

Originally Posted by dbltoe

Version 1.1.0 has been submitted to the Plugins for update.

---

So you know... you uploaded the wrong stylesheet_colors_split.css on that package. It's a gold color, not the original blue. :P

Version 1.1a.0 has been submitted to the Plugins

Preliminary testing shows that our mod will work fine with 1.5.5b. Remember that we suggest cloning the responsive_classic prior to applying the mod. Apply the mod to the clone and you will always have the responsive_classic to fall back on.

Just a minor correction not requiring a resubmission of the modOne mistake lost in the shuffle (Post #359 in the thread) is includes/templates/responsive_classic/css/responsive_tablet.css. Lline 183 in the module's version contains a spelling error.

Code:

---

.rowEven, .roeOdd{overflow:hidden;}

---

should read

Code:

---

.rowEven, .rowOdd{overflow:hidden;}

---

That mistake does not appear in any other template's stylesheet in the latest 155e release.

Quote:

---

Originally Posted by ideasgirl

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.

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.

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.

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

Quote:

---

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.

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

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?

Quote:

---

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

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by 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..

Code:

---

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/..._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:

Quote:

---

Originally Posted by dbltoe

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

For firefox browser -- https://developer.mozilla.org/en-US/..._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?

Quote:

---

Originally Posted by 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

Quote:

---

Originally Posted by 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)

Quote:

---

Originally Posted by 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).

Quote:

---

Originally Posted by gunni

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

---

Thanks! Now, I know I am working on the correct file.
Now to figure out all those other names of elements.

Now, if I change to something with a hex code, like #496e9c, it does not change. Does it have to have certain "code" to take on a hex?

Something must be wrong at another level. I am editing the file directly on the server (through my cPanel), and saving after making a change. But then, when I refresh my page, I don't see the change. Then I reverted the color to blue, but I still don't see it. I wonder if my cache is blocking it, as I can see the change on another computer. Hum... So the stylesheet change works... just not the ovbious way I was looking at it! Thank you very much. You kind of helped me solve one problem.

When chaging CSS files you need to make a hard refresh to the browser...
If working with Chrome, press Shift + F5
Regarding the Hex code, looks OK as you wrote it above (#496e9c) .

Quote:

---

Originally Posted by gunni

When chaging CSS files you need to make a hard refresh to the browser...
If working with Chrome, press Shift + F5
Regarding the Hex code, looks OK as you wrote it above (#496e9c) .

---

Oooooooooh! THAT might explain why I was not seeing anything. I never knew of this shortcut! Mystery solved!!! I can keep on going!

THANK YOU!

:thumbsup:

Hi,

I'm curious why this mod uses *both* rgb and hex?

It wouldn't bother me, accept that the last value of rgba is opacity. And I discovered that the default css included in the mod (stylesheet_colors_split.css) has many instances where hex is given along with rgba, but the rgba specifies something other than "1".

For instance, on line #23:
a.list-more {background-color:#6699cc;background-color:rgba(102,153,204,0.6);}

Perhaps other css is applying an opacity to that hex, so the rgba is matching it?

But this presents the very real possibility of accidentally using two totally different colors.

It's my understanding that there may be some advantage to rgba over hex for animations, but other than that rgba vs hex comes down to personal preference. I happen to prefer hex, but would happily switch to rgba on a case by case basis.

Is there some specific reason for calling both that I'm missing here? Like maybe some popular browser refuses to process hex?

I'm early on in my template and considering killing all rgba references that have a hex specified. If unexpected results crop up, I can deal with them as they come.

Can you see any reason I shouldn't do that?

Thanks!

EVERYTHING is optional. -- NOTHING is forever.

Here's the background. RGBA was added for three purposes.

First, and primary, is that it gives an illusion of items floating over or under a menu, etc. That feature alone alerts the mobile user that information may be above or below what is currently on the screen.

Second, it removes some of the "harshness" that results from using web-safe colors (did you know there are only 216?!?). Anything other than a web-safe color is just throwing the dice and hoping the customer's browser will get close to the color you selected.

Third, it was not added in case the browser could not handle hex but, the hex was added for browsers that could not handle the rgba as rgba and css3 are the next steps in web design. In fact, the browser has to accept CSS3 in order for the rgba call to work. You can google "css3 compliant browsers" to get a gist of which ones work presently.

That said, I have to reemphasize the beauty of open source. DO WITH AS YOU PLEASE.

If you want strict colors, either remove the rgba calls or change the percentage to 1 from 0.whatever. Shouldn't be any problem unless you miss a 0 or . in your replace.
Some would say you might be "clinging tenaciously to the trailing edge of technology." :P:smartalec:

That was an absolutely fabulous reply, thank you!

Man, I googled the heck out of "rbg vs hex", read gobs of articles, and found almost zip pointing to the advantages of rgb. Your explanation was concise, succinct, and straight to the point. Awesome.

Ok, so rgb is the way of the future. And hex covers legacy browsers. Neither hex nor rgb are "web safe" colors, in the sense that I can be sure every screen will represent exactly the same.

Alright, I'm on board with using both.

But I'm still nervous about using anything other than strict rgb colors, unless I can be certain an opacity is being applied to the correlated hex. I'd hate to go to the effort of building in backward compliance, only to accidentally make mistakes like putting black text over a dark hex/rgb color, never realizing the rgb was less than 1 but no opacity applied to the hex.

I mostly use the Chrome inspector while working. But default, the hex is usually struck out. Guess I'll just start checking the hex by disabling rgba in the inspector when I see them.

Thanks again. I'm really not clinging to *anything*, I'm just trying to learn!

No problem, learning is what I try to do every day.

The reason you see the hex un-selected is that your browser is CSS3 Compliant. No browser will attempt to show both, just the one that is most compatible.
It's a work in progress, but look at allpecansDOTcom/155e for an example of the background "peeking" through.

Note that the background image can be seen as you scroll up and down BUT, the sideboxes have a background that allows the text to still be legible without blocking the picture.

You'll note that the background-color for the left/right containers, productDescription, and cartInstructions have ONLY the rgba call in the stylesheet. While the white background is a good way to "clear up" the text, you would not want it to divert to solid white if the browser were not CSS3 compatible.

Now do the F12, find the indexDefaultMainContent and add the call background-color:rgba(255,255,255,0.2); to that element.

Note how it makes the text more legible. Excellent discussion at the link in post #33
/* background-color: rgba(255,255,255,0.3); */

Very educational, thanks!

I fiddled with your site. Tagging indexDefaultMainContent with the white rgba worked right out of the bag, of course. But interestingly (to me), I couldn't get the same effect with hex. I could have sworn I'd been able to achieve similar translucency with hex before. The hex for white is #FFFFFF and adding 33 (#FFFFFF33) should have gotten me there, but I couldn't do it. Maybe I used a webkit or something before? Or maybe I was thinking about applying translucency to layers in photoshop, totally unrelated to CSS. Dunno.

Anywho, rgba has firmly proved it's value to me! :)

Translucence is often misused when talking about transparency. Transparency is generally associated with clear. The more correct term for how well you can "see" through something is opacity.

Where you may be confused is that, in order to have 20% opacity in the #FFFFFF, the 33 is added at the beginning rather than at the end AND the result should be eight (8) versus six (6) characters. Had you entered #33FFFFFF, it would have worked IF your browser supported it.

It is the old method and doesn't give the non-compatible browser any alternative. Another reason for the dual calls in the css.:yes:

Mentioned it in an earlier thread but, http://tinyurl.com/y929h5f6 is a good read. Especially near the end of the article. Click on View Demo just before the Conclusion.:cool:

My browser must not support it because that's how I had it originally, with 33 in front.

Fabulous article, hit the nail right on the head. And the demo was highly cool, thanks!

Will this work with version 155e & 155f?

I've loaded it on all the 1.5.5 series and current github files for1.5.6. All work.

Will be looking at github files for 1.6.0 later this week.

Remember that we suggest loading the current ZC, use Clone a Template to make the template "yours", then load the mod to YOUR_TEMPLATE. That way, you always have the responsive_classic to fall back on if something breaks.

Thank you so much.

Just getting started with ZenCart. So far I like it much better than the old osCommerce, not that I was very good with that.

Again thank you for the quick reply, add-on and guidance.

Quote:

---

Originally Posted by jhande1

Thank you so much.
Just getting started with ZenCart. So far I like it much better than the old osCommerce, not that I was very good with that.
Again thank you for the quick reply, add-on and guidance.

---

No Problem. Got lots of relatives in the Keene, W Swanzey area. You'll find that, unlike other forums, the folks here at Zen Cart really are like family and want to help. That's one of the things that brought me here from OsC some 14 years ago.

Quote:

---

Originally Posted by dbltoe

No Problem. Got lots of relatives in the Keene, W Swanzey area. You'll find that, unlike other forums, the folks here at Zen Cart really are like family and want to help. That's one of the things that brought me here from OsC some 14 years ago.

---

Years ago the osc forum was a bit more friendly/family like but it seemed to change.

So far searching the forum here it does give a nice family feel, glad to be here.

Moved from CT to NH in 2000. Wife and I lived in Keene for about a 1 1/2 years, to much like city in CT. Moved 3 1/2 hours north where it's quite and rural.

Hello,

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.

I used https://jigsaw.w3.org/css-validator/

Should I even worry about this ? I noticed some big name sites like ebay and amazon give tons of errors too and they work just fine.

Attachment 17799

I love what you said in the photo about btw. I have it as a reminder so i keep to whats important. I saw what you said about css errors and just wanted to make sure I had none.

My actual site is http://missingcord.com. As you can see instead of trying to spend all day trying to make it pretty , I just used the default color for responsive classic and made my store logo colors match it.

Quote:

---

Originally Posted by dbltoe

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.

Quote:

---

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

Quote:

---

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

---

should be

Quote:

---

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

---

Note the missing colon.

HTH

Quote:

---

Originally Posted by idtags

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

Quote:

---

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

---

which should be

Quote:

---

/* 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

Quote:

---

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

---

which should be

Quote:

---

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

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 !

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

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

Code:

---

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

---

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

oh sorry about that. I actually didn't see your reply to the other poster. I was actually responding to your post to me. Hey typos happen , I kinda figured it was something like that anyway ! I am happy this is something that is easy to fix however.

Is there a way to change the colors on android? I made changes in the css that changed the colors on desktop, but android still the same.

As I posted in your other thread, your problem may be the cache on your phone. IF you are using our mod and have not left or added some other stylesheet, colors are not defined in any of the stylesheets for phones, tablets, etc.

Might we have a link?

Quote:

---

Originally Posted by dbltoe

As I posted in your other thread, your problem may be the cache on your phone. IF you are using our mod and have not left or added some other stylesheet, colors are not defined in any of the stylesheets for phones, tablets, etc.

Might we have a link?

---

I cleared the cache and I also tried my friends tablet with same result and I had never used his tablet before.

If you can't give us a link, can you mail us your friend's tablet?:P

Quote:

---

Originally Posted by dbltoe

If you can't give us a link, can you mail us your friend's tablet?:P

---

Thats too funny.

Link wont help. However I can give you the color css file or whatever file you think could be causing the problem.

Quote:

---

Originally Posted by pixelpadre

Link wont help. However I can give you the color css file or whatever file you think could be causing the problem.

---

You may think that, but (seriously) think about that.

Which would I rather do? Spend time going through your site to fix the problem or just send you a file/filename and be done with it?

The request for a link is in the Posting Tips for a reason. What could be done in minutes with a link, you want me to spend hours back and forth guessing each time?

I'm happy to help. I just need a little help from you as well. Like your original post. Maybe if we knew which colors you changed? Was is simply a font color change in a Nav bar? More involved I would GUESS since you are seeing a big difference.

Help us out here.

The problem does not exist for my earlier v155 sites just the latest 155f. Colors changed were the two bars above and below the header wrapper. I will also add that I changed the color of the hamburger successfully.

I would LOVE to be able to lead you out of the darkness on this, BUT...

1. If both the earlier and 155f sites are using responsive_classic with our mod, what is the difference that makes the colors not work? I ask because, if they are NOT both using responsive_classic with our mod, it stands to reason one would work and one might not. At least I hope so.
2. In the other post, you mentioned that you "changed line 27" and that worked. There is only one line 27 in any of the modded template's css files that deals with a color. That line is in the stylesheet_colors_split.css for an a:hover. You will need to make bookmarklets to view the hover on an Android phone.
3. I know where several bars are located (retired military), but you don't mention what bars you are talking about. Please don't answer, "the green ones.":frusty:
4. You did mention the headerWrapper, but you didn't specify whether you meant the headerWrapper call in the css (way far away from line 27 BTW) or the headerWrapper line when viewing the source, or some other location.
5. You also mentioned you managed to change the hamburger. That is a fontawesome icon that is controlled by stylesheet_css_buttons.css. It is not part of the mod and, unless physically changed, is the same all over as far as colors.

I'll make one last try for one eensy bit of information. What is the name of the file in which you changed line 27? See number 2, above.

Quote:

---

Originally Posted by dbltoe

I would LOVE to be able to lead you out of the darkness on this, BUT...

1. If both the earlier and 155f sites are using responsive_classic with our mod, what is the difference that makes the colors not work? I ask because, if they are NOT both using responsive_classic with our mod, it stands to reason one would work and one might not. At least I hope so.
2. In the other post, you mentioned that you "changed line 27" and that worked. There is only one line 27 in any of the modded template's css files that deals with a color. That line is in the stylesheet_colors_split.css for an a:hover. You will need to make bookmarklets to view the hover on an Android phone.
3. I know where several bars are located (retired military), but you don't mention what bars you are talking about. Please don't answer, "the green ones.":frusty:
4. You did mention the headerWrapper, but you didn't specify whether you meant the headerWrapper call in the css (way far away from line 27 BTW) or the headerWrapper line when viewing the source, or some other location.
5. You also mentioned you managed to change the hamburger. That is a fontawesome icon that is controlled by stylesheet_css_buttons.css. It is not part of the mod and, unless physically changed, is the same all over as far as colors.

I'll make one last try for one eensy bit of information. What is the name of the file in which you changed line 27? See number 2, above.

---

Sorry if I misled you. I am not using any mods, just classic responsive theme. The hamburger color is controllable in css. The stylesheet_colors.css can be seen here with line 27 mainwrapper (not headerwrapper) color...amongst others. floridavoterregistration.com/stylesheet_colors.css. Like I said, it appears this is a limitation of classic responsive out of the box. Not a big deal having no colors for the android version. I just wasted a lot of time trying to figure out why desktop changes but android does not.

Ok. So I cloned and installed. Slick. For whatever reason......out of the box CR will not modify android colors. Someone should chase that down because clearly, your mod will change android colors.

You've come across the major reason we created the mod for changing color. If you look at the stylesheet (you know you could have posted it with the # symbol) you'll see the following:

Code:

---

/*bof font colors*/body, .messageStackSuccess, .messageStackCaution, #tagline, #productQuantityDiscounts table, .categoryListBoxContents a, h2.greeting a {color:#000000;}
a:link, #navEZPagesTOC ul li a, a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, .sideBoxContent a:visited, fieldset fieldset legend, #navBreadCrumb a:visited, #siteinfoLegal a, h3.rightBoxHeading a:hover, h3.leftBoxHeading a:hover, .cartTotalDisplay, .cartOldItem, .specialsListBoxContents, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .list-price, .itemTitle a, h2.greeting, #icon, h1, .header .fa-bars {color:#05a5cb;}
a:visited, .cat-count, .itemTitle a:hover, h2.greeting a:hover {color:#666;}
a:active {color:#0000ff;}
h2, h3, .cartAttribsList, #cart-box {color:#444;}
.blue{color:#05a5cb !important;}
.blue:hover{color:#036f89 !important;}
.alert {color: #8b0000;}
legend, .specialsListBoxContents a, .centerBoxContentsAlsoPurch a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .centerBoxContentsNew a, .productPriceDiscount{color:#333;}
.messageStackWarning, .messageStackError, #navMainWrapper, #navMain ul li a, #navCatTabsWrapper, #navCatTabs li a, #navCatTabs li a:hover, #navCatTabs li:hover, #navEZPagesTop, #navEZPagesTop li a, .pagination li a, #navSuppWrapper, #navSupp li a, #siteinfoIP, #siteinfoLegal, #bannerSix, #siteinfoLegal a:hover, h2.centerBoxHeading, h3.rightBoxHeading, h3.leftBoxHeading, h3.rightBoxHeading a, h3.leftBoxHeading a, .seDisplayedAddressLabel, TR.tableHeading, #shippingEstimatorContent h2, #shippingEstimatorContent th, #checkoutConfirmDefault .cartTableHeading, #filter-wrapper, .navSplitPagesLinks a, .current, .productListing-rowheading a, .productListing-rowheading a, .prod-list-wrap, #productQuantityDiscounts table tr:first-child td, #reviewsWriteHeading, #sendSpendWrapper h2, #accountDefault #sendSpendWrapper h2, #gvFaqDefaultSubHeading, #checkoutPayAddressDefaultAddress, #checkoutShipAddressDefaultAddress, #accountLinksWrapper h2, h2#addressBookDefaultPrimary, #myAccountPaymentInfo h3, #myAccountShipInfo h3, #myAccountPaymentInfo h4, #myAccountShipInfo h4, input.submit_button, input.submit_button:hover, input.cssButtonHover, span.normal_button{color: #ffffff;}
.cartNewItem {color:#33cc33;}
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color:#ff0000;}
.categoryListBoxContents a:hover, .categoryListBoxContents:hover a{color:#05a5bc;}
.list-more{color:#fff !important;}
/*bof background colors*/
body, #mainWrapper, #headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #contentMainWrapper, #headerWrapper, .sideBoxContent, .rightBoxContent, .rowOdd, #productQuantityDiscounts table, #accountLinksWrapper {background:#fff;}
input:focus, select:focus, textarea:focus,  .specialsListBoxContents:hover, .centerBoxContentsSpecials:hover, .centerBoxContentsAlsoPurch:hover, .centerBoxContentsFeatured:hover, .centerBoxContentsNew:hover, .categoryListBoxContents:hover, .sideBoxContentItem:hover, .productListing-odd, #pinfo-right, #sendSpendWrapper {background:#f4f4f4;}
#mainWrapper {background:#00308f;}
.messageStackCaution {background-color:#ffff66;}
fieldset, .rowEven, #shippingEstimatorContent tr:nth-child(odd), #order-comments, ul.list-links li:hover, ol.list-links li:hover, #no-products, .listing-wrapper:nth-child(odd), #reviews-write-wrapper, #gvFaqDefaultContent, #checkoutPayAddressDefault .instructions, #checkoutShipAddressDefault .instructions, #addressBookDefault .instructions, #myAccountNotify, #myAccountGen, .reviews-wrapper, #accountHistInfo table td, #prevOrders td, #myAccountPaymentInfo, #myAccountShipInfo, #accountDefault #sendSpendWrapper{background:#eee;}
 .tableHeading{background-color:#e9e9e9;}
*************

---

Note that #mainWrapper is listed twice in the body color call and once separately. If I recall, it is listed in stylesheet.css as well.

Whichever loads last is king. You can put #00308f in a call twenty times, but if the last-loading stylesheet has #fff -- you're gonna get white.

AND>>>> Now that I've seen the site, I can tell you that the color is never going to show on any mobile phone UNLESS you force the phone to show at least one of the the side columns. By default, the left and right columns do NOT display on a mobile phone.

If you want to see that the color is really there, change the background on line 18 of stylesheet_colors.css to none or to the #00308F. Or, place your mouse over the right-hand side of your browser and drag the browser so it closes to the left. At approximately 1000px, the desktop will show the same as the android.

IOW, it's been doing what it was supposed to do by default from the beginning.

Couple of things. I am back to square one.

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144);} if I change the color on this line the desktop works as expected...but android is still stuck on a default color.

Also I am not following you on displaying left and right columns on an android.

Also dragging firefox to small window gives a different result from an android.

Unfortunately firefox element inspection is not possible on an android, otherwise we would not be having this discussion.

Quote:

---

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144);}

---

First, the line is invalid unless you add the a value to the rgba call. I don't believe the line will be accepted. Should be something like

Code:

---

204: #navMainWrapper {background-color:#0a4d90;background-color:rgba(10,77,144,0.7);}

---

Also, you need to run buy a lotto ticket while you can:P Or maybe not. Depends on whether or not you think it's lucky to find the two biggest things that go away on a mobile phone.

The mainWrapper is hidden by the center column in the phone view because the side columns (categories on the left and Search on the Right) are not shown on a phone unless they are forced to be. Otherwise they are accessed by the hamburger. The navMainWrapper is replaced in responsive mode by the css buttons with the hamburger.

So, you're two for two. Unless you get out the explosives and really blow up what Zen Cart is designed to do on a phone, you will never see the background colors of the mainWrapper OR the navMainWrapper. Depending on the tablet screen size, you may see the navMainWrapper on a tablet. The iPad shows the navMainWrapper in landscape but not portrait.

We are getting close but still far away. Your default powder blue with the hamburger is still on my android, yet my desktop shows a different color. And its not the cache.

OK folks here is the answer to my question. I had to find it on my own. The last two lines of the color css file are the ones you need to modify to change the color of your android.

.mm-menu.mm-theme-dark {background-color:#0f0360;background-color:rgba(15,3,96,1);}/*hamburger menu color*/
.header {background-color: #03874f;background-color:rgba(3,135,79,1);}

Big kudos to myself.

THIS MOD IS MUCH APPRECIATED, BUT LACKS SOME SERIOUS DOCUMENTATION STATEMENTS. MY PROFESSORS GAVE F'S FOR UNDOCUMENTED PROGRAMMING CODE.

I hate to put it this way, but I think we've established that you have some difficulty understanding what we've written. I don't mean that in a thoroughly derogatory way, but we've asked questions that you've ignored, given advice that you either didn't get or chose to ignore, and came to this support site for the color change mod that you were not even using.

We tried to explain the process in a manner that everyone reading (whether 20-year programmer or newbie) can comprehend what we are trying to do. I hope you are not a skimmer that says, "I've got this part, where's the final step."

The last two lines of the split colors were specifically added as we felt that they should match the theme and keep the defining colors in one file. Thus the ease of taking ONE file, editing all instances of Dark Blue, making it (let's say) PURPLE, and the result being that all headers (desktop, mobile, and tablet) would be the same Purple. No where in the instructions is it suggested or advised to start any other way than to do a blanket find and replace of the color you wish to change.

From the index.html file you'll see where I highlighted the color in question and our steps to change it.

Quote:

---

We now had a list of six colors that affected all BUT the menus/box headings, site background, and product display boxes. If we use three shades of a color or three colors that compliment each other, we can finalize our site with as little as nine colors. In the test build we made use of three shades of blue (#6699cc, #99ccff, and #ccffff) to complete our color scheme.So, the colors we wound up with are:

• Cardinal Red for links - {background-color:#cc3333; background-color:rgba(204,51,51,0.6);}
• Orange for warnings - {background-color:#cc6600; background-color:rgba(204,102,0,0.6);}
• Dark Blue for headings and menus - {background-color:#6699cc; background-color:rgba(102,153,204,0.6);}
• Blue for the site background - {background-color:#99ccff; background-color:rgba(153,204,255,0.6);}
• Baby Blue for product pages - {background-color:#ccffff; background-color:rgba(204,255,255,49,0.6);}
• Gray for some selection/input items - {background-color:#dcdcdc; background-color:rgba(220,220,220,0.6);}
• Lt Gray for other selection/input items - {background-color:#eeeeee; background-color:rgba(238,238,238,0.6);}
• White for fonts with dark backgrounds - {background-color:#ffffff; background-color:rgba(255,255,255,0.6);}
• Black for fonts with light backgrounds - {background-color:#000000; background-color:rgba(0,0,0,0.6);}

This color scheme can be seen at our color swatch listing. You'll note that all the colors are "web safe" and making a pattern can be fairly easy if you pick a starter dark color that can be lightened by shifting the hex codes to the left.

Notice the following for the three blues:

• #6699cc
• #99ccff
• #ccffff

Notice that, in order to make the next lighter color, we simply took off the first two characters of the hex code and added ff to the end.If you started with a purple of #8844dd, you would have a final result of:

• #8844dd
• #44ddff
• #ddffff

This is just a quick way of setting up three coordinating colors. Feel free to adjust to your heart's content!Under our system, you would simply search for and replace the nine hex- and rgb codes above to make your site use your own colors. You would need to search and replace the hex- and rgb codes separately as they are not always combined for opacity as in the examples above.

---

Again, in The Part Nobody Reads or How to Install, we mention that

Quote:

---

You can choose to edit the colors in the stylesheet_colors_split.css either before or after you upload the files

---

I'll admit here that perhaps we should have pointed back to the explicit color change procedures. Shame on us for not assuming the Dissection information would be passed over.

Finally, in further evidence that you may be a skimmer, the index.html provides the following about background colors:

Quote:

---

While we were at it, we decided to use some new coding in the stylesheet. Web colors can be a little harsh on the eyes and sometimes the contrasting colors are just a little overwhelming. With the arrival of HTML5 and newer browser versions, we can change {background-color:#6699cc);} to {background-color#6699cc;background-color:rgba(102,153,204,0.6);}. Both are calls for "Blue Danube" but the real difference is the fourth item in the rgba version. The r, g, and b are the standard numbers for the blue with an added item for opacity. The number can be from 0 to 1 and is called in tenths. 0 means the color is not seen while 1 means that blue is the only thing you can see. 0.5 would only half way hide the color behind it. This feature can lead to some very interesting color combos. One of those interesting results is on mobile devices where the site still shows through the navigation menu as you scroll.
Unfortunately, it can also cause the beginner/intermediate CSS adjuster to wonder why you see two colors with every rgba call. Some browsers are not able to use the rgba and need a "fallback" color. Hence, the two color calls inside the { } in the color call. When you use an inspector to view the CSS in a browser, you will usually see the #color lined out in favor of the rgba color. If you don't, it's time for a browser update!

---

So, your code of

Code:

---

.mm-menu.mm-theme-dark {background-color:#0f0360;background-color:rgba(15,3,96,1);}/*hamburger menu color*/
.header {background-color: #03874f;background-color:rgba(3,135,79,1);}

---

might as well be

Code:

---

.mm-menu.mm-theme-dark {background-color:#0f0360;);}/*hamburger menu color*/
.header {background-color: #03874f;);}

---

because rgba(3,135,79,1) is EXACTLY the same as #03874F AND defeats the whole purpose of opacity.

Sadly, I'm spending the time reiterating these things in hopes that others will read them. Your professor probably warned you about shortcuts.:no:

I read your brief thoroughly before making any changes to the file. And no, I am not a skimmer. I watched youtube videos on rgba as well. As I said, you cant inspect an adroid web page with FF. If we could, none of my posts would have appeared. Both you and the creator of classic responsive made no effort to address the java file css where the hamburger menu variables were buried quite deeply. In both cases, documentation is woefully lacking. What should have been a 15 minutes change ended up being 5 hours of digging. Hardly what I would categorize as skimming. Hopefully, this discussion will save other "skimmers" from searching google, youtube and zc forum for countless hours to find the fix for something that is, without a doubt, quite useful and desirable to anyone changing color scheme for CR with or without your mod. BTW, contrary to your post, the hamburger color is definitely determined in the stylesheet_color_split.css and stylesheet_color.css files.

Quote:

---

Originally Posted by pixelpadre

I read your brief thoroughly before making any changes to the file. And no, I am not a skimmer.

---

If that were really true, I would not have had to continuously beg you for information that the Posting Tips tell you will aid someone in helping you.

Make your assumptions as you will, but NEVER assume the person helping doesn't need the information they are requesting.

</done>

Quote:

---

Originally Posted by dbltoe

If that were really true, I would not have had to continuously beg you for information that the Posting Tips tell you will aid someone in helping you.

Make your assumptions as you will, but NEVER assume the person helping doesn't need the information they are requesting.

</done>

---

You asked for a link to my site which was ludicrous. You were relieved when I gave you the link to some other site. Even with that link, you still couldnt point me to the last two lines of the color file. The real link to my website was MichoacanExpress.com, which just goes to prove my point. YOU DIDNT NEED A LINK TO MY WEBSITE.

I explicitly told you what the problem was...you didnt need to see the website. You just babbled on and on about stuff that was totally irrelevant to the problem. Your attempt to provide a solution was basically a self defense strategy to preserve your mod.....if thats what you want to call it. I told you already that your work was appreciated, but that wasnt enough, you had to shoot the messenger too.

In retrospect...your mod was of little to no use. You suggest searching the entire color file for a certain color. Great, so that comes up with 50 results, all of which have to be investigated as somehow effecting the colors mods that I was chasing. You make it sound as though one can do a search and find one result. Not the case by a long shot. Grouping all of the colors together is a nightmare because your mod ASSUMES that some want to change all instances of a particular color in one fell swoop. That is not what anyone would want to do. Even if someone was going to do that, a simple find and replace would have accomplished the same thing without having a sorted list of colors. If this was truly a mod then an admin GUI would pop up and ask us to choose color for particular parts of the webpage. Again, no one is questioning your efforts for the greater good. But I doubt that many people are actually finding it useful enough to actually implement.

Update: Well a little bit of google and I learned that firefox has a Responsive option in TOOLS. You will have to reload it twice to see your site as a mobile. Once there, you can inspect all elements exactly like you do with desktop. I think many people thought they were stuck with resizing the window which wasnt of any use at all. Now you can see the entire mobile version and troubleshoot it. This is a very useful tool.

Quote:

---

Originally Posted by pixelpadre

Update: Well a little bit of google and I learned that firefox has a Responsive option in TOOLS. You will have to reload it twice to see your site as a mobile. Once there, you can inspect all elements exactly like you do with desktop. I think many people thought they were stuck with resizing the window which wasnt of any use at all. Now you can see the entire mobile version and troubleshoot it. This is a very useful tool.

---

Yap... been there for some time, called Responsive Design Mode Allows one to design and view in mobiles based on Android, IOS, Windoze, Tablets, and TV's.. Also to simulate load speeds, touch and such. Even design your own phone if you want to code some. Very useful... I use it quite often..

With Firefox on android Web Developer is an addon, but not very useful..

Many of us use or created tools or have FF addons, that are not widely used or known... which is why links are a quicker way of getting answers.

NOTICE:

Got tired of so many stylesheet changes involved in the original mod and just submitted version 2.0.0 of Responsive_Classic Color Changes. This change will work with both 1.5.5x and 1.5.6x sites and only involves adding two stylesheets and deleting/renaming one.

This version keeps stylesheet_colors_split.css to replace the stylesheet_colors.css and adds stylesheet_zcustom.css. The stylesheet_zcustom.css contains color changes to the mobile menu that would normally be in jquery.mmenu.all.css. That's the one that controls the colors for the mobile menu. Other color changes that would have been in some of the removed stylesheets are also included in stylesheet_zcustommmmm.css.

Stylesheet_zcustom.css is also the last stylesheet to load which means you can place site css changes/deletions/additions in this file. They will be performed and, when needed for repair/upgrade, they'll all be in one place in one file.

I'll post when the new version is available in the Plugins section. Meanwhile, a demo and the files are available at the links in my sig. Install/upgrade instructions are available in the zip file.

The new version with two stylesheets is available for download. There is a minor confusion in the installation that is corrected in version 2.0.1 I decided to place the two stylesheets in their own folder to separate what needs to go on a site from the other obligatory files.

2.0.1 has been submitted for download and is available at netzencommerce.com.

BUG FOUND IN RESPONSIVE CLASSIC:

In our further testing of the latest version of the Color Change Mod, we found an error in the existing files of the responsive_classic.

In line 233 of includes/templates/responsive_classic/css/responsive_mobile.css, the following needs to be changed from

Code:

---

#menu-search input[type=text]{vertical-align:top;display:inline-block;border:0;width:48% !important;height:32px;margin:0;font-size:0.9em;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

---

to

Code:

---

#menu-search input[type=text]{vertical-align:top;display:inline-block;border:0;width:58% !important;height:32px;margin:0;font-size:0.9em;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

---

This allows the customer to see all of the text in the input.

Spelling errors in stylesheet_zcustom.css.

Recently found two spelling errors in stylesheet_zcustom.css. These have been fixed in the github repository for the mod.

To manually change errors, lines 36 and 40 (of the original version) need to bed changed from

Code:

---

.button-top{nargin-top:1px;}

---

to

Code:

---

.button-top{margin-top:1px;}

---

There is an additional call in stylesheet_colors_split.css that won't show up unless the user changes the actual call later in the file. Line 159

Code:

---

#mainWrapper {background-color:#99ccff;background-color:rgba(153,204,255,0.6);}

---

should be deleted as that call is incorrect as far as color. Also, the call is correctly entered in line 203. Line 203 will become 202 after the deletion. You should see no difference in the colors of your site with this deletion.

In further looking over this mod for inclusion into 1.5.7, we've noticed that the navMainWrapper and some of the css buttons (if used) are using white as the font color.

Both the navMainWrapper and the buttons use the main color of this mod. That results in the white font looking "washed out" against the main color. Also, all other buttons, headings, etc using the main color have their font set to black (#000).

We've made three changes to the stylesheet_colors_split.css.

Line 13 is now

Code:

---

#navMainullia {color: #000; color:rgba(0,0,0,1.0);}

---

Line 148 is now

Code:

---

.normal_button {color: #000;}

---

Line 265 (266 if you did not delete line 150 as noted above) is now

Code:

---

#navMainulli {border-right:1pxsolid#000;}

---

Don't know if another release will be done before 1.5.7 is released but, the most current version is alwys available at our github repository.

Persistence is the sign of a great engineer.

Just submitted version 2.1.0 to the Plug Ins.

Fixed some minor spelling errors and added a variable system to prevent having to do massive search and replace operations.

Concerning the release of 1.5.7.

With the rise in litigation over website accessibility, we are having to rethink the color change mod and its use of opacity. Being able to "see" multiple layers can be a problem if all the layers have a background color. The combination of background colors and font colors often break the contrast rules of accessibility.

We have found that the only correct usage is in the menu header in a portrait view of a mobile phone.

This Color Change Mod can be used with 1.5.7 BUT, will take some thorough massaging to ensure that accessibility is maintained.

You can check your site's accessibility with the Web Developer extension in Chrome. Under Tools, click on Validate Accessibility.

We are working on a 1.5.7 color change mod that should be finished soon.

It will be 1.5.7 specific.

We will open a new support thread and github for this mod soon.

Is this near completion or will it be a while away?
I would like to change the responsive classic button on my new install of 1.5.7c.
Thank you

1.5.7c was adjusted such that the accessibility was corrected. Templates are trending away from the current to bootstrap. This puts any change to this mod on the back burner.

If you will follow the posting tips, we can probably help with your situation BUT, we need to be able to see the code. Pics may we worth a thousand words but they don't help with code.

If you don't want your site hit by the SEs just yet, use DOT for the period in yoursite.com

Quote:

---

Originally Posted by davewest

Yap... been there for some time, called Responsive Design Mode Allows one to design and view in mobiles based on Android, IOS, Windoze, Tablets, and TV's.. Also to simulate load speeds, touch and such. Even design your own phone if you want to code some. Very useful... I use it quite often..

With Firefox on android Web Developer is an addon, but not very useful..

Many of us use or created tools or have FF addons, that are not widely used or known... which is why links are a quicker way of getting answers.

---

FWIW: ad blocker plus will interfere with responsive display when using developer tools. At least it did for me in firefox. I couldnt figure out why the responsive images was missing several of the key parts of the website. Then I was struck with the thought of turning off ABP. Once I did that, the expected responsive version appeared perfectly.

Quote:

---

Originally Posted by pixelpadre

FWIW: ad blocker plus will interfere with responsive display when using developer tools. At least it did for me in firefox. I couldnt figure out why the responsive images was missing several of the key parts of the website. Then I was struck with the thought of turning off ABP. Once I did that, the expected responsive version appeared perfectly.

---

First of all, can you point us to the "ad blocker plus" mod?
Second, if it has a problem, why are you posting it in this thread?

Quote:

---

Originally Posted by dbltoe

First of all, can you point us to the "ad blocker plus" mod?
Second, if it has a problem, why are you posting it in this thread?

---

ABP is a addon in firefox. If its active, FF developer tools will not function properly. I discovered this myself while trying to use developer tools.

It's just a "for what its worth" posting. FF developer tools are often cited as a method to troubleshoot ZC problems. There may be some that are trying to use it with ABP active and not having luck getting the tools to work properly. It was just by chance that the thought occurred to me that ABP might be interfering.

As to your question about why post it here. It because, as a good boy scout forum user, I searched a string for information that led me to this thread. I thought it might be relevant to the thread despite the age of the thread.