Matrice Block Cart expanding to height of page

[mollycakes]

I fix 1 issue of trying to move my left column up and adopt a new one. This time the height of my block cart module takes up the height of the page. Does anyone know what would cause this. See here
cart

[mollycakes]

Anyone? Desperately need to fix this and move on.

[Bluemoon08]

It would be helpful if you had a link to the site.

You might be able to correct the CSS to fix this situation. That would be better than having to hack the PHP code for the cart module (should be avoided).

Do you have the Firebug extension and know how to use it? It's a great tool for resolving CSS issues.

[mollycakes]

Here is the link CART I actually do have firebug. I have a little trouble figuring out most of it except for some of the CSS. I really just use it to look at certain elements and figure out where to change fonts and colors etc. The rest of it is very confusing.

[mollycakes]

Another issue I am having is when I click on the cart link on top of the cart block it takes you to the cart page. If the the cart is empty everything is pushed out to the right and is not aligned correctly. If I have products in my cart is displays perfect.

[Bluemoon08]

Okay, now I see what's happening. Before we look into the CSS, we should see if you can modify the behavior of the cart.

1. Can you set the cart not to be closed and not opened on page entry? There might be a setting that makes that easy. If so, you should select that.

2. See if there is a setting that hides the cart (keeps it closed) when nothing is in it.

Now, let's look at the CSS. It seems that you want to modify the CSS this from this HTML:

For reference only, this is the full CSS path:

html body#category div.page div#main_center_column
div#center_column div#left_column.column
div#cart_block.block div.block_content div#cart_block_list.expanded

I don't see a class for "expanded" in the blockcart.css so it looks like you should add one for height.

Try adding this to blockcart.css:

div#cart_block_list.expanded { height: 25%; }

You can experiment and change 25% to 25px or some value like that. Just be sure to put the semi-colon after it.

Let me know if this works or not. Then I can look at the other issue that you mentioned.

[mollycakes]

Thank you! I did insert the line however I didn't see any changes. I added it to the very last line of block_cart css. I have been searching for 2 days on how to set the cart to not display open when empty but I haven't found anything.

/* Special style for block cart*/
#cart_block .block_content {background-color:F5F5F5; background-image:none; padding:6px; border:none}
#cart_block h4 {background:#636363; font-weight:bold; font-size:11px; margin:0; padding:6px }
#cart_block h4 a {color:white }
#cart_block h4 span {
   text-transform: none;
   font-size: 0.8em;
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: left top;
   padding-left: 10px
}
#cart_block h4 span#block_cart_collapse { background-image: url('../../../img/icon/sort_asc_white.png') }
#cart_block h4 span#block_cart_expand { background-image: url('../../../img/icon/sort_desc_white.png') }
#cart_block #cart_block_no_products { margin: 0.5em 0 }
#cart_block dl dt a,
#cart_block dl dt span.quantity-formated { float: left }
#cart_block dl dt span.quantity-formated span.quantity {color:black; font-weight:bold; padding-right:0.2em }
#cart_block dl { font-size: 0.9em }
#cart_block dt { padding-top: 0.4em }
#cart_block dl span.quantity-formated { padding-right: 1px }
#cart_block dt, #cart_block dd {
   clear: both;
   margin-top: 0.2em
}
#cart_block dt { 
   width: 175px;
   text-align: right
}
#cart_block dd { width: 155px }
#cart_block dd { 
   margin-left: 1em; 
   margin-right: 1em; 
   font-style: italic 
}
#cart_block dl dt a { font-weight: bold }
#cart_block a.ajax_cart_block_remove_link {
   width: 11px;
   height: 13px;
   margin-left: 6px;
   float: right;
   font-size: 0;
   display: block;
   background: transparent url('../../../img/icon/delete.gif') no-repeat left bottom
}
#cart_block a.ajax_cart_block_remove_link:hover { text-decoration: none }
#cart_block p { clear: both }
#cart_block p span {
   clear: right;
   float: left;
   text-align: right
}
#cart_block li { clear: both }
#cart_block span.price {
   color:black;
   float: right
}
#cart_block dl span.price {
   font-weight: normal;
   color: #C66C70;
   float: none
}

#cart_block_wrapping_cost, #cart_block_shipping_cost, #cart_block_tax_cost, #cart_block_total { padding-right: 1.3em }

#cart_block table#vouchers {
   margin-top: 0.5em;
   border-top: 1px solid #A6A5AF;
   height: 3em;
   padding-top: 0.4em;
   margin-bottom: 0.5em;
   clear: both
}
#cart_block p#cart-prices {
   clear: both;
   margin-top: 8px;
   margin-bottom: 2em;
   display: block;
   padding-top: 0.4em;
   border-top: 1px solid #A6A5AF
}
#cart_block table#vouchers td {
   padding: 0;
   border: 0;
   height: 1.5em
}
#cart_block table#vouchers td.price {
   color: white;
   font-size: 1em;
   font-weight: normal;
   width: 37%;
   text-align: right
}
#cart_block table#vouchers td.delete {
   width: 9%;
   text-align: right
}
#cart_block table#vouchers td.delete img { margin: 0 }
#cart_block p#cart-buttons {
   height: 2em;
   margin: 0 -0.3em
}
#cart_block p#cart-buttons a {float:left; margin-left:5px; color:white; background:#E3E1EF; background-image:none; padding:3px; text-transform:uppercase; color:black}
#cart_block p#cart-buttons a#button_order_cart { float: right; margin-right:4px; background:#E3E1EF; color:white; padding:3px; font-size:11px }
#cart_block .cart_block_customizations {
   margin-left: 6px;
   list-style-type: square
}
#cart_block #cart-price-precisions {
   margin-top: 0.5em;
   padding-top: 0.4em;
   border-top: 1px solid #A6A5AF;
   font-size: 0.9em;
   height: 2em
}
div#cart_block_list.expanded { height: 25%; };

[Bluemoon08]

I don't know if it makes a huge difference but you should remove the semicolon after the wavy bracket. You just need the one inside the bracket like below:

div#cart_block_list.expanded { height: 25%; }

Then clear your browser's cache and reload the page and clear the cache again for good measure. Then see how it looks.

You can also just do this and remove the word div even though I don't think it makes a difference either way:

#cart_block_list.expanded { height: 25%; }

[Bluemoon08]

I just checked your site with the new CSS code in it and it's showing up as a selector in Firebug so that's good for experimenting.

In Firebug I changed the value and made the expanded section smaller. That worked!

However, the content is still at the bottom - out of the expanded div!

So, it looks like something else is controlling it.

Another quick suggestion is to try putting another module beneath the cart and see if that helps control its height expansion.

[mollycakes]

I removed the semi colon and cleared my cache but still nothing has changed. This template is going to be the death of me.

[Bluemoon08]

I know that feeling. It's frustrating.

Another quick suggestion is to try putting another module beneath the cart and see if that helps control its height expansion.

[mollycakes]

I actually did try this several times. Only seems to work on the front page. Everything is fine on the front page except everywhere else. Doesn't make any sense to me. I tried putting the newsletter block below the cart block on all pages too but the cart acted the same way and ran into the newsletter block as if it were one block without a margin between.

[Bluemoon08]

Is this from a free or purchased template?

If so, I'd try to contact the creator of the template about the custom cart.

[mollycakes]

It is a free template. Matrice or Matrix. Well I "thank you heaps" for trying to help me. These issues are making me loose hair.
If I take the block cart off the left column completely I don't loose any cart functions and everything behaves as it should. I think I will just do this for now and try to focus on getting these pages aligned. I need 2 pages to align properly. My empty cart page and my paypal checkout page load off alignment.

[Bluemoon08]

I guess there is not much support for a free template.

Sounds like some poor coding is the culprit.

I think that the original template source code has to be modified to stop the weird behavior.

I am going to try to create my own template and am not sure how well that will go.

For now removing the cart from the left column sounds like a good idea.

[mollycakes]

I had a feeling it is probably bad coding. Thank you for all your help! I have ordered a few books for designing your own theme. I might not have the patience for it now. LOL Ooh maybe I will try another theme and see what happens. I really love the look of this one though. Hmm

[Bluemoon08]

It does look nice. But it has to work well too.

Have you looked at any other sites that were created with the same theme to see if they have the same issue? If another one that's using the theme is working well, you might try contacting the creator of that site for tips.

Or you can easily experiment with other templates until you find one that you like and works well.

[Bluemoon08]

I think the key to designing a layout is setting up a testing site on your own computer.

For some reason, when I try to view the default template from Dreamweaver on my computer, I am only seeing the middle content and not the header, sidebars and footer so that isn't great for testing.

I think it's because I have to set up the database in my computer first. I've run into into some snags with with that so far but I think once I can properly view pages from my computer, it will help to design a new template.

What books did you get? I'm curious what details they get into.

[mollycakes]

I've downloaded Wamp to mimic my server. I have yet to install it, will probably do that sometime this week. I bought the Prestashop series from Packt just to get the general basics and a better idea of the structure. The theming book has been pretty helpful but I'd like something a little more in depth. I've found reading the forum to be more helpful.

[Bluemoon08]

I have WAMP set up in my computer and love it. I recently upgraded from an old version to the current version and there are a lot of changes and improvements. It's easier to set up databases now.

 

I am currently working with a WordPress site on WAMP but haven't experimented with Prestashop in it yet. Prestashop seems more confusing and complex for revising templates.

 

If I ever figure out how to easily create a new template in Prestashop, I'll create a little tutorial and post it here.