Responsive Classic Redesign Support thread

I just completed and submitted version 6.
This template has come a long way. Love to hear some feedback||

demo site
https://www.zencartdemo.com

Image Gallery update
https://www.zencartdemo.com/index.php?main_page=product_info&cPath=22&products_id=34

Just wanted to give an update regarding this template. I finally completed some milestones.

**Completed task **

• Combined all css into 1 stylesheet
• removed all of the unnecessary !importants (not a very fun task)
• removed css elements that were not active

I still want to get rid of some of the float elements and convert to flex to make this a true modern template. I should have this completed
and updated to github in about 2 - 3 weeks

Working on

• Remove floats and convert to flex. if necessary

This should make it so much easier to make changes to the template and become a true modern template. To be continued

Big update on the Responsive Classic Redesign. (Milestone Completed) V7.1 released

• Combined the template files into one css File.
• Removed all the !important from the css files
• CSS has been Validated.
• Updated OPC CSS Stylesheet

Would love to get some feedback.

This website has been tested and passed the following

• site accessibility
• W3C HTML Validated
• W3C CSS Validated
• Lighthouse Validated
• Colour Contrast Analyser

The updates are live on GitHub. I will update zencart plugin once I figured out how to important on the new zencart forum

This template offers a fully responsive layout for showcasing the Zen Cart Classic Template Rebuild.

Explore Demo site – https://www.zencartdemo.com

Download Template - https://www.zen-cart.com/downloads.php?do=file&id=2403

Github Repo - https://github.com/chadlly2003/zencart_responsive_classic_redesign

chadlly2003:

Big update on the Responsive Classic Redesign. (Milestone Completed) V7.1 released

• Combined the template files into one css File.
• Removed all the !important from the css files
• CSS has been Validated.
• Updated OPC CSS Stylesheet

Would love to get some feedback.

This website has been tested and passed the following

• site accessibility
• W3C HTML Validated
• W3C CSS Validated
• Lighthouse Validated
• Colour Contrast Analyser

The updates are live on GitHub. I will update zencart plugin once I figured out how to important on the new zencart forum

This template offers a fully responsive layout for showcasing the Zen Cart Classic Template Rebuild.

Explore Demo site – https://www.zencartdemo.com

Download Template - https://www.zen-cart.com/downloads.php?do=file&id=2403

Github Repo - https://github.com/chadlly2003/zencart_responsive_classic_redesign

Just gave it a quick look on my phone - loads fast and looks great! Thanks for your hard work.

I just submitted another update, v7.3. This version fixes several CSS issues related to changing the “Columns Per Row” setting in the back-end. I also removed all em and rem values from the font-size declarations for better consistency throughout the template.

This process has become much easier since I consolidated all of the separate stylesheets into a single stylesheet. It makes the CSS much easier to manage, troubleshoot, and maintain.

The template is getting very close to having all of Zen Cart’s features display and function correctly. My main focus now is making sure the template properly adapts when users change settings in the backend—such as Columns Per Row, Split Login Page, and other configuration options—without requiring additional CSS or template modifications.

The goal is to make the template as flexible and dependable as possible, so users can change Zen Cart settings and have everything continue to display correctly.

trying to get my head around how these templates work and I can round the edges of the boxes with border-radius: XXpx; which softens things up in a few places and doesnt appear to affect anything else

but the header and footer niggle me as does the cart box. Please see attached image for more info as to what i am looking at and what i would like to achieve.

Hope you can point me in the right direction

opps i see the zent softlious template responsive is V1 and your on V6 i will look at updating this first

MadWay:

trying to get my head around how these templates work and I can round the edges of the boxes with border-radius: XXpx; which softens things up in a few places and doesnt appear to affect anything else

but the header and footer niggle me as does the cart box. Please see attached image for more info as to what i am looking at and what i would like to achieve.

Hope you can point me in the right direction

opps i see the zent softlious template responsive is V1 and your on V6 i will look at updating this first

Madway section you posted in is for the Responsive Classic Redesign template not the Responsive classic template.
I see how that can be confusing. Responsive Classic Redesign template is the newest version

If you want to download the template see info below

Explore Demo site – https://www.zencartdemo.com

Download Template - [**https://www.zen-cart.com/downloads.php?do=file&id=2403**](https://www.zen-cart.com/downloads.php?do=file&id=2403)

post in the correct section and ill help you out

Thanks that's something else to get my head around, I have instead this update also, so have both systems side by side, which helps to some degree understand the things faced. they re the same entity in admin and rename of the folders and the names allows switching between the two.

Thanks for the offer of help though and will get things moved shortly

are we saying I need to be posting in https://www.zen-cart.com/threads/196499 I ask as its not immediately obvious given I installed 2.2.2 version and not a version 1 zencart.

thanks

Thank you chadlly2003 for the template and really appreciate your time and effort you have put into it 👍

I have installed your latest version 7.3 on a fresh install of zc v2.2.2 with PHP 8.2 with OPC and IH5 as main plugins.

I'm used to playing around with Responsive Classic and firefox inspect element to help me out but your template is not behaving for me as I'm used to. My knowledge is basic but gets me by.

I'm trying to centre the logo just on mobile/tablet but can't for the life of me figure out how?!

I did what you said to someone on the 2nd page and changed it but no luck, tried a few other things and can't get it to work.

Can you help?

Thanks,

rlexyd:

Thank you chadlly2003 for the template and really appreciate your time and effort you have put into it 👍

I have installed your latest version 7.3 on a fresh install of zc v2.2.2 with PHP 8.2 with OPC and IH5 as main plugins.

I'm used to playing around with Responsive Classic and firefox inspect element to help me out but your template is not behaving for me as I'm used to. My knowledge is basic but gets me by.

I'm trying to centre the logo just on mobile/tablet but can't for the life of me figure out how?!

I did what you said to someone on the 2nd page and changed it but no luck, tried a few other things and can't get it to work.

Can you help?

Thanks,

Post the url to your website or a screen shot.... This way i can give you exactly what you need so you can move forward. On another note you mentioned you are using IH5 as an image plugin. I dont think you need that as the template already does the work for you. Send me the url and we will take it from there.

Just a tip anytime you want to center something that is in a flex box the width must be 100%

chadlly2003

Just a tip anytime you want to center something that is in a flex box the width must be 100%

.parent-container { display: flex; justify-content: center; /* Centers horizontally (on the main axis) / align-items: center; / Centers vertically (on the cross axis) */ }

.parent-container {

display: flex;

}

.child-item {

margin: auto; /* Automatically sucks up all remaining space on all sides, perfectly centering the item */

}

Why you might have thought 100% width was required

If your flex container doesn't have an explicit size or isn't a block-level element spanning the width of the screen, it will default to shrinking tightly around its contents. In that scenario, the child item is centered within the flexbox, but the flexbox itself is small and off to the left side of the page. [1]

If you want the item centered in the middle of the entire screen, the parent container needs space to work with. You can give it that space using width, height, or viewports: [1, 2]

dbltoe:

chadlly2003

Just a tip anytime you want to center something that is in a flex box the width must be 100%

.parent-container { display: flex; justify-content: center; /* Centers horizontally (on the main axis) / align-items: center; / Centers vertically (on the cross axis) */ }

.parent-container {

display: flex;

}

.child-item {

margin: auto; /* Automatically sucks up all remaining space on all sides, perfectly centering the item */

}

Why you might have thought 100% width was required

If your flex container doesn't have an explicit size or isn't a block-level element spanning the width of the screen, it will default to shrinking tightly around its contents. In that scenario, the child item is centered within the flexbox, but the flexbox itself is small and off to the left side of the page. [1]

If you want the item centered in the middle of the entire screen, the parent container needs space to work with. You can give it that space using width, height, or viewports: [1, 2]

Hmm yes that would work. But what if you have other variables within the flex box.

chadlly2003:

Post the url to your website or a screen shot.... This way i can give you exactly what you need so you can move forward. On another note you mentioned you are using IH5 as an image plugin. I dont think you need that as the template already does the work for you. Send me the url and we will take it from there.

Just a tip anytime you want to center something that is in a flex box the width must be 100%

Thanks for your reply as I wasn't subscribed to the thread.

I have sent you a PM of the test domain.

The reason I use IH5 is because it was easier to add additional images in the past (I can now see in zc v2.2.2 it can be done easily when you add/edit a product), also it automatically makes thumbnails for images to load faster, I'm sure your template was adding images in full size and just shrinking them to fit.

Just curious, I understand you need a url to see how to fix a problem in action, but wouldn't instructions on centering the logo be the same as everyone that's using your template or are you just checking incase I have made different changes to your stock template? Just curious :)

Thank you once again for your time and effort!

rlexyd:

chadlly2003:

Post the url to your website or a screen shot.... This way i can give you exactly what you need so you can move forward. On another note you mentioned you are using IH5 as an image plugin. I dont think you need that as the template already does the work for you. Send me the url and we will take it from there.

Just a tip anytime you want to center something that is in a flex box the width must be 100%

Thanks for your reply as I wasn't subscribed to the thread.

I have sent you a PM of the test domain.

The reason I use IH5 is because it was easier to add additional images in the past (I can now see in zc v2.2.2 it can be done easily when you add/edit a product), also it automatically makes thumbnails for images to load faster, I'm sure your template was adding images in full size and just shrinking them to fit.

Just curious, I understand you need a url to see how to fix a problem in action, but wouldn't instructions on centering the logo be the same as everyone that's using your template or are you just checking incase I have made different changes to your stock template? Just curious :)

Thank you once again for your time and effort!

This will solve your problem. And if you need anymore help we are here

Path; includes/templates/rcr_***********/css/stylesheet_zcustom.css

Add this to line after line 196

#logoWrapper {
  display:flex;
  width:100%;
  justify-content: center;
}

The next change will prevent the cart from going off screen when you resize due to the change in the css

line 1149
find

.shoppingcart
  margin-left: auto;
  display: flex;
  min-height: 44px;
  min-width: 44px;
  position: relative;
  align-content: end;

and just remove this

 min-width: 44px;

rlexyd:

chadlly2003:

Just curious, I understand you need a url to see how to fix a problem in action, but wouldn't instructions on centering the logo be the same as everyone that's using your template or are you just checking incase I have made different changes to your stock template? Just curious :)

Thank you once again for your time and effort!

I just wanted to take a look at your site so I could provide you with the best possible solution. I’ve made quite a few changes and updates over the past few months, so I wanted to make sure the instructions I gave you would work with your specific version of the template.

You’re actually using a more up-to-date version of the template, so I just wanted to double-check everything before pointing you in the right direction.

chadlly2003:

rlexyd:

chadlly2003:

Post the url to your website or a screen shot.... This way i can give you exactly what you need so you can move forward. On another note you mentioned you are using IH5 as an image plugin. I dont think you need that as the template already does the work for you. Send me the url and we will take it from there.

Just a tip anytime you want to center something that is in a flex box the width must be 100%

Thanks for your reply as I wasn't subscribed to the thread.

I have sent you a PM of the test domain.

The reason I use IH5 is because it was easier to add additional images in the past (I can now see in zc v2.2.2 it can be done easily when you add/edit a product), also it automatically makes thumbnails for images to load faster, I'm sure your template was adding images in full size and just shrinking them to fit.

Just curious, I understand you need a url to see how to fix a problem in action, but wouldn't instructions on centering the logo be the same as everyone that's using your template or are you just checking incase I have made different changes to your stock template? Just curious :)

Thank you once again for your time and effort!

This will solve your problem. And if you need anymore help we are here

Path; includes/templates/rcr_*********/css/stylesheet_zcustom.css

Add this to line after line 196

#logoWrapper {
  display:flex;
  width:100%;
  justify-content: center;
}

The next change will prevent the cart from going off screen when you resize due to the change in the css

line 1149
find

.shoppingcart
  margin-left: auto;
  display: flex;
  min-height: 44px;
  min-width: 44px;
  position: relative;
  align-content: end;

and just remove this

 min-width: 44px;

ooh boy realized you wanted this to apply only to mobile and tablet.

You can add this to either the 768px or 992px media query in your stylesheet, depending on which breakpoint you want to use.

 #logoWrapper {
  width:auto;
}

.shoppingcart {
  min-with:44px;
}