Responsive Classic Redesign Support thread

[pilou2]

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;
}

}

}

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

[chadlly2003]

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;

[pilou2]

It was no right place to do the change, it was a little bit higher in the file. I replaced:

.shoppingcart {
	margin-left:auto;
	display:grid;
	grid-template-columns: 1fr auto;
	min-height: 44px;
	min-width: 44px;
    position: relative;
    align-content: end;
}

By this:

.shoppingcart {
	margin-left:auto;
	display:flex;
	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.


Thanks!

[Shop Suey]

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.

[nicksab]

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

[chadlly2003]

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.

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

[chadlly2003]

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.

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

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;
}

[chadlly2003]

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.

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.

[nicksab]

Ignore what I wrote above. I was not thinking clear.

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;
}

Thank you for that.

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

[chadlly2003]

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;}
}