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

[Brinley]

Found the CSS read me for the Responsive_classic stylesheets that explains whats what - its located in the css folder within the responsive-classic template

Hope this helps someone else:

Cheers
Brinley

--------------------------------------------------------------------------------------------------------------------

These CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

stylesheet*.css // are always loaded and at least ONE should contain site-wide properties.
language_stylesheet.css // changes to ALL pages, when that language is used
index_home.css // specifically affects the home page only
page_name.css // changes to one page, ie: index.php?main_page=page_name
language_page_name.css // changes to one page, when that language is used
c_??_??.css // changes to all info pages in a category
language_c_??_??.css // changes to all info pages in a category, when that language is used
c_??_??_children.css // changes for all children of the specified parent. Also supports a language prefix.
m_??.css // changes to a manufacturer's listing page
language_m_??.css // changes to a manufacturer's listing page, when that language is used
p_??.css // changes to a product's info page
language_p_??.css // changes to a product's info page, when that language is used
print*.css // printer-friendly global usage site-wide changes for printing-only
page##.css // EZ-Page -- css specific to a numbered EZ-page ... ie: page21.css would be
for EZ-Page number 21 ... ie: for the URL index.php?main_page=page&id=21

These CSS files are sent to the browser after the above files:

responsive.css // is loaded on every page except the popup_image and popup_image_additional pages and
contain site-wide selectors that control the responsive HTML elements.
responsive_default.css // is loaded on by default where a mobile or tablet UA is NOT detected.
responsive_mobile.css // is loaded on mobile devices where a mobile UA is detected, it replaces the 'responsive_default.css' file.
responsive_tablet.css // is loaded on tablet devices where a tablet UA is detected, it replaces the 'responsive_default.css' file.

The 'stylesheet.css' is expected to load first and should contain the bulk of your CSS selectors. Each file loaded
takes priority over previously loaded file(s). To save loading time, only new selectors or selectors whose properties
you wish to change should be in the optional CSS files. You can have different overrides for the same page, in
different languages, because the two would never be called at the same time.

If someone selected the French language on your site, the 'french_stylesheet.css' would also be loaded. It should
only contain the site-wide changes you want to make to 'stylesheet.css'. For example, change a 'background-image'
for your French customers.

If someone went to any of the other pages, that page's CSS file would be loaded. Possibly you want
different 'background-image' & 'background-color' on each of 'page_x' pages. Possibly you do not want a
border around '.plainBox' most of the time, but on a couple of pages you do... and on one of those pages you
want it in black and the other in red.

Possibly you created a NEW tag and did a <span class="newtag"> in your Privacy Statement. It is defined in only one
CSS file, 'german_privacy.css' as '.newtag { text-transform: uppercase }' Because, in Germany, that phrase must be
in all CAPS, but not in other countries.

Use your CSS files and the standard tags as much as possible, just change their properties when needed. If possible,
DON'T HACK the core code. Use your CSS files to do the work for you. When the style coding has been removed from
the ZenCart code and people have to decide if they want to go without the upgrade ~or~ undo all their hacks and
finally learn about CSS... your site will still be up and running.

Additional information is contained in the Zen Cart wiki.

Adapted from ideas presented by
Juxi Zoza
03/15/05

-- Responsive CSS Files --

The 'responsive.css' should NOT be altered, it contains specific selectors that calculate how your site will resize
as the browser window resizes and displays the correct width percentage for smaller browser windows.

The 'responsive_default.css' is the default CSS file that will contain all the sitewide selectors that need
manipulation to display correctly at different browser widths, included are (4) standand CSS media breakpoints:

@media (min-width:0px) and (max-width:480px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
under 480px wide ( mobile devices ).
}

@media (min-width:481px) and (max-width:767px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 481px wide but under 767px wide ( tablet devices ).
}

@media (min-width:768px) and (max-width:1500px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 768px wide but under 1500px wide { average desktop }.
}

@media (min-width:1500px) and (max-width:1800px) {
This CSS media breakpoint will only apply CSS selector manipulations for browser windows
larger than 1500px wide but under 1800px wide ( wide-screen desktop ).
}

An easy example using the 'responsive_default.css' media breakpoints, lets say you want to hide the banner images
on browser windows under 480px, simply add the banners selector to the appropriate media query like so:

@media (min-width:0px) and (max-width:480px) {
.banners { display:none; }
}

Now all your banner images are hidden on browser windows under 480px, adding CSS selector manipulations so that
content displays correctly across all broweser widths can get pretty hefty depending on how customized your template
is, so thats where the device specific 'responsive_mobile.css' and 'responsive_tablet.css' come in.

The 'responsive_mobile.css' and 'responsive_tablet.css' are CSS files that will contain all the sitewide selectors
that need manipulation to display correctly on specific devices and are only loaded if a browsers UA is detected,
very similar to the 'responsive_default.css' file but device specific and only contains device specific CSS media
breakpoints to save loading time.

In most cases you should only have to copy the selectors added to the CSS media breakpoints from
the 'responsive_default.css' file to the correct device specific 'responsive_??.css' file.

All the CSS selector manipulation changes made to the 'responsive_default.css' for media breakpoints for browser
windows under 480px wide ( mobile devices ) should be copied over to the 'responsive_mobile.css' file.

And all the CSS selector manipulation changes made to the 'responsive_default.css' for media breakpoints for
browser windows larger than 481px wide but under 767px wide ( tablet devices ) should be copied over to
the 'responsive_tablet.css' file.

The 'responsive_mobile.css' and 'responsive_tablet.css' files use different CSS media breakpoints:

@media only screen and (orientation:landscape) { }
@media only screen and (orientationortrait) { }

In most cases CSS media breakpoints copied from the 'responsive_default.css' will suffice on both orientations but
in some circumstances you may have to add an extra (margin) to an selectors HTML element in (orientation:landscape)
but not in (orientationortrait), so they are there for those rare occurrences.

[Brinley]

Ok! I think I have a general handle on how the Stylesheets are configured for the responsive classic template but there are a few things that I still find confusing.

Firstly why is the mobile section within the responsive_default not the same as the Responsive_mobile.css? And the same for the Tablet section and responsive_tablet.css?

Also - I am still new to responsive design but I was under the impression you build for Mobile and then add onto it the Desktop and Tablet details which seems logical to me. So can someone explain the benefits of having it structured using stylesheet.css, responsive.css, responsive_default.css, responsive_mobile.css and responsive_tablet.css (I understand the bloating issue for mobile but in my opinion combining mobile into the stylesheet would create the same size file.)

I really do appreciate all the work that has gone into the responsive_classic template but am just looking for some clarification.

Cheers
Brinley

[JoeH]

I just upgraded to 1.5.6c

The invoices and packing slip all include the header and logo. How do I get rid of that?

[Trinity14]

You can find those files in YOUR_ADMIN/invoice.php and YOUR_ADMIN/packingslip.php
These files do not use the template overwrite system.

This looks to be the code you want to remove:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td class="pageHeading"><?php echo nl2br(STORE_NAME_ADDRESS); ?></td>
        <td class="pageHeading" align="right"><?php echo zen_image(DIR_WS_IMAGES . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT); ?></td>
      </tr>
    </table>

and likely you want to remove the line too:

<tr>
        <td colspan="2"><?php echo zen_draw_separator(); ?></td>
      </tr>

[JoeH]

That worked! Thanks!

[gernot]

Hi, Question on specs here.
ZC 1.5.6c, PHP 7.3.10, responsive classic.

Silly me, I had posted in the wrong thread previously:
https://www.zen-cart.com/showthread....27#post1363327

While testing, my partner noticed that when checking out an order, in the initial main_page=shopping_cart screen, there appears to be a drop-down box to change address. I'd never had a separate address before, but she does, and now the issue has come up.
In Chrome, this is simple drop-down, no title or anything, and it confused her.

If one continues by pressing the "Checkout" button and continues to Step 1 of 3 (main_page=checkout_shipping ) there is an explicit "Change Address" button in the style matching the rest of the page.

So I wonder, is the drop-down seen in the shopping cart page a bug? I can try to style it somehow to match the style seen on Step 1 of 3, or simply remove the logic that puts in this code when (I assume) an address book for a customer has more than one address in it.

Any advice or comments most appreciated, I fully understand this is a free (and very useful and appreciated) template, and time is money, etc.
------
I managed to figure this out, not the greatest solution perhaps, but it certainly works for me. Turns out the select address from pulldown section was mixed up horizontally with the currently set address display, so I had to separate them as well as style them properly, as follows.

includes/templates/gernotshop/templates/tpl_modules_shipping_estimator.php

<?php
    // only display addresses if more than 1
      if ($addresses->RecordCount() > 1){
?>
<label class="bold back inputLabel" for="seAddressPulldown"><?php echo CART_SHIPPING_METHOD_ADDRESS; ?></label>
<?php echo zen_draw_pull_down_menu('address_id', $addresses_array, $selected_address, 'onchange="return shipincart_submit();" id="seAddressPulldown"'); ?>
<?php
      }
?>
<br class="clearBoth" />

I also found I had to put the first name, last name and street address into the addresses array in my override shipping_estimator.php module file in order to help tell the various addresses apart.

Hope that helps someone.

[gernot]

Hi all,
ZC 1.5.6c with built-in responsive classic, overridden as recommended.
URL: https://www.proteawines.jp/shop/
I've found that I would like to have some sideboxes in single column layout, but cannot figure out the correct approach.

First, the reasons:

For small mobile screens I still want to have the information (and possible extra information) sidebox visible above the footer, rather than only available through the off-screen pull-down/out menu. This is partly for clarity and partly to satisfy regulations that certain links should be available on each page. These sideboxes are in the lower col150 div (below the main col670 div and above the footer), and this entire div is hidden in small mobile screen CSS.

Additionally, I want to have the language selection sidebox available in single column as well, it does not seem to be visible anywhere by default, not even in the pull-down menu. Ideally I would like it at the top of the page. This sidebox is in the upper col150 div (above the main col670 div), and this entire div is hidden in small mobile screen CSS.

So, how to go about this?

I tried to set the sideboxes themselves to unhidden in responsive.css and responsive_default.css, and added the languages sidebox to the list there too. This would work I assume, except for the issue that the containing divs (with class col150) are hidden, so everything inside them too is hidden.

I am happy if I can at least get the languages sidebox into the pull-down menu, but this too I cannot figure out yet how best to do this.

I wonder what approach should be taken to make sideboxes visible that are inside the col150 id? Can I control this using only CSS, or would I need to add some logic to the PHP template files to make a different containing div (e.g., a class col670 one) under certain circumstances?

Obviously I will look further on my own, as well as checking this thread in more detail (Google searches did not help in that regard) but I haven't been able, through inspection, to find any example of including a sidebox in single column mobile mode using this default template.

Any advice or comments most welcome.

[gernot]

After looking at the CSS and template code, and searching more on the forums, I found mention of a plugin that puts languages and currency in the header:
https://www.zen-cart.com/downloads.php?do=file&id=30
Support thread:
https://www.zen-cart.com/showthread....inks-in-Header

Based on that, and my own suspicions, I guess the simplest way forward is to create new divs with id's, write these into the templates/<CUSTOM>/common/tpl_{header,footer}.php as appropriate using logic to only write them when mobile and/or tablet mode is detected, and then control their display with responsive_default.css (make hidden by default), and responsive_{mobile,table}.css (make visible here).

Whether I can merely include the language sidebox there remains to be seen, but I guess not if it contains mention of divs which will be hidden in mobile and/or tablet mode. In that case, I can either change the sidebox code to be more flexible, or simply write the relevant language code into the above header/footer templates.

I could also of course install the plugin mentioned, and use that, if it proves to be a better overall solution.

[idtags]

Hello,
Please advise:
I am trying to reduce spacing between lines: at this site see image below



I am using "Inspect" option and change

.wrapperAttribsOptions {margin: 20px 0;} to .wrapperAttribsOptions {margin: -15px 0;}



It resolves situation for mobile phone ()

but destroys formation of Desktop Display:

I guess there should be separate ccs files for desktop and mobile, but they are not presented in Inspect elements.

What is appropriate direction to solve this?

[lat9]

Check your responsive_classic clone's /css directory. You should see responsive_mobile.css and responsive_tablet.css.

I'm guessing that the change you identified should be put into both the portrait and landscape portions of each of those stylesheets.