Support Thread - Responsive Color Changes for 155

[pixelpadre]

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.

[dbltoe]

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

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;);}

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.

[pixelpadre]

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.

[dbltoe]

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>

[pixelpadre]

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.

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

[davewest]

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.

[dbltoe]

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.

[dbltoe]

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.

[dbltoe]

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

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