Page 1 of 1

Basic mini cart!

Posted: Wed Feb 19, 2014 1:49 am
by ShaneTFletcher
Hey all, I'm currently trying to slim the mini cart (placed within the header.tpl as <?php echo $cart; ?>).

I wanted just a simple header saying cart, showing the quantity of basket and total. However, the cart style isn't going all so well.
oc.jpg

oc.jpg (85.11 KiB) Viewed 360 times

Basically, as you can see. The cart isn't within the container's above (the blue). Here is my css and tpl code's -

Stylesheet of cart

Code: Select all

#topbarcontainer #cart {
	position: relative;
	top: 0px;
	right: 0px;
	z-index: 9;
}
#topbarcontainer #cart .heading {
	float: right;
	margin-top: 0px;
	padding-left: 14px;
	padding-right: 14px;
	border-top: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #EEEEEE;
	background: #FFF;
	z-index: 9999;
}
#topbarcontainer #cart .heading h4 {
	color: #333333;
	font-size: 20px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 3px;
}
#topbarcontainer #cart .heading a {
	color: #38B0E3;
	text-decoration: none;
}

Cart.tpl code -

Code: Select all

<div id="cart">
  <div class="heading">
    <h4><?php echo $heading_title; ?></h4>
    <a href="<?php echo $cart; ?>"><span id="cart-total"><?php echo $text_items; ?></span></a></div>
</div>
</div>
and lastly, the header.tpl (only where shopping cart is placed) -

Code: Select all

<body>

<div id="topbarwrapper">
	<div id="topbarcontainer">
hello   
</br>
</br>
</br>
</br>

<?php echo $cart; ?>

	</div>
</div>

<div id="container">
<div id="header">
....
I really am not sure why the cart isn't within the containers called topbarcontainer.

Just to add, I have placed some </br> to show that the shopping is attached to the bottom of the container.

Re: Basic mini cart!

Posted: Wed Feb 19, 2014 9:33 am
by butte
The position: relative; doesn't have first dibs on the real estate where you want it.

For
#topbarcontainer #cart {
position: relative;
top: 0px;
right: 0px;
z-index: 9;

amend to
#topbarcontainer #cart {
position: relative;
top: -40px;
left : -40px;
right: 0px;
z-index: 99;
and play with top and left to put it right where you want it. Remove the </br>.