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

I think posts 96 and 97 above will answer your question.

Hello All,

I have read through the thread and I must confess that it's a bit advanced for my newby mind. Maybe I missed it in all the tech talk but is there some place that explains how the responsive template included in v1.5.5a should be implemented?

I have not used a responsive template before so I am feeling my way along and am seeking some insight on the basics of these type templates. When I do a fresh install of 1.5.5a is the responsive (mobile friendly) part automatically activated or do I need to tweak something to make it work?

Thanks for any pointers or links that might help me spin up to speed on responsive components of this version.

MM

Which template Zen Cart uses is controlled in the admin back end under Tools. You might want to take a look at https://www.zen-cart.com/wiki/index.php/Admin_-_Tools_-_Template_Selection and some of the other articles in the Wiki or FAQs

Music Man:

When I do a fresh install of 1.5.5a is the responsive (mobile friendly) part automatically activated or do I need to tweak something to make it work?

Go to admin-tools-template selection, and choose responsive classic.

dbltoe:

Which template Zen Cart uses is controlled in the admin back end under Tools. You might want to take a look at https://www.zen-cart.com/wiki/index.php/Admin_-_Tools_-_Template_Selection and some of the other articles in the Wiki or FAQs

Thanks for the link.....I think part of my problem is that I don't know exactly what to look for....I've found that if you don't and you just rummage through the wiki and FAQs blindly you can burn a lot of time and still not find what you're looking for... I was just hoping someone might be able to point me to a shortcut....

swguy:

Go to admin-tools-template selection, and choose responsive classic.

Thanks for the response SW.

I might not understand the basics of these responsive templates....

So if I "choose responsive classic".....does that change the webpage that a normal PC would see if they came to the site? Wouldn't want to sacrifice the site 'look' just to accommodate a lesser number of smart phones...

Music Man:

So if I "choose responsive classic".....does that change the webpage that a normal PC would see if they came to the site? Wouldn't want to sacrifice the site 'look' just to accommodate a lesser number of smart phones...

a) Yes it changes the look for all devices
b) Whether it's a sacrifice or not is in the eye of the beholder. :)

swguy:

a) Yes it changes the look for all devices
b) Whether it's a sacrifice or not is in the eye of the beholder. :)

Ahhh....IC. Well I suppose I could always switch back... :laugh:

I wonder if there's a comparison of how the 2 different looks would appear..... Just curious before I start all this what the outcome will look like....

So if I "choose responsive classic".....does that change the webpage that a normal PC would see if they came to the site? Wouldn't want to sacrifice the site 'look' just to accommodate a lesser number of smart phones...That "lesser number" is at 5 Billion with a B worldwide and climbing.

dbltoe:

That "lesser number" is at 5 Billion with a B worldwide and climbing.

Heh-heh..... Well you'd have to see my current site....it's a little graphics intensive....so I was thinking of that older style.... I'm starting to realize that it will have to change to keep up with current trends.... I don't use my phone to shop so I guess that also influenced my thoughts. Thanks for the wake up call..... :smile:

I have added the Blank Sidebox plugin. On mobile, the Blank sidebox is showing up at the top of my homepage. So I edited /includes/templates/responsive_classic/jscript/jscript_responsive_framework.php and added the line $('#blanksidebox').css({ 'display': 'none', 'visibility': 'hidden' });
It worked for my iPhone but the Blank sidebox is still showing up on my iPad. Any suggestions? http://heelsforless.com

Hi All,

I'm beginning to like this Responsive Template after paying with it for a bit. I am still learning my way around and would appreciate a little assistance from the more knowledgeable to help me learn how to navigate better.

A couple of days ago I posted a question in the "Templates, Stylesheets, Page Layout" Forum that probably should have been posted here instead. I didn't get a lot of response so I thought I would ask for some help in this thread since my question was probably more of a Responsive template related question. I hope I'm not stepping on some forum rules but I'm justifying my action by the fact that I've learned a bit more and now realize I can probably expect more help if I post in the correct location.... :blush:

Could someone tell me how to center a graphic (logo.gif) in the header? I was able to find the Zen Logo that is displayed with the installation and replaced it with my logo but my standard html techniques for centering don't work. That header.php file appears to have some advanced code that I'm not familiar with so don't know how to crack the code and center my logo..... I'm not sure if that logo is being controlled by the header.php file or is it possible it's being controlled (positioned) by a stylesheet or some other file?

Any help would be greatly appreciated....

The "logo.gif" IS controlled by several stylesheets. Four for just the logoWrapper itself. Of course, not all control the width, height, centering, float, etc.
With so many stylesheets controlling an area/item, it's easy to make a change for something and it also affects something you didn't want to happen.
I can make the image center with the stylesheet BUT, in our case, I had to change three settings.
In your case, it may be as simple as adding a call to the bottom of the stylesheet.css like ```php
#logo {text-align: center;}

We could do much better than a WAG if we had a link to your site.
If you use Firefox or (my current fav) Chrome for a browser, get the developer extensions installed.  They really help you "see under the hood."

Music Man:

Hi All,

I'm beginning to like this Responsive Template after paying with it for a bit. I am still learning my way around and would appreciate a little assistance from the more knowledgeable to help me learn how to navigate better.

A couple of days ago I posted a question in the "Templates, Stylesheets, Page Layout" Forum that probably should have been posted here instead. I didn't get a lot of response so I thought I would ask for some help in this thread since my question was probably more of a Responsive template related question. I hope I'm not stepping on some forum rules but I'm justifying my action by the fact that I've learned a bit more and now realize I can probably expect more help if I post in the correct location.... :blush:

Could someone tell me how to center a graphic (logo.gif) in the header? I was able to find the Zen Logo that is displayed with the installation and replaced it with my logo but my standard html techniques for centering don't work. That header.php file appears to have some advanced code that I'm not familiar with so don't know how to crack the code and center my logo..... I'm not sure if that logo is being controlled by the header.php file or is it possible it's being controlled (positioned) by a stylesheet or some other file?

Any help would be greatly appreciated....

If you post a link to your site I can take a look.

Thanks,

Anne

dbltoe:

The "logo.gif" IS controlled by several stylesheets. Four for just the logoWrapper itself. Of course, not all control the width, height, centering, float, etc.
With so many stylesheets controlling an area/item, it's easy to make a change for something and it also affects something you didn't want to happen.
I can make the image center with the stylesheet BUT, in our case, I had to change three settings.
In your case, it may be as simple as adding a call to the bottom of the stylesheet.css like ```php
#logo {text-align: center;}

> We could do much better than a WAG if we had a link to your site.
> If you use Firefox or (my current fav) Chrome for a browser, get the developer extensions installed.  They really help you "see under the hood."

Thanks "toe"....I appreciate the thoughts.

The "```php
#logo {text-align: center;}
```" didn't even phase it.....

Sorry for not including the site URL...I figured my question was general enough that it wouldn't be necessary to peek at the page.....I will include the link to the site below...it's in the early stages of design obviously....and the 'logo' is rather large...maybe too large..but right now I'm experimenting....I could always downsize if necessary...right now just trying to get it to work.

BTW.....could you offer any additional thoughts on the 'Wrapper" files you mentioned?  For a non programmer it's not obvious what they do much less how they interact with everything.  So not having a basic understanding makes it tough to try to adjust the look of things....since you don't know what you don't know.  

I did a search on the site and didn't find much to help me regarding 'wrappers'.  I have a copy of the manual (version 4) and I couldn't find any references to wrappers....and their site says they will not be doing an update of the manual/book for version 1.5.5.  I hate that because that manual/book was very helpful in the past....sigh....

I appreciate the help...very much.

So, the site is:  <https://www.santatheclaus.com>

Music Man:

Thanks "toe"....I appreciate the thoughts.

The "```php
#logo {text-align: center;}

> 
> Sorry for not including the site URL...I figured my question was general enough that it wouldn't be necessary to peek at the page.....I will include the link to the site below...it's in the early stages of design obviously....and the 'logo' is rather large...maybe too large..but right now I'm experimenting....I could always downsize if necessary...right now just trying to get it to work.
> 
> BTW.....could you offer any additional thoughts on the 'Wrapper" files you mentioned?  For a non programmer it's not obvious what they do much less how they interact with everything.  So not having a basic understanding makes it tough to try to adjust the look of things....since you don't know what you don't know.  
> 
> I did a search on the site and didn't find much to help me regarding 'wrappers'.  I have a copy of the manual (version 4) and I couldn't find any references to wrappers....and their site says they will not be doing an update of the manual/book for version 1.5.5.  I hate that because that manual/book was very helpful in the past....sigh....
> 
> I appreciate the help...very much.
> 
> So, the site is:  <https://www.santatheclaus.com>

On line 30 of the stylesheet.css file remove the float:left; and add text-align:center.

Thanks,

Anne

more on wrappers later but here's what you will need to do.
On line 30 of includes/templates/responsive_classic/css/stylesheet.css you will need to remove the #logo call from there. I looks like#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {/* float:left; */}.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {text-align:center;} #navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;}change to ```
[B]/[/B]#logo, [B]/[/B].centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {/* float:left; */}.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {text-align:center;}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;}

Then, change line 128 of the same file from```
#logo{margin:10px 0;}
```to```
#logo{margin:10px 0;text-align: center;}

dbltoe:

more on wrappers later but here's what you will need to do.
On line 30 of includes/templates/responsive_classic/css/stylesheet.css you will need to remove the #logo call from there. I looks like#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {/* float:left; */}.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {text-align:center;} #navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;}change to ```
[B]/[/B]#logo, [B]/[/B].centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {/* float:left; */}.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {text-align:center;}
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {margin:0.5em;}

> 
> Then, change line 128 of the same file from```
#logo{margin:10px 0;}
```to```
#logo{margin:10px 0;text-align: center;}

Yes, that is correct. It's been a long day for me ;)

Thanks,

Anne

Cascading Style Sheets (CSS) are the modern day way to control the look of a site. Each file for a site will have the extension .css and each will load when the site loads. They control everything from what the text will look like to how the site will print on a printer.
Stylesheets use wrappers to define areas in a site. Wrappers are like boxes, file cabinets, or the folders on your computer. Drive C:/ in windoze is an overall folder. Under it is the desktop, documents, downloads, etc. Each of those "wrappers" contain the contents of the area not unlike a file cabinet has drawers and folders. The headerWrapper contains all the header elements including some other wrappers. navMainWrapper (the "black stripe" at the top of your site), logoWrapper (contains the logo.gif), and navCatTabsWrapper (the "blue stripe" on your site) are the main ones in the headerWrapper.
Each wrapper has items contained in it listed as div (think of it as a folder in a file drawer). Inside the div (in this case the #logo div) we see what is being used for the logo. In your site, it tells us that the image is logo.gif located at includes/templates/template_default/images/logo.gif. It also gives us the alt text and title for the image. BTW, you should copy the logo.gif to the includes/templates/responsive_classic/images folder so you don't lose it later on an upgrade.
The next wrapper after the headerWrapper is the contentMainWrapper which contains all the information for the left and right columns along with the center column contents.
So, everything above the two side columns (Categories and New Products [more]) is part of the headerWrapper.
Google css3 for beginners for some excellent guides and tutorials.
Everything is a learning experience AND opportunity. As they say, "Learning is FUNdamental."

picaflor-azul:

Yes, that is correct. It's been a long day for me ;)

Thanks,

AnneMore than happy to help out. Thanks for all you do.:hug: