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