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

[hflsales]

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

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

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

[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

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

[picaflor-azul]

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

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

[Music Man]

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

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

#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: www.santatheclaus.com

[picaflor-azul]

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

The "

#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: www.santatheclaus.com

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

Thanks,

Anne

[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

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

#logo{margin:10px 0;}

to

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

[picaflor-azul]

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

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

#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

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

[dbltoe]

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

Thanks,

Anne

More than happy to help out. Thanks for all you do.