X-Cart forums

[balinor]

A couple of tips for you if you really want to become adept at editing X-Cart templates:

1. Learn HTML. Not just a WYSIWYG editor, but the real code of HTML. It is a very straightforward programming language, and you can pick it up pretty quickly.

2. Learn CSS. All of the styles in X-Cart (colors, fonts, etc) are controlled by CSS.

The O'Reilly books are great if you are looking for a reference. Good luck!

[eaglemobiles]

Thanks for your help, i will be grateful if you help me out, i have made some changes to login manu, now i want to bring the forgot password text near to join go but i cant do it, and I want to remove the go button from join i want it same as forgot password.

Thanks

[nfc5382]

any difference for 3.5?

[Vern]

Thanks eaglemobiles for doing the hard work.

The code

<TD style= "border-right: 1px solid #9C9EAA; border-bottom: 1px solid #9C9EAA;" height="23" class="DialogTitle" background="{$ImagesDir}/dialog_bg_n.gif" valign="middle">{$title}</TD>

makes the title bar come out double.

Plus the style should go in the skin1.css file.

For those who want to enclose the bottom with a continuous line. Use a spacer.gif of the same color, like balinor suggested, and aligned it to the bottom at 100% width.

Here is the complete code for dialog.tpl.

{* $Id: dialog.tpl,v 1.19 2004/06/24 09:53:29 max Exp $ *}
{if $printable ne ''}
{include file="dialog_printable.tpl"}
{else}
<TABLE border="0" cellpadding="0" cellspacing="0" {$extra}>
<TR> 
<TD height="15"  class="DialogTitle" background="{$ImagesDir}/dialog_bg_n.gif" valign="bottom">{$title}</TD>
</TR>
<TR><TD class="DialogBorder"><TABLE border="0" cellpadding="10" cellspacing="0" width="100%">
<TR><TD class="DialogBox">{$content}

</TD></TR>
</TABLE><tr>
<td colspan="2">
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="white">
<tr>
<td width="9">
<div align="left">

[img]{$ImagesDir}/smalldialogcnr_left.gif[/img]</div>
</td>
<td width="100%" valign="bottom">

[img]{$ImagesDir}/greyspacer.gif[/img]</td>
<td width="9">
<div align="right">

[img]{$ImagesDir}/smalldialogcnr_right.gif[/img]</div>
</td>
</tr>
</table>
</td>
</tr>
</td><TD></TR>
</TABLE>
{/if} 

Next open up skin1.css file.and find .DialogBorder
And add this or whatever color and size you need

 border-right: 1px solid #9C9EAA; border-left: 1px solid #9C9EAA;

Happy Coding

[PhilJ]

[spam] Just added a free rounded corners mod to my site if anyone's interested.

edit: Sorry I removed it a while ago, as some people had problems with it.

[fogelka]

Interested, but can't find it!

[Warwick]

Originally Posted by PhilJ

[spam] Just added a free rounded corners mod to my site if anyone's interested.

edit: Sorry I removed it a while ago, as some people had problems with it.

Care to share it nevertheless?

[PhilJ]

http://www.xcartmods.co.uk/count/click.php?id=2

[Warwick]

Thanks mate!

[guy gregor]

I was reading around http://www.cssplay.co.uk/boxes/snazzy2.html and in a moment of experimentation did the following...

i added this to the bottom of my css file

.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:1.2em;
padding:0 10px 5px 10px;
border-bottom:1px solid #444;
}
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:10px;
}
.xsnazzy {
background: transparent;
width:153px;
float:left;
margin:0 3px;
}

.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff;
border-left:1px solid #444;
border-right:1px solid #444;
}
.xb1 {
margin:0 5px;
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #444;
border-width:0 1px;
height:220; /* was auto */
}
* html .xboxcontent {
height:1px;
}

.color_a { /* menu top */
background:#B64926; /* was c9ba65 */
color:#fff;
}
.color_b {
background:#CC5200; /* was d4d8bd */
color:#fff;
}
.color_c {
background:#FFF0A5;
color:#fff;
}
.color_d {
background:#FFB03B; /* was b2ab9b */
color:#fff;
}

and then changed my menu.tpl to

<table width="155" border="0">
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a">{$menu_title}</h1>
<p>{$menu_content}<br></p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
</table>

and bingo, i had a new menu with rounded corners.

encouraged by how easily it happened i changed dialogue.tpl to

<div class="zsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_d"></b><b class="xb3 color_d"></b><b class="xb4 color_d"></b></b>

<div class="xboxcontent">
<h1 class="color_d">{$title}</h1>
<br />
{$content}
&nbsp;
<br />



<br class="clear" />
<p>The end</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

i wont pretent to understand all of it , and all credit to stu at css play . he would like it referenced if you use it , or a donation !

an interesting side effect is its seems very fast. the contents seem to continue to inherit styles from existing css . its pretty much cross browser, but you do need to fiddle with padding a little, and i have used tables here and there to get things to stay still !
you can see the effects on www.sunrisedirect.co.uk , its live , so no ordering please.i am no graphic designer , so there is still a lot of that to do.

From an SEO perspective, googles text cache shows it reading straight down the page , quite neat really.
anyway , i thought i'd share it.