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

Quote:

---

Originally Posted by 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

Code:

---

#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

Code:

---

/*#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;}

---

That stops the float left that keeps the logo on the left side of the page.

Then, change line 128 of the same file from

Code:

---

#logo{margin:10px 0;}

---

to

Code:

---

#logo{margin:10px 0;text-align: center;}

---

---

Thanks again "toe"....

I made the changes but it didn't change the look at all.... Even tried 3 different browsers....

I must not be holding my mouth right! :D

Quote:

---

Originally Posted by dbltoe

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

---

Wow...that was very helpful....Thanks for the 'tut'.... Especially the css3 reference.....and explaining what's in the wrappers was excellent...I was going after some of those areas once I get the header squared away and now I know where to at least start looking.

You're learning what NOT to do with stylesheets. ANYTHING that has the .css extension WILL load with the site.
If you want to save an "original" version of the stylesheet, DO NOT save it as sytlesheet_original.css. IT WILL LOAD and mess with your life.
Start making a habit of changing the extension to your initials. stylesheet.jet will not load.
The float you removed in the stylesheet.css is being reloaded by stylesheet_ORIGINAL.css

Quote:

---

Originally Posted by dbltoe

You're learning what NOT to do with stylesheets. ANYTHING that has the .css extension WILL load with the site.
If you want to save an "original" version of the stylesheet, DO NOT save it as sytlesheet_original.css. IT WILL LOAD and mess with your life.
Start making a habit of changing the extension to your initials. stylesheet.jet will not load.
The float you removed in the stylesheet.css is being reloaded by stylesheet_ORIGINAL.css

---

Oh MY! I shot myself in the foot! And I thought I was being smart.... HA....

That did it.....Thanks for the help....

I hope I can beg 1 more question?

How do I get rid of the ads in the footer? I tried eliminating the banner 5 out of the tpl footer file but that didn't seem to do the trick...

Backups ARE smart. You just have to be careful how they're done. Stylesheet backups should never have .css. File backups should never have .old or .bak. That's why I use .jet. Won't work well if your name is John Paul Getty:P

Quote:

---

Originally Posted by dbltoe

Backups ARE smart. You just have to be careful how they're done. Stylesheet backups should never have .css. File backups should never have .old or .bak. That's why I use .jet. Won't work well if your name is John Paul Getty:P

---

Heh-heh.... good one...

BTW....I was modifying the post when you wrote this....did you happen to see my question on footer? Sorry to be such a pain but I feel like I'm on a roll now....and you gotta know it's ALWAYS a good thing when you can help out old Santa! :P

Messing with stylesheets is one thing but, when you start messing with the PHP code, it generally turns out more "naughty" than "nice." Adjust your banners and sideboxes in the Tools menu of the admin.

Quote:

---

Originally Posted by dbltoe

Messing with stylesheets is one thing but, when you start messing with the PHP code, it generally turns out more "naughty" than "nice." Adjust your banners and sideboxes in the Tools menu of the admin.

---

Yeah....I knew I could turn the footer off in the Tools menu.....didn't realize I could "adjust" banners there too....

Thanks for all your help.... You've been very generous with your knowledge....

Quote:

---

Originally Posted by pixelpadre

Ah.

So your fix wont work because ez pages wont be displayed on the off canvas mobile menu unless ez pages is checked for Header.

---

Is there anyway to make these show on the mobile phone template without setting them to Header? I want them on mobile but I don't want the header on the full size template. BTW the menu shows on mobile but shows zero entries...

Quote:

---

Originally Posted by gruntre69

Is there anyway to make these show on the mobile phone template without setting them to Header? I want them on mobile but I don't want the header on the full size template. BTW the menu shows on mobile but shows zero entries...

---

The beauty of responsive is that you can do something different with almost every size and shape.

You can turn the header off in everything but mobiles and tablets and turn it on for only portrait or landscape. You just put the entries in the proper stylesheet.

You'll find that the responsive_tablet and responsive_mobile have both landscape and portrait sections. Be careful not to delete a random } They work around a lot of calls to make the different "looks."

BTW, remember that ezpages will not show up if they do not have a sort order. Common mistake to just turn on the footer or header and forget to give the pages a sort order.