Shopping Cart Operations > Tips and Tricks

Categories Page -> Images & titles not aligning properly -> FIX

(1/1)

JHammond53:
When on a category page viewing all of the subcategories, the images do not line up with the titles below them. I am not sure if a fix has been posted yet so here is the fix that works for me.

You will need to modify the following file "public_html --> storefront --> view --> default_html5 --> template --> pages --> product --> category.tpl"

Lines 15-26 of the original category.tpl file should read as follows:

   <ul class="thumbnails row">
       <?php for ($i = 0; $i < sizeof($categories); $i++) { ?>
        <li class="span2">
          <a href="<?php echo $categories[ $i ][ 'href' ]; ?>">
             <?php echo $categories[ $i ][ 'thumb' ][ 'thumb_html' ]; ?>
          </a>
          <div class="span2">
          <a href="<?php echo $categories[ $i ][ 'href' ]; ?>"><?php echo $categories[ $i ][ 'name' ]; ?></a>
          </div>
       </li>
       <?php } ?>
   </ul>


Replace these lines with the following code:

   <ul class="thumbnails row">
       <?php for ($i = 0; $i < sizeof($categories); $i++) { ?>
        <li class="span2">
          <center><a href="<?php echo $categories[ $i ][ 'href' ]; ?>">
             <?php echo $categories[ $i ][ 'thumb' ][ 'thumb_html' ]; ?>
          </a></center>
          <center><div style="text-align:center;">
          <a href="<?php echo $categories[ $i ][ 'href' ]; ?>"><?php echo $categories[ $i ][ 'name' ]; ?></a>
          </div></center>
       </li>
       <?php } ?>
   </ul>


All changes have been marked with the color red if you want to just add the fix I used instead of replacing the entire code snippet.

abantecart:
What version of AbanteCart and template do you post this fix for?

If I look at v1.1.7 and HTML5 it is already centered.

JHammond53:
The latest version and HTML5 template. It wasn't centered for me using google chrome. I tested this outside of my site by viewing the demo and others' pages as well with none of them being centered for me.

EDIT: Here is one of the sites that don't center for me. I can't add links but its     bubblegum-web.com/index.php?rt=product/category&path=65

EDIT 2:  I just tested that same site using Firefox (outdated) and IE9 and neither one was centered??

junkyard:
hi, the alignment fix by abantecart from another thread:
  http://forum.abantecart.com/index.php/topic,1222.0.html
  https://github.com/abantecart/abantecart-src/raw/675f200b76a55c7786f168f8c3f1b89657e2eb06/public_html/storefront/view/default_html5/template/pages/product/category.tpl
We've copied category.tpl from there, and it works great!

JHammond53:
Good to hear that you guys had a fix for it already! I was sure there'd already be a fix out there but then after looking at a few sites built by others I began to wonder. I've done other code changes inside my category.tpl prior to realizing things weren't centering so a simple copy-paste wouldn't do it for me anyway.

It seems as if a lot of bugs have been worked out, its just hard locating the fix sometimes.

Navigation

[0] Message Index