Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

My store is below. I have no plug-ins and everything has been working great since the end of March.

martynbaker52:

Hi all,
I've asked my freelancer (via UpWork) to update my site to 155a and to update my site to the "out of the box" responsive template. He advised there were "major issues". Is this correct or is he making this up?
Also does anyone want to share there zencart sites so that I can see what the live site looks like with the new template.
I've often said that a person can have a doctor's degree in keyboard and not know a thing about the mouse.
Your freelancer may know a lot about the keyboard (PHP) and just be able to wave the mouse (CSS) around a little.
Anne and Ray have done wonders for the Zen Cart community in the template area. Are there a few hiccups in the stylesheets? Yes, after all, pobody's nerfect:P
We are currently working on the stylesheets for 155a in an effort to make them easier for your freelancer (and anyone for that matter) to change colors. The reason for this is not that the stylesheets are wrong but that they are organized in a way that adds a degree of difficulty above and beyond the beginner/intermediate CSS knowledge.
There are minor mistakes like #mainWrapper and #contentMainWrapper both appearing twice in the call on line 18 of the stylesheet_colors.css but that shouldn't slow down an "expert." There are some colors defined that, just simply, don't show up in the cart. That really isn't a big deal. Neither is the fact that colors for the site are also defined in five other stylesheets. A qualified person could easily see them with the tools most of us use.
Your freelancer may be trying to steer you in a direction he or she is more familiar with and avoid having to learn something new or work out the kinks. We agree that changing a font color and having it change one link, another's hover, and another's heading font can be daunting. (see line 3 of stylesheets_colors.css) That's why we have been looking at changing the way folks can manage the colors.
As we see it, anyone with an intermediate knowledge of CSS should be able to get the job done with the existing stylesheets. Our goal in "rearranging" the stylesheets is to make it very simple for any store owner to manipulate the colors of their site. We did something similar for the classic template back in the stone age.:P
We visualize that there are basically nine colors involved in most sites. If we use one for warnings, hover/visited, form backgrounds, drop-down backgrounds we have used four colors. Add to that the use of white and black where needed for fonts and there are only three colors left.
As an example, we use three blues for one site. #6699CC (Blue Danube), #99CCFF (Anakiwa Blue), and #CAE5FF (Onahau) are really just baby blue, light blue and an even lighter blue. We use the medium as the main background, the darker for nav bars/headings, and the lighter in the presentation of products.
The result is that you can rapidly change colors with just a search and replace.
We're also adding rgba calls which allow the user to adjust the color's opacity in the stylesheet.
And, while we're at it, we're trying to fix any stray css errors and address the warnings.
Can be seen at aaawesometoyDOTcom/test_155a We will be using it with the #mainWrapper turned off.
haredoDOTcom is a working example of what we've done.

@dbltoe, the haredo site looks amazing! I had to look "under the covers" to believe that that was responsive-classic.

The aaawesometoy site's url, however, must have been misspelled; it goes to Google's search page.

lat9:

The aaawesometoy site's url, however, must have been misspelled; it goes to Google's search page.:blush:
Probably the result of a quivering hand from this old programmer.
Should be aawesometoyDOTcom/test_155a. We turned off the #mainWrapper to add more contrast and make the products stand out on the pages.

Haredo and I took four days going through the his site page by page, scenario by scenario. We still see things every time we look. Latest fun was what MagicThumb did to the column grid layout.

netzencommerceDOTcom is a work in progress using the demos and having everything turned on. Not quite through with it and not quite sure how things are showing up in the slideouts without being turned on (or is it un-turned off?) in the stylesheets. This site was a clean install then we dropped in our revamped stylesheets. Changing it to another color theme is a matter of searching for a color and replacing it with the new. This can be done with as little as three colors.

We found colorcombos.com and are using it for our color theme generation. We have some themes listed in the combos menu under latest. You'll have to look for the by dbltoe tag.

Discovered csslint.net in the process and that has been a very humbling experience. Says right on the site that they "will hurt your feelings." They do have an excellent wiki in github. https://github.com/CSSLint/csslint/wiki/Rules

The adventure continues....

Hello,

I am trying out 1.5.5 on a test site before I try upgrading my real one. I pretty much just installed zencart to a different domain , copied a backup of my main site to that domain ( I used a new database so I wouldn't screw anything up. ) Once I made made sure everything was working , i upgraded to 1.5.5 from 1.5.4. I noticed right away how much more mobile friendly responsive_classic is.
But now i have a problem , almost all of my modules no longer work. Credit card accepts and verified PayPal logo do not sure up in layout box manager unless i set the template to just plain old classic. Am i missing something ? or do these no longer work because of their age ?

Did you reset your sideboxes, in layout countroller page?

jasonshanks:

Hello,

I am trying out 1.5.5 on a test site before I try upgrading my real one. I pretty much just installed zencart to a different domain , copied a backup of my main site to that domain ( I used a new database so I wouldn't screw anything up. ) Once I made made sure everything was working , i upgraded to 1.5.5 from 1.5.4. I noticed right away how much more mobile friendly responsive_classic is.
But now i have a problem , almost all of my modules no longer work. Credit card accepts and verified PayPal logo do not sure up in layout box manager unless i set the template to just plain old classic. Am i missing something ? or do these no longer work because of their age ?
Most shipping and payment modules will need to be reinstalled on upgrade. Be sure to copy as many settings as you can before reinstalling.

dbltoe:

:blush:
Discovered csslint.net in the process and that has been a very humbling experience. Says right on the site that they "will hurt your feelings." They do have an excellent wiki in github. https://github.com/CSSLint/csslint/wiki/Rules

Thanks for the heads-up.

Put in my 154 custom stylesheet and it found only one error (color:#magenta; sic) but 557 warnings. WOW.

I have yet to bother with 155 responsive classic though.

dw08gm:

Thanks for the heads-up.

Put in my 154 custom stylesheet and it found only one error (color:#magenta; sic) but 557 warnings. WOW.

I have yet to bother with 155 responsive classic though.

csslint also throws warnings on "ID selectors" WOW and for "CSS3 not supported in IE6 or IE7" REALLY

@dbltoe, tools great but anyone that doesn't understand my above comment will spend endless hours trying to fix something that's not broken.

template_default

stylesheet.css

CSS lint found 0 errors and 201 warnings

The majority are for the use of "ID Selectors" maybe I'm stuck in an era that just doesn't get the "needs" or "complaints" of today's Zen Cart Community.

:dontgetit::shocking::censored::rant::bored::sadwalk::Flush:

I'm trying to configure the Responsive Classic template to have **only **a left sidebox. I've got the layout settings set to

• Globally disable the right sidebox
• Set the left sidebox width to 175px

When I display a page, the following widths are shown using FireBug:

• #contentMainWrapper ... 1427
• .col175 ....................... 158 + 6 (margin)
• .col795 ....................... 7 (margin) + 1121

That's a total of 1292 being consumed by the content -- where did the other 135 pixels "go". I see an unwanted line of background color on the righthand side of the display.

It gets weirder. On the less-populated pages, I'm seeing my .col795 section's width is 653.

rbarbour:

csslint also throws warnings on "ID selectors" WOW and for "CSS3 not supported in IE6 or IE7" REALLY

@dbltoe, tools great but anyone that doesn't understand my above comment will spend endless hours trying to fix something that's not broken.
Couldn't agree more. Not for the faint of heart. You have to reach a point between working and perfect that you can live with.

rbarbour:

template_default

stylesheet.css

CSS lint found 0 errors and 201 warnings

The majority are for the use of "ID Selectors" maybe I'm stuck in an era that just doesn't get the "needs" or "complaints" of today's Zen Cart Community.
In this case, I couldn't disagree more. Us "old" guys may have to make a few more stops on the road trip than we did in our youth but, we get there just as well. What's interesting is the ID Selectors are suggested by the inspector in Chrome.:wacko:
I hope that I'm keeping my mind active by constantly challenging my thinking. The community owes you and Anne a great deal of respect. :clap: There is always going to be those people who won't fish for themselves and the "what have you done for me lately" crowd. If they p|&& you off one day and not the next, then it's you that decides to be that way. I think you can just keep thinkin'; "No Thanks, I'd Rather Be Happy!" I know we're happy to have you.
:bigups:

Working on a method to initially perform a quick color change with the responsive_classic template. zip currently available at our test site of netzencommerceDOTcom. First category on the left. Remember, this is a work in progress. :artist:

lat9:

I'm trying to configure the Responsive Classic template to have **only **a left sidebox. I've got the layout settings set to

• Globally disable the right sidebox
• Set the left sidebox width to 175px

When I display a page, the following widths are shown using FireBug:

• #contentMainWrapper ... 1427
• .col175 ....................... 158 + 6 (margin)
• .col795 ....................... 7 (margin) + 1121

That's a total of 1292 being consumed by the content -- where did the other 135 pixels "go". I see an unwanted line of background color on the righthand side of the display.

lat9:

It gets weirder. On the less-populated pages, I'm seeing my .col795 section's width is 653.

I'm not spending to much time explaining because frankly It's getting old (no offense) Cindy.

This was changed in 2.0 of the DIY Package

2.) 2.0 adds 98 new (px & %) column calculations.
3.) 2.0 adds side column width flexibility in (10px increments).
4.) 2.0 allows ADMIN controlled side column widths using the existing ZC stock Column Width - Left and Column Width - Right configurations

Adding a width of 175 is creating col175 which doesn't exist because it's not an increment of 10

Change your 175 to 170 or 180.

Last Post

lat9:

I'm trying to configure the Responsive Classic template to have **only **a left sidebox. I've got the layout settings set to

• Globally disable the right sidebox
• Set the left sidebox width to 175px

When I display a page, the following widths are shown using FireBug:

• #contentMainWrapper ... 1427
• .col175 ....................... 158 + 6 (margin)
• .col795 ....................... 7 (margin) + 1121

That's a total of 1292 being consumed by the content -- where did the other 135 pixels "go". I see an unwanted line of background color on the righthand side of the display.
It turns out that the site's previous setting (Left Sidebox Width = 175px) confused the heck out of the responsive handling since the .col175 didn't have any styling within the responsive.css file.

Changing the site's settings to 150px for that sidebox width made everything "happy".

That leads to the question: Are the built-in column widths documented anywhere (besides inspecting the responsive.css file)?

lat9:

It gets weirder. On the less-populated pages, I'm seeing my .col795 section's width is 653.
setting up a test to look at it now. Are you moving all boxes to the left or only a select few?

Right now working on what the contentMainWrapper does with various screen sizes. The call .onerow-fluid is apparently the controller but a battle is going on between the stylesheet.css, responsive.css and responsive_default.css.

With a 768-1500 screen size, the stylesheet.css sets padding to 0, the responsive.css sets margin to auto !important, and the responsive_default.css sets the width at 100% !important.

With a screen size over 1500, the stylesheet.css set padding to 0, the responsive.css sets margin to auto!important, and the responsive_default.css has no width listing. When the customer's screen goes over 1500, it displays "dead space" on the left and right of the screen.

Adding```php
.onerow-fluid {width:100% !important;}

Just wanted to confirm that this didn't munge something elsewhere.
THANX

When I switch to the 'out of the box' version of this template, it doesn't center properly.

It is as though the whole center wrapper (impacted by .onerow-fluid) is set up as float:left inside its container rather than margin:0 auto.

Is that normal? If so...why?

(local install so no link to site possible)

Edit: Upon further investigation it appears to be because .col670 has an attribute of width:68.2594% when ideally it should be 100%

Or is it set at 68% for a reason.