Mobile Friendly

[Johnnycopilot]

Thanks!!!! This is what I need to do.. If it's not too much to ask, a few questions...

The CSS is designed to make your template fit the screen size but has included code to restrict the templates width to a fixed px.

So if your desktop monitor is 1024 wide, the template will fill the screen but if your current template was designed with a fixed with of 980px, simply un-commenting 1 line of CSS code and adding your templates width is all that is needed from preventing it from filling the entire screen.

CSS tweeks will most likely be needed, I couldn't account for every template designers added HTML divs, tables and code. Most tweeks will involve removing "fixed widths" or "forced widths (!important)".

My site was a floating size of 93%, but I just changed it to 960pix so that I could put an image/advertise slider at the top of my home page. I sell DJ and Pro Lighting, and I REALLY need some graphics etc. on home page. My home page looks horrible. How, or will, this work with a slider? and if so, what should I do about page width in combination with a slider? Could I make my slider images WAYYYY wide, and keep my floating 93% size?.. or is there a particular slider plugin that I need to use? or, can I simply not use a slider?.. I'm sure you get my point

-Create a sub-directory and upload the latest version of zen-cart to it.

Where? Just make a folder in my root? next to admin, includes, images, cache, etc? What should I name this folder that contains the new 1.5.4?

-With a fresh copy of your current template package, merge the The Responsive DIY Template Default code

-Upload your newly coded template

Upload my new template, complete with your merged DIY package, into the New folder, with the New Zen Cart 1.5.4? Can I point this new ZenCart 1.5.4 to my current database, or is your easypopulate suggestion going to do the same thing as far as making this new site emulate my site? Sorry, I'm not familiar with easypopulate OR pointing two different sites to the same database.

-Install easyPopulate or a comparable plugin and upload your categories and products

I'm not sure exactly what you mean, in that,,, upload my categories and products from my other (original, current website)? That's what easyPopulate does?

-Activate your template and see what CSS tweeks will be needed

Are you saying do this, but don't actually use this 'new' zencart,,, and when I get it working like I want, make those same (CSS, etc) changes to my active, current site? In other words use what you have told me to do only as a test? .. NOTE: I have Zen 1.50 and will, at some point need to upgrade.. but I'm not worried about that right now. If I use your DIY code on my current site, will I be able to upgrade to 1.5.4 at some point?

I hope that I'm not over-complicating this, but I have to be very careful about understanding exactly what you say, or I may goof something up. PS. Thanks for the long, detailed, reply. I'm sure that took time and I appreciate it.

[Johnnycopilot]

Ok, I uploaded the Responsive DIY Template Default for 1.5.x files into {another} ZenCart and did the sql patch. It's not the exact setup of my other site, but similar. With the Includes folder, I uploaded into the directory structure like I would on any other plugin. Where the folders in the plugin said "/responsive_template_default", I put those files in my template folder (crista_pink). Where the plugin folder said zadmin, I put those files in my admin folder. My original zencart didn't have admin/includes/installers , so I uploaded and left the folder in it named "responsive_defaut" .. (should I have changed that to "crista_pink"?) In my "Admin-Tools-Template Selection", the Template Name for my crista_pink changed to "Responsive Template Default", but the Directory still says "crista_pink". This template is by "pixemus" and it installs 4 templates with different colors, so I can easily switch between "pink, violet, grey, and blue" templates, which allow me to "A - B" my results, and since I installed into Pink, I can switch back and fourth with the other colors to compare.
Now... I'm not sure if I'm in over my head or not, and when it comes to my columns instead of rows SNAF, and Lightbox, which aren't installed in this template, and getting them adjusted. As stated on the download page, my colors need fixing, and some of the alignment isn't right. When I scroll to the right on a mobile device, there's a big blank area. On a mobile device, the top categories, and things are placed to the upper left the respect that they are on the mobile screen. The text seems to be squeezed together in the middle of the screen. I'm not sure if this is how it's supposed to look or not, and I'm not sure if that big blank area and the other alignment issues can be fixed via CSS Stylesheet.. I just don't know. I hope that I installed it properly. I did make sure not to miss any files in my upload, and the sql patch went through. I have the demo version of ZenCart installed, so there are products on there. Main thing is that I want this to be acceptable for Google. Is there any way someone could look at this? The url is wholesalebodyboards dot com/dealers ... Thanks!!

[Johnnycopilot]

posted this by mistake

[Johnnycopilot]

Empty space on the right is the space for the right sideboxes. Admin-Tools-Layout Boxes Controller, when all sideboxes are set to "ON" or "OFF" for show sidebox @ min width, the space still shows up. Even when I disable all right sideboxes, that space is still there. How do I adjust/fix that? Thanks!

[rbarbour]

10 Minutes

http://www.zcadditions.com/01012015-520/

I made not 1 CSS tweek, some will be needed but this is what I got only by merging the files in /includes/templates/responsive_template_default/common/ with:

/includes/templates/crista_pink/common/
"tpl_box_default_left.php"
"tpl_box_default_right.php"
"tpl_footer.php"
"tpl_header.php"
"tpl_main_page.php"

and Uploading the: /includes/templates/responsive_template_default/common/ renaming responsive_template_default to crista_pink

"html_header.php"

and Uploading the /includes/templates/responsive_template_default/css renaming responsive_template_default to crista_pink

"responsive.css"
"responsive_default.css"
"responsive_mobile.css"
"responsive_tablet.css"

and Uploading the
\includes\auto_loaders\ *files*
\includes\classes\ *files*
\includes\init_includes\ *files*
\includes\modules\responsive_template_default\ *files* renaming responsive_template_default to crista_pink

I uploaded all ADMIN files
\zadmin\ *files*

Choose the crista_pink template
Reactivated the sideboxes
Activated the responsive template

Done

Thanks!!!! This is what I need to do.. If it's not too much to ask, a few questions...

My site was a floating size of 93%, but I just changed it to 960pix so that I could put an image/advertise slider at the top of my home page. I sell DJ and Pro Lighting, and I REALLY need some graphics etc. on home page. My home page looks horrible. How, or will, this work with a slider? and if so, what should I do about page width in combination with a slider? Could I make my slider images WAYYYY wide, and keep my floating 93% size?.. or is there a particular slider plugin that I need to use? or, can I simply not use a slider?.. I'm sure you get my point


Where? Just make a folder in my root? next to admin, includes, images, cache, etc? What should I name this folder that contains the new 1.5.4?


Upload my new template, complete with your merged DIY package, into the New folder, with the New Zen Cart 1.5.4? Can I point this new ZenCart 1.5.4 to my current database, or is your easypopulate suggestion going to do the same thing as far as making this new site emulate my site? Sorry, I'm not familiar with easypopulate OR pointing two different sites to the same database.


I'm not sure exactly what you mean, in that,,, upload my categories and products from my other (original, current website)? That's what easyPopulate does?


Are you saying do this, but don't actually use this 'new' zencart,,, and when I get it working like I want, make those same (CSS, etc) changes to my active, current site? In other words use what you have told me to do only as a test? .. NOTE: I have Zen 1.50 and will, at some point need to upgrade.. but I'm not worried about that right now. If I use your DIY code on my current site, will I be able to upgrade to 1.5.4 at some point?

I hope that I'm not over-complicating this, but I have to be very careful about understanding exactly what you say, or I may goof something up. PS. Thanks for the long, detailed, reply. I'm sure that took time and I appreciate it.

Ok, I uploaded the Responsive DIY Template Default for 1.5.x files into {another} ZenCart and did the sql patch. It's not the exact setup of my other site, but similar. With the Includes folder, I uploaded into the directory structure like I would on any other plugin. Where the folders in the plugin said "/responsive_template_default", I put those files in my template folder (crista_pink). Where the plugin folder said zadmin, I put those files in my admin folder. My original zencart didn't have admin/includes/installers , so I uploaded and left the folder in it named "responsive_defaut" .. (should I have changed that to "crista_pink"?) In my "Admin-Tools-Template Selection", the Template Name for my crista_pink changed to "Responsive Template Default", but the Directory still says "crista_pink". This template is by "pixemus" and it installs 4 templates with different colors, so I can easily switch between "pink, violet, grey, and blue" templates, which allow me to "A - B" my results, and since I installed into Pink, I can switch back and fourth with the other colors to compare.
Now... I'm not sure if I'm in over my head or not, and when it comes to my columns instead of rows SNAF, and Lightbox, which aren't installed in this template, and getting them adjusted. As stated on the download page, my colors need fixing, and some of the alignment isn't right. When I scroll to the right on a mobile device, there's a big blank area. On a mobile device, the top categories, and things are placed to the upper left the respect that they are on the mobile screen. The text seems to be squeezed together in the middle of the screen. I'm not sure if this is how it's supposed to look or not, and I'm not sure if that big blank area and the other alignment issues can be fixed via CSS Stylesheet.. I just don't know. I hope that I installed it properly. I did make sure not to miss any files in my upload, and the sql patch went through. I have the demo version of ZenCart installed, so there are products on there. Main thing is that I want this to be acceptable for Google. Is there any way someone could look at this? The url is wholesalebodyboards dot com/dealers ... Thanks!!

posted this by mistake

Empty space on the right is the space for the right sideboxes. Admin-Tools-Layout Boxes Controller, when all sideboxes are set to "ON" or "OFF" for show sidebox @ min width, the space still shows up. Even when I disable all right sideboxes, that space is still there. How do I adjust/fix that? Thanks!

[rbarbour]

forgot,

I installed the:
sql_new_install.sql patch

after

I uploaded all ADMIN files
\zadmin\ *files*

[Johnnycopilot]

What you did looks great. That' what I need. I don't know why mine didn't come out like that. I have been over and over this a dozen times, and I have uploaded all of those files several times, uninstalled all of the files, re-uploaded them, twice... In my Admin-Tools-Template Selection, my crista_pink template still says "Responsive Template Default". It's more than likely something that I screwed up, deleted something by accident,,, who knows. Probably one little simple thing I did wrong. Question.. When you say "merge" do you mean "replace"? In the case with files of same name, I REPLACED the existing file with file from DIY. At this point, I think I'll start with another fresh install of ZenCart and try it again. Once I can get it right on a test site, I'll try it on my lighting site. Can you think of anything obvious that I may have done wrong? Another Question.. What do you mean by you "Activated the responsive template"? How do you activate it? and by "reactivating the sideboxes", so you mean simply turn them on in Admin? Thanks!

[rbarbour]

What you did looks great. That' what I need. I don't know why mine didn't come out like that. I have been over and over this a dozen times, and I have uploaded all of those files several times, uninstalled all of the files, re-uploaded them, twice... In my Admin-Tools-Template Selection, my crista_pink template still says "Responsive Template Default". It's more than likely something that I screwed up, deleted something by accident,,, who knows. Probably one little simple thing I did wrong. Question.. When you say "merge" do you mean "replace"? In the case with files of same name, I REPLACED the existing file with file from DIY. At this point, I think I'll start with another fresh install of ZenCart and try it again. Once I can get it right on a test site, I'll try it on my lighting site. Can you think of anything obvious that I may have done wrong? Another Question.. What do you mean by you "Activated the responsive template"? How do you activate it? and by "reactivating the sideboxes", so you mean simply turn them on in Admin? Thanks!

No, merge means merge the responsive_template_default file with the crista_pink file

Find all instances that look like this in the mentioned files:

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

CODE

<!--(EOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

and copy it to the crista_pink files

[Johnnycopilot]

Question: When merging files, where BOF's have the same description, do I REPLACE all of the existing code between the BOF's and EOF's with DIY code,, or add DIY code to the other code keeping all DIY code between BOF and EOF and keeping original code intact,, or add the entire DIY BOF thru EOF beginnings, code, and end of file, below the existing code, leaving the original code start to finish intact? (see first example)

I understand what I need to do and why I need to do it, but I'm not sure where to start and stop and exactly what to add and/or replace.

I don't want to say this is confusing to me, but because I don't know what the code is saying, it all looks like unrecognizable digits, one following the other. I do understand that BOF means beginning of file, and EOF means End of file... Sorry I'm having so much difficulty understanding what to do. I've never merged 2 php files together... I took these few examples (below) from the first two files I tried to merge and I don't know what to do. I haven't even looked at the rest of them. Thanks
Original Code...

<!--// bof: <?php echo $box_id; ?> //-->
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<div class="sidebox-header-left <?php echo $header_left; ?>"><h3 class="leftBoxHeading <?php echo $header_right; ?>" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3></div>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

Code from DIY...

<!--// bof: <?php echo $box_id; ?> //-->
<?php if (COLUMN_WIDTH == '0'){ ?>
<div class="leftBoxContainer" id="<?php echo str_replace('_', '-', $box_id ); ?>" style="width: <?php echo $column_width; ?>">
<?php }else{ ?>
<div class="leftBoxContainer <?php echo $minWidthHide; ?>" id="<?php echo str_replace('_', '-', $box_id ); ?>">
<?php } ?>
<h3 class="leftBoxHeading" id="<?php echo str_replace('_', '-', $box_id) . 'Heading'; ?>"><?php echo $title; ?></h3>
<?php echo $content; ?>
</div>
<!--// eof: <?php echo $box_id; ?> //-->

Or here, this is even more confusing to me..
My original Code..

<div id="navSuppWrapper">
        <!--bof-navigation display -->
        <?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
        <?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?>
        <?php } ?>
        <!--eof-navigation display -->

DIY code is

<!--bof-navigation display -->
<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->
<div id="navSuppWrapper" class="<?php echo $fluidisFixed; ?>">
<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

<div id="navSupp">
<ul>
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if (EZPAGES_STATUS_FOOTER == '1' or (EZPAGES_STATUS_FOOTER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) { ?>
<li><?php require($template->get_template_dir('tpl_ezpages_bar_footer.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_ezpages_bar_footer.php'); ?></li>
<?php } ?>
</ul>
</div>
</div>
<!--eof-navigation display -->

And here, there is a 4 word addition, in the MIDDLE of existing code

ENT_COMPAT, CHARSET, TRUE); 

Am I supposed to add that one line of code to my existing code? I don't understand php, so I could easily miss something or screw something up.
original code

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}

?>

DIY code is here

<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']), ENT_COMPAT, CHARSET, TRUE);
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message'], ENT_COMPAT, CHARSET, TRUE);
} else {

}
?>

[Johnnycopilot]

In tpl_box_default_left.php , there is no

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)-->

CODE

<!--(EOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 

But there is

<!--// bof: <?php echo $box_id; ?> //-->

CODE

<!--// eof: <?php echo $box_id; ?> //-->

Which matches code in my file, except some additions. I would imagine that I can't have BOTH $box_id; ? files,, or can I? I'm not sure what to merge and what not to merge.

same thing with tpl_header.php, no

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 

and in my stylesheet.css do I simply add all of the DIY styles, not worrying if there are any duplicate styles already in there?

Or do I simply ignore any place that doesn't have

<!--(BOF - 2.1) Responsive DIY Template Default for 1.5.x (65)--> 

and copy only those files? So, for example, I wouldn't do anything as far as merging tpl_box_default_left.php and tpl_box_default_right.php and tpl_header.php Thanks!!!!! I really appreciate it !!