Support Thread - Responsive Color Changes for 155

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.> 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> You can choose to edit the colors in the stylesheet_colors_split.css either before or after you upload the filesI'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:> 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.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```
.mm-menu.mm-theme-dark {background-color:#0f0360;);}/hamburger menu color/
.header {background-color: #03874f;);}

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.

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.

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.

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#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```
#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;}

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 .button-top{nargin-top:1px;}to```
.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```
#mainWrapper {background-color:#99ccff;background-color:rgba(153,204,255,0.6);}

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```
#navMainullia {color: #000; color:rgba(0,0,0,1.0);}
```Line 148 is now```
.normal_button {color: #000;}
```Line 265 (266 if you did not delete line 150 as noted above) is now```
#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

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.

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?

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.