Basic mini cart!

Quote

Post by ShaneTFletcher » Wed Feb 19, 2014 1:49 am

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 533 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.
ShaneTFletcher
New member
Posts
62
Joined
Sat Jul 07, 2012 4:32 am
Top

Re: Basic mini cart!

Quote

Post by butte » Wed Feb 19, 2014 9:33 am

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>.
butte
Guru Member
Posts
7059
Joined
Wed Mar 20, 2013 6:58 am
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 139 guests