X-Cart forums

[tracey_ccishop]

Hi, have placed the shopping cart into the head.tpl, but it still looks like it did when it was in located in a vertical menu.
Have been through the files and cant work out how to remove the border around it.
How do I change its style/appearance?


javascript:emoticon('')
Smile

[balinor]

Need to see how you coded it first....

[tracey_ccishop]

This is my code from head.tpl...which have I commented in parts to keep track of what's what. I have some new graphics/buttons to add to the cart to make it look less generic. Also want to make it wider rather than longer when it expands on the shopping cart page (as it makes that portion of the page too long).
Any help with learning how to do this would be greatly appreciated!
Cheers
Tracey

{* $Id: head.tpl,v 1.40.2.3 2004/11/19 06:40:15 max Exp $ *}<style type="text/css">
<!--

-->
</style>


<TABLE border="0" cellpadding="0" cellspacing="0" width="760px" bgcolor="#9900cc">



<TD>[img]{$ImagesDir}/ccilogo2.gif[/img]</TD>
<TD>
{ include file="customer/menu_cart.tpl"}
</TD>


<!--
<TD class="HeadLine" align="left">
{if ($usertype eq "C" || $usertype eq "B")and $all_languages_cnt gt 1}


<!-- ?????
<TABLE border="0" cellpadding="0" cellspacing="0" width="760px" bgcolor="#9900cc">

<FORM action="home.php" method="GET" name="sl_form">
<INPUT type="hidden" name="redirect" value="{$smarty.server.PHP_SELF}?{$smarty.server.QUERY_STRING}">
<TR>
<TD>
{$lng.lbl_select_language}:

<SELECT name="sl" onChange="javascript: document.sl_form.submit()">
{section name=ai loop=$all_languages}
<OPTION value="{$all_languages[ai].code}"{if $store_language eq $all_languages[ai].code} selected{/if}>{$all_languages[ai].language}</OPTION>
{/section}
</SELECT>
<
</FORM>
</TABLE>


{else}

{/if}
</TD>
</TR>

<TD>[img]{$ImagesDir}/spacer.gif[/img]</TD>
{if (($main eq 'catalog' && $cat ne '') || $main eq 'product' || ($main eq 'comparison' && $mode eq 'compare_table') || ($main eq 'choosing' && $smarty.get.mode eq 'choose')) && $config.Appearance.enabled_printable_version eq 'Y'}


<TD width="760px" valign="middle" align="left">{include file="printable.tpl"}</TD>


<TD>[img]{$ImagesDir}/spacer.gif[/img]</TD>
{/if}
</TR>
</TABLE>
	</TD>
</TR>
</TABLE>

[balinor]

Ok, a couple of things:

1. When commenting in the x-cart templates, be sure to use this:

{****

instead of this:

<!--

2. To edit the cart, you'll need to open up customer/menu_cart.tpl and remove the capture for the menu to get rid of the borders. To do that, open it up and remove or comment out these lines of code:

{capture name=menu}
{/capture}
{ include file="menu.tpl" dingbats="dingbats_orders.gif" menu_title=$lng.lbl_your_cart menu_content=$smarty.capture.menu }

[tracey_ccishop]

Thanks very much.
Could I also ask you...having trouble working out how to remove the border around my contents and checkout buttons and how to change the text colour of the items and total amount text. Its the same colour as the body text for the rest of the site, but I would like to change it to yellow.
Tracey

[balinor]

All of the colors are controlled by the css file. Just open up the template that contains the item you want to modify and have a look at what class is called. Then open up skin1.css and modify accordingly. If you use Webmaster Mode, you will easily be able to tell which template is which

And the border around the contents is controlled by dialog.tpl, which is used for all of the content in the middle.

[tracey_ccishop]

Thanks again....

Ive been using webmaster mode to open the templates, looking to see where the classes are applied in the mini_cart.tpl and menu_cart.tpl for the buttons and the text and changing the colours in skin1.css.

As I see it, the text in the mini cart (ie. item numbers and the total $) and my login form headings (in the vert. menu) use the main text colour code from skin1.css, which defines the colour of all the text in the site. I just want to make them a different colour to the rest of the text (obviously because I have a dark purple background in the head and menu and a white background for the main page content.

I thought I could do this by creating another class in skin1.css and apply it to the minicart text to make it a different colour, but this didnt work.

I am also still stumped as to why my checkout and content buttons in the minicart are still surrounded by a border. I checked the templates you mentioned but couldnt change them.

Following is my code the for minicart files to see if this sheds any light. Sorry if I have waffled, but I would appreciate your help again!
javascript:emoticon('')
Thanks again,
Dazed + Confused!



This is my mini-cart code:

{* $Id: minicart.tpl,v 1.12 2004/07/06 14:00:12 svowl Exp $ *}
<TABLE border="0" cellpadding="2" cellspacing="0">
<TR>
<TD rowspan="2" width="55">
{if $minicart_total_items > 0}[img]{$ImagesDir}/basket_full.gif[/img]{else}[img]{$ImagesDir}/basket_empty.gif[/img]{/if}
</TD>

<TD >{if $minicart_total_items >0}{$lng.lbl_items}: </TD>

<TD>{$minicart_total_items}{else}<left>
{$lng.lbl_cart_is_empty}</left>{/if}</TD>

</TR>

<TR>
<TD >{if $minicart_total_items > 0}{$lng.lbl_total}: </TD>
<TD >{include file="currency.tpl" value=$minicart_total_cost}{/if}</TD>
</TR>
</TABLE>



and this is my menu_cart.tpl code:



{* $Id: menu_cart.tpl,v 1.25.2.4 2004/11/03 12:07:39 mclap Exp $ *}


[img]skin1/images/basket_hdg.gif[/img]
{include file="customer/main/minicart.tpl"}


<A href="cart.php" >
[img]skin1/images/contents_p.gif[/img]</A>
[img]skin1/images/checkout_p.gif[/img]

{if $active_modules.Wishlist ne "" and $wlid ne ""}
{$lng.lbl_friends_wish_list}

{/if}

{if $login ne ""}
{if $active_modules.Wishlist ne ""}
<A href="cart.php?mode=wishlist" {$lng.lbl_wish_list}</A>

{if $active_modules.Gift_Registry ne ""}
<A href="giftreg_manage.php" {$lng.lbl_gift_registry}</A>


{/if}
{/if}
{if $anonymous_login eq ""}
<A href="register.php?mode=update" {$lng.lbl_modify_profile}</A>


<A href="register.php?mode=delete" {$lng.lbl_delete_profile}</A>


{/if}
<A href="orders.php" {$lng.lbl_orders_history}</A>


{if $user_subscription ne ""}
{include file="modules/Subscriptions/subscriptions_menu.tpl"}
{/if}
{if $active_modules.RMA ne "" && $login ne ''}
{include file="modules/RMA/customer_menu.tpl"}

{/if}
{if $active_modules.Special_Offers ne "" && $login ne ''}
{include file="modules/Special_Offers/menu_cart.tpl"}


{/if}
{/if}

[balinor]

Ok, first, the reason the new css class probably didn't work is because those are links you are trying to format, so they are defaulting to the a:link class. If you want to format links, you need to add not one, but 4 new classes. For example, if you wanted a new class called 'minicart' you would need to create:

.minicart: link
.minicart: hover
.minicart: visited
.minicart: active

Next, the reason your buttons have borders is because they are linked If you want to remove the border, you need to add this to each of your images:

border="0"

So the checkout button code would look like this:

[img]skin1/images/checkout_p.gif[/img]

Finally, you should call your images using smarty so that you don't get any missing images or secure server problems down the road. Again using the checkout button as an example would be called like this:

[img]{$ImagesDir}/checkout_p.gif[/img]

Just make sure you put all of your images in skin1/images.

Hope this helps!

[tracey_ccishop]

Thank You, thank you and thank YOU!

But, just one more thing regarding the link colours.... ive created a new class in skin1.css for the minicart links and then tried applying it in the mini_cart.tpl cell where the links are, but it doesnt work.

What am I missing? Is it a syntax error or something like that or am I applying it in the wrong place?

Thanks again, really appreciate your help and promise never to bother you again with this one when I get it right!

javascript:emoticon('')
Smile
skin1.css code:
}
.minicart: link {
COLOR: #ffff00; TEXT-DECORATION:none;
}
.minicart: hover {
COLOR: #ffffff; TEXT-DECORATION:underline;
}
.minicart: visited {
COLOR: #ffffff; TEXT-DECORATION:none;
}

.minicart: active {
COLOR: #ffffff; TEXT-DECORATION:none;
}


mini_cart.tpl code:
{* $Id: minicart.tpl,v 1.12 2004/07/06 14:00:12 svowl Exp $ *}
<TABLE border="0" cellpadding="2" cellspacing="0">
<TR>
<TD rowspan="2" width="55">
{if $minicart_total_items > 0}[img]{$ImagesDir}/basket_full.gif[/img]{else}[img]{$ImagesDir}/basket_empty.gif[/img]{/if}
</TD>

<TD class="minicart">{if $minicart_total_items >0}{$lng.lbl_items}:</TD>

<TD class="minicart">{$minicart_total_items}{else}<lef t>
{$lng.lbl_cart_is_empty}</left>{/if}</TD>

</TR>

<TR>
<TD class="minicart">{if $minicart_total_items > 0}{$lng.lbl_total}: </TD>
<TD >{include file="currency.tpl" value=$minicart_total_cost}{/if}</TD>
</TR>
</TABLE>

[balinor]

Looks like you are also trying to format non-linked items, so you'll need to add this class to skin1.css as well:

.minicart {COLOR: #ffff00; TEXT-DECORATION:none;}