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.
Re: Support Thread - Responsive Color Changes for 155
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
Re: Support Thread - Responsive Color Changes for 155
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.
Re: Support Thread - Responsive Color Changes for 155
Thanks for the flowers. The first thing we do after changing colors is use the clone template mod. Thanks for that.
Re: Support Thread - Responsive Color Changes for 155
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:
Code:
#pinfo-right {display:none;}
That line is substituting previous line 350:
Code:
#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
Code:
#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.
Re: Support Thread - Responsive Color Changes for 155
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
Quote:
#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.
Quote:
#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
Re: Support Thread - Responsive Color Changes for 155
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.
Re: Support Thread - Responsive Color Changes for 155
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
Re: Support Thread - Responsive Color Changes for 155
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>>
Re: Support Thread - Responsive Color Changes for 155
Also mobile and tablet files need to be revise since logo is not showing on those devices.