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:

#pinfo-right {display:none;}

That line is substituting previous line 350:

#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

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

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..rowEven, .roeOdd{overflow:hidden;}should read```
.rowEven, .rowOdd{overflow:hidden;}

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

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 no longer available]

How this can be fixed?

Thank you.

From the other thread that you got "no suggestions" from > 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.php?218624-UTF8-Special-Characters-not-coming-thru-in-Meta-Title-Description.
Or... try the mod at https://www.zen-cart.com/downloads.php?do=file&id=1318