It's hard to think of anyone who's done more in the recent template area of Zen Cart than Anne (picaflor-azul) and Ray (rbarbour). When you try to thank them, they each point at each other as the "hard worker." The new responsive_classic is just another example of what they can do for those of us using Zen Cart. Now, we can jump into the responsive area with a little less fear of the "unknown."
Taking the colors out of other stylesheets and adding them to the stylesheet_colors.css is a great help. It allows the average Zenner to quickly find and change colors in their site. And, who doesn't want pretty? They tell you to match business cards, stationary, and t-shirts with your company colors, so why not have that website match as well. We recently showed a customer just what it took to validate every page in their website for proper color. Three hours later, they realized just how big Zen Cart is and how many places the stylesheets touch the cart.
One thing we have noticed in modifying the template for several of our customers was that there were a few roadblocks to modification in the stylesheets.
When first we started working on the colors, we quickly found that a few things (#navMainWrapper for one) showed up in several places in the stylesheets_colors.css and sometimes even twice in the same call. We use Chrome with its developer tools to "inspect" our work and found one change did nothing. A closer look found the same call in another line so we de-selected it. That led to finding the third. Not a big problem but, for the less knowledgeable, things could get a little frustrating.
We found that many colors were not needed if the mainWrapper itself were the background. Then, just a few changes for sideboxes, products, etc. that were sitting on "top" of the main background could be changed making it a little simpler to change the "look." Of course, if you wanted each column to be a different color or wanted a white background (we call it the amazon look) you could just comment out the background for the #mainWrapper. There are several calls in the stylesheet_colors.css that sent us in circles until we decided to think layering just like photoshop.
When changing the background of one of the navWrappers, we found that the stylesheet call covered not only the background there but the color of a sidebox heading and the hover in another spot.
One color change was kicking our .... We couldn't figure out where the color was being called. A closer look at other stylesheets led to the discovery of color calls in stylesheet.css, responsive_tablet.css, responsive_mobile.css, responsive_default.css, and the elusive jquery.mmenu.all.css
We couldn't think of any situation where the colors would need to change for a phone or tablet. We could possibly see the need for a better presentation under the different brightness conditions under which phones and tablets are viewed. Still, we think it would be better for the beginner to have things arranged into one color location. Stylesheet_colors.css is the perfect place. Unfortunately (in our opinion), taking the stylesheet consolidation just one step too far created a problem and some confusion for the average joe.
While it is the perfect place, the grouping of calls in the stylesheet_colors.css tend to change things in far more areas than we wanted. Grouping items by color meant that changing something in a sidebox resulted in an unwanted color in the cartBox for the product page. It was the general consensus that we would just have to take stylesheet_colors.css and "tear it apart." We took all the calls and separated them into one item calls. We put all the "a" links in one area BUT, we separated them out into a, a:link, a:hover, a:active, and a:visited. And yes, some mobile devices do use hover. We then separated font colors to one group and background colors in yet another.
Of course, any validator worth using would invalidate the stylesheet we created as there are at times thirty or more call lines with the same color. We just broke it out to facilitate changing colors and put it back together after we were done. However, they are only warnings for the stylesheets. They will run correctly and they can be re-munged when the colors are set.
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!
We also noticed some trends in the coloring that could make life easier in the color change department. Most all the font colors were either white (#ffffff) or black (#000000) and most all the visited links were the same color. If we made all the link hovers and visited the same color and then made all the warnings the same color, we would have two colors to add to the mix. That would be a total of four to cover all text, links and warnings. We used a red (#cc3333) for the links and an orange (#cc6600) for the warnings.
The next thing we noticed was that these four colors and overall site colors made the selection and input backgrounds visually overpowering as they were generally a bright white. We found that two different shades of gray were more pleasing to the eye, so we added gray (#dcdcdc) and light gray (#eeeeee) to the mix.
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:
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:
If you started with a purple of #8844dd, you would have a final result of:
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.
Since we started this process during a site upgrade, we wanted to get everything "adjusted" so that it looked good for ours and our customers' sites. This meant more than just changing the colors of the site. We also manipulated the CSS to arrange items so that they presented themselves correctly on all devices. Log in and check out were two of the biggest changes we made as they really got mixed up in the mobiles.
So, along with the color changes, we threw in a few tweaks to make nice with the mobiles, tablets, and phones. You're welcome.
If you want to have something "to fall back on" lat9 has graciously made your first steps amazingly easy. We recommend using the Clone a Template mod to clone responsive_classic to a new template named for your site (something like new_template). This will leave responsive_classic unchanged in case you have problems making the changes.
Next, delete the includes/templates/new_template/css/stylesheet_colors.css.
The zip file has seven stylesheets and one folder included along with this HTML file. Only the following files will need to be loaded to the css folder of the template:
Upload all the stylesheets to your server in the includes/templates/new_template/css folder of your site. The last installation step is to go to the youradmin >> Tools >> Template Selection and change to the new_template
NOTE: If you decided to change the colors scheme AFTER uploading stylesheet_colors_split.css, be sure to use an editor that does NOT embed code into the file. Notepad works just fine for this purpose.
DO NOT USE Word, Dreamweaver, or any other mega-editor as they WILL embed code.
You will probably still need to do a little tweaking to get things just like you want them but, the majority of the work is done.
Want to have different schemes for different times of the year? Just use Clone a Template and change the colors as often as you like. Zen Cart only loads the template files selected in the Admin >> Tools >> Template Selection menu so there is no bloating.
Missouri is the "Show Me" state and many folks want to "see" this working before they jump in with both feet. Working examples can be seen at Hare Do and Russian Radiant SA. An example of a clean install with demos is available at Net Zen Commerce. The most current zip file for this information will be available for download at netzencommerce and updated as needed.
If you've found something to your liking here and you want to give something back to the community, just go to the Donate to the zen Cart Project page.
If you'd like to send a small amount to the JEANDRET team, please use the button below. Again, a big thank you to Zen Cart, Anne, and Ray for a great combination.