Printable View
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/zenca...assic_redesign
Good work!
You make responsive_classic great again
All the button and form stuff so much better and really modern now.
A great restart for responsive_classic
I tried it too and I must say design is great! It looks modern, light and nice.
After using it for a while I found few ponits where I was not too happy. Mainly it does not feel responsive... It is designed for mobile phone and when using a desktop with a big screen, 1/3 of the screen space is just white... One strip on the left and one strip on the right.
Then when you try to customize, you realize everything is 'rigid'. I had hard time updating the plugin Language and currency in Header for this template,especially for mobile.
In general, if you want a plugin to be used as a base template, it needs to be easy to modify/customize. Making it more responsive is probably the solution.
Although design and look in general is great, usability is not there for me.
Don't get me wrong, I know you put a lot of work in it and I am really happy to see a new template like this and I really would like to see it bring something more than a new look (compare to old templates Classic and Responsive Classic).
I hope I get the main focus point
This template has never been full-width on desktop
And easily fixed by dropping/changing the max-width on .onerow-fluid.
pilou2,
This site should be very easy to make adjustments. I am not sure why you fell it is not responsive. This has been tested on all devices with no issues to report. Can you send me a screen shot of the white space you are talking about.
Is that white space showing in the demo site.?
I can help you with this if you define exactly where your having an issue.
Honestly, I am not sure anymore what 'responsive' means... I was hoping the template would adapt to different screens, both in size and elements positioning like the ZCA Bootstrap template.
On Desktop, I am actualy between the Classic template and the Responsive Classic one speaking of space use. Here is a screen shot:
Attachment 20953
You can see on top right I added a currency link in header which uses 2 lines although it could be on one only with all this space available in the middle (search field). It seems the right container in header is fixed width.
if I understand correctly if you want to make the template full with you can do this
path stylesheet_zcustom.css
.onerow-fluid {
margin: 0 auto !important;
width: 100% !important;
max-width: 1280px !important; <!-- remove this -->
}
path stylesheet_colors.css
#headerWrapper {
border-bottom: solid 1px #ccc;
padding-bottom: 2rem;
margin-bottom: 1rem !important;
max-width: 1280px !important; <!-- remove this -->
margin-left: 15px !important;
margin-right: 15px !important;
If you want to fit your item on one line
go to
path stylesheet_zcustom.css
.shoppingcart {
grid-template-columns: auto auto auto; <!-- add another auto -->
text-align: center;
gap: 1.5rem;
margin-top: 0px;
}
Note if you look at the css it is all grid based. So grid template columns controls how it is being displayed.
Just to be clear if you want to add another icon next to shopping cart use css grid to create the columns.
In CSS Grid, grid-template-columns: auto defines that each column will be sized automatically, primarily based on the content within the column. This means the width of each column will adjust to fit the widest content it contains, and the grid will expand to accommodate new columns as needed
1st step ** Add your content within the .shoppingcart div
<div class="shoppingcart">
<a href="https://www.zencartdemo.com/index.php?main_page=login" aria-label="Login Details">
<i class="fa fa-user spacer2 navitem1t" aria-hidden="true" role="img" aria-label="Login icon"> </i></a>
<a href="https://www.zencartdemo.com/index.php?main_page=contact_us" aria-label="Contact Us">
<i class="fa fa-envelope spacer1 navitem2t " aria-hidden="true" role="img" aria-label="Contact icon"> </i></a>
<a href="https://www.zencartdemo.com/index.php?main_page=shopping_cart" aria-label="Shopping Cart">
<i class="fa fa-shopping-cart fa-fw badge fa-lg navitem3t" aria-hidden="true" role="img" aria-label="Shopping cart icon">
<span class="cart-count">0</span></i></a>
</div>
2nd step ** update css grid
Path: /stylesheet custom.css
we are only editing grid-template-columns
To make it resposnive
find this
@media (min-width: 576px) {
.shoppingcart {
grid-template-columns: auto auto auto;
text-align: center;
gap:1.5rem;
margin-top: 0px;
}
replace with
@media (min-width: 576px) {
.shoppingcart {
grid-template-columns: auto auto auto auto;
text-align: center;
gap:1.5rem;
margin-top: 0px;
}
}
}
Thanks for these information, it actually removed width limit on center column and header.Quote:
Originally Posted by chadlly2003
This does not really work here because the languages and currencies links are kind of dynamic. If there is only one language or one currency, nothing is displayed. If there is 2 or 3 then an icon for each is displayed and if there is more, one icon with a drop down menu is displayed. Which means there could be between 0 and 4 icons to display depending on ZC settings.Quote:
Originally Posted by chadlly2003
I can modify plugin to not display more than one icon per language/currency, but their would still be 0, 1 or 2 icons to display.
instead of grid lets do flex
find this
.shoppingcart {
grid-template-columns: auto auto auto; <!--- remove this -->
text-align: center;
gap: 1.5rem;
margin-top: 0px;
replace with
.shoppingcart {
display:flex <!-- this will solve your issue -->
text-align: center;
gap:1.5rem;
margin-top: 0px;
It was no right place to do the change, it was a little bit higher in the file. I replaced:
By this:Code:.shoppingcart {
margin-left:auto;
display:grid;
grid-template-columns: 1fr auto;
min-height: 44px;
min-width: 44px;
position: relative;
align-content: end;
}
And now I can insert icons for languages and currencies on one line in header.Code:.shoppingcart {
margin-left:auto;
display:flex;
grid-template-columns: 1fr auto;
min-height: 44px;
min-width: 44px;
position: relative;
align-content: end;
}
Attachment 20954
Thanks!
Have you tested how products are displayed at various lists with different length of title, description (preview), shipping information, tax addon price and reduced price?
At classic responsive_classic the layout isn't good.
Attachment 20971
Looks like a good restart for responsive classic.
Why was EZ page header removed though?
How can it be displayed again like on the original responsive classic?
Thank you
If you want the ez pages back on the top on the header you can add this piece of code below.
Path: \includes\templates\responsive_classic\common\tpl_header.php
For testing purposes i put it on line 43 right after the welcome note.
Code:<div id="navSupp">
<ul>
<li><a href="<?= HTTP_SERVER . DIR_WS_CATALOG ?>"><?= HEADER_TITLE_CATALOG ?></a></li>
<?php
if (EZPAGES_STATUS_FOOTER === '1' || (EZPAGES_STATUS_FOOTER === '2' && zen_is_whitelisted_admin_ip())) {
require $template->get_template_dir('tpl_ezpages_bar_footer.php', DIR_WS_TEMPLATE, $current_page_base, 'templates') . '/tpl_ezpages_bar_footer.php';
}
?>
</ul>
</div>
Ignore what I wrote above. I was not thinking clear.Quote:
Originally Posted by chadlly2003
What you are looking for is just hidden
path: includes/templates/responsive_classic/css/stylesheet_colors.css
Find this line 122
#navEZPagesTop li a {
color:#FFFFFF;
}
replace with
#navEZPagesTop li a {
color:#000;
}
line 289
Find this
#navEZPagesTop {
display:none;
}
replace with
#navEZPagesTop {
display:block;
}
Attachment 20973
To answer your questions: the classic redesign should display well across all devices and on desktop, even with longer titles and descriptions. The site is built using CSS Grid and Flexbox, which makes layout adjustments straightforward. If you come across any issues, feel free to point them out — I can make quick updates. Also, if you have suggestions for version 2, I’m open to ideas and happy to discuss new features or improvements.Quote:
Originally Posted by Shop Suey
Thank you for that.Quote:
Originally Posted by chadlly2003
I am still trying to figure how you built the header and i may be a bit of an ask:
How can I get the hamburger menu on the right side?
I think it will be more "clean" look if logo is on the left by itself and all the menu on the right side. ( Just my personal preference)
Thank you
To get the hamburger on the right side are just need to make some minor adjustments to the css. Let me know if you need anything else.
Step 1
Path: \includes\templates\responsive_classic\css\stylesheet_custom_navigation.css
line: 12
find this
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}
replace
.sidebar {
position: fixed;
top: 0;
bottom: 0;
right: 0;
width: 270px;
background-color: #fff;
transition: transform 0.3s ease-out;
}
find this
line40
.sidebar.is-hidden {
transform: translateX(-300px);
}
change to
.sidebar.is-hidden {
transform: translateX(300px);
}
Step 2
path: includes\templates\responsive_classic\css\stylesheet_zcustom.css
Paste at bottom of page
.nav_spacer {grid-template-columns: 3fr 1fr auto !important;}
.nav_spacer .row {order:2}
.baralignment {margin-left:1rem;}
@media (min-width: 576px) {
.nav_spacer {grid-template-columns: 3fr 2fr auto !important;}
}
@media (min-width: 992px) {
.nav_spacer {grid-template-columns: 1fr 2fr 1fr auto !important;}
}
Attachment 20975
Thank youQuote:
Originally Posted by chadlly2003
Another question:
How do I get the logo to be in the center of page on desktop?
I removed search_header via admin but I can't figure how to have the logo in the middle of the logoWrapper.
Thank you for the assist
Just put this piece of code at the bottom of stylesheet_zcustom.css. I believe this is what you are looking for
Dont forget to remove the search bar.
Attachment 20976Code:.nav_spacer {
display: grid;
grid-template-columns: auto auto auto;
justify-items: left;
align-items: center;
margin: auto;
}
#logoWrapper {
display:flex;
justify-content:center;
}
@media (min-width: 992px) {
.nav_spacer {
grid-template-columns:1fr 2fr 1fr}
}
thank you.