X-Cart forums

[iWD]

Dear Balinor,

I know you think that thread is helpful, but for someone who has never used x-cart it might as well be greek! Well, I think I might be better off with greek.

I mean yes, that tells me what files to TRY to use to make the design work.
Try being the operative word.
I have been pointed at the thread so many time I could spit! (Probably by you, no insult intended )
(I hate to rant, but this is frustrating!)
I appreciate that you want to help (god knows I love the fact people out there are at least trying and usually succeeding), but if only that file had all the answers then the forum wouldn't be needed.

I can't tell where I am suppose to put anything with that thread.
Yes, it goes in file such and such, but what can/do I put in, where exactly in the file do I put it? That would be a step-by-step guide for the newbies here.
If we knew what to do next, we wouldn't be newbies.

I mean can I do a design in HTML and just stick it in the top and the rest of the site will conform around it? (I think not) So, then what do I do?

I know you don't/can't have all the answers, but unlike every other code out there I've ever used, who had a book I could get and read and reference, this doesn't appear to have the fine points laid out for the beginner. The manual seems to me to be no help, and for something so easy to customize why is it that it seems I have to pay someone else to make a custom design site? Is there actually a book x-cart for dummies? I haven't found one and there isn't one on the O'reilly site that I've seen.

and Donnay2 4.12 (4.1.12? or 4.1.2?) does not make it 4.2 (but 4.2.0 is a completely different system to edited and If I thought the 4.1.11 was hard, now I have to learn it all over and I still can't do the basics from the last version!)

So If it's possible after all of this to help Donnay2 with he's other changes and maybe the rest of us with some more help.

We would GREATLY appreciate it!
Thanks

-- frustrated x-cart user!

[balinor]

Hi Ian - I'm sorry you are frustrated, but this is NOT an easy system, and there is no 'X-Cart for dummies'. The thread I pointed you to explains all of the techniques and tools necessary to edit the system, there is no simple way to explain it. You need to know html/css well, and eventually Smarty. That thread explains exactly to find out which template is which, but I really can't write a guide for every single possible change. The system is designed so that you can customized ANYTHING but you need to spend the time and get over the learning curve. There is just no magic bullet here.

You can't do an html design and shoehorn X-Cart into it, you need to learn the template system and edit them to get your design into the system. I'm sorry this isn't the answer you are looking for, but you really just need to spend the time and learn the templates. Make backups of your work, and you will slowly get the hang of it.

In your case, start with head.tpl, and then you'll see all the parts to it (top_menu.tpl, search.tpl,etc). Edit the templates and styles to get the design you are looking for. If you want to move the search box, you move the include which is this bit:

{if $usertype eq "C"}
{ include file="customer/search.tpl" }
{/if}

If you want to edit the tabs, you open up customer/top_menu.tpl and then you'll see customer/tab.tpl makes up the tabs. See how that works? Just takes time - the guide I put together outlines which templates are which, and that should give you all you need to start editing things.

[iWD]

Thank you for the quick response!
You are nothing if not FAST!
However, I think you are most definitely helpful.
(even if I am a little slow on the uptake sometimes)
I know you can't write it up for all contigencies, but maybe a flow chart for changing the basics.
Similar to what you have, but with a pictures of the site (like the manual) and tree diagram of how each one stems off and the specific thing then depicted and described?.
I know, when will you find the time? Well, if you do that will help
I'm visual person what can I say.
The one in the manual has the right idea, but needs to say that then head.tpl is made up of this, this and this. I think your chart has LOTS of merit. But, it's just not as clear as I like it. If we could marry the two, I think we would be that much closer to make it like a "x-cart for dummies".
That's my two cents on the matter.

I have been going around in circles with another issue on another site [My latter question].
This leads to more frustrations.
I was hoping this year to make them less "cookie cutter" as all really changed was the colour.
This is where figuring out how to changes the upper portion of the site will come in handy.
Which means I will have to put off the 4.2 for a looooong time.
I can't even get the buttons to change colour?

Back to the issue at hand!
So can I use regular HTML/CSS right inside there (the tpl files)?
As it's a "link" to this file, does that mean once I get down to the "single" element, like the part that makes up the one tab, I can add my own version here and it will understand that code.
Or is there a special way to do it?
I will have to play around with this, but I think (assuming I can put HTML) this might have made it a little clearer.
Clear as mud I guess until I try it.

My other questions, for now . . .
Is there a place where the table.container background can be adjusted?
I need it to be plain white on the cart and on the regular one there is a grey bar on the right under the menus.
I tried this method of following the templates back, but couldn't find it.
Any thoughts?
Thanks again!
Keep up the good work!

[pfarcus]

Theres links to 4 apps/tools at post #2 of balinors big list that run in firefox to help figure out whats doing what.


- Firebug
- Colorzilla
- MeasureIt
- Web Developer Toolbar

[balinor]

Sorry Ian, but something like that just isn't going to happen (by me at least). I already donate over 250 hours to this place a year, and I just don't have the resources to devote to a full visual guide, especially given how quickly they get outdated.

Again, the thread explains how to do all of this - use Firebug to find out what class is what, and then edit them in the master stylesheet (skin1.css). Use Webmater mode to find out what template is what, and also to edit text on the fly. Yes, you can use html/css/flash/whatever you want in the templates - they are full html, you just need to be careful not to break the Smarty.

[pfarcus]

I figured out that this is the speed bar:

{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<td valign="top">{include file="customer/tab.tpl" tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>"}</td>
<td width="1"><img src="{$ImagesDir}/spacer.gif" class="Spc" alt="" /></td>
{/if}
{/section}

found in customer/top.tpl I cut it out of that and pasted it in the search bar ok.

I tried all kinds of different places to paste the code, anyone know how to get it on the right of the screen? Right now its dead center of the search bar. Is there a way to paste it just under the search bar? I can't figure it out, is it a CSS thing too?

Much appreciated.

[balinor]

Just use html to add a new row below the search bar and paste your code there.

[pfarcus]

I'm afraid thats a little beyond me right now but I am making progress. Is that adding html to a smarty template or....?

How do I add that new row again?

Getting there, largely from your help.

Thank you.

[JWait]

There are 2 problems working with the Speed Bar. (Please note: These examples are using 4.1.11 but should be similar to previous versions)

1. The links to the pages are defined in the admin section of x-cart, and are dynamic. They use the variable "tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>" inside a loop. This is in the skin1/customer/top_menu.tpl.

2. The top_menu.tpl uses {include file="customer/tab.tpl" tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>"} to call the title and display the link. Here is the tricky part... tab.tpl uses a series of images to "make" the "box" that the Speed Bar links are displayed in.

If you are not interesting in keeping the "box" then simply modify tab.tpl from...

<table cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td class="TabLeftSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
<td class="TabTop"><img src="{$ImagesDir}/spacer.gif" width="85" height="5" alt="" /></td>
<td class="TabRightSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
</tr>
<tr>
<td class="TabLeftSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
<td class="Tab"{$reading_direction_tag}>{$tab_title}</td>
<td class="TabRightSide"><img src="{$ImagesDir}/spacer.gif" class="TabSide" alt="" /></td>
</tr>
<tr>
<td class="TabLeftCorner"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
<td class="TabCenter"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
<td class="TabRightCorner"><img src="{$ImagesDir}/spacer.gif" class="TabCorner" alt="" /></td>
</tr>
</table>

to this..

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10"></td>
<td class="Tab">{$tab_title}</td>
</tr>
</table>

Since the class="Tab" declaration is included the Speed Bar will have whatever the defaullts are for the "Tab" class. You can define the text in the Speed Bar by changing the "Tab" class in your stylesheet (skin1.css). I used...

.Tab     { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none; background-color: transparent; text-align: center; vertical-align: bottom; height: 15px }
.Tab A:link  { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none }
.Tab A:visited  { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none }
.Tab A:hover  { color: #ff3300; font-weight: bold; font-size: 13px; text-decoration: underline }
.Tab A:active   { color: #fff; font-weight: bold; font-size: 13px; text-decoration: none 
}

But you will probably want to change it.

As always, make backups of any files you change so that you can revert them if you are not happy with the results.

In keeping with the original title of this thread, I usually move the Speed Bar to where the "Search" is. After banging my head against the wall trying to include the Speed Bar in the search.tpl I discovered it was easier to just include the search.tpl in the top_menu.tpl (and removing the "include seach.tpl" from where is was originally. I just replaced the "Company Phone" (actually I moved it to the bottom of the page, but that is a different subject) with the "Search". Here is my skin1/customer/top_menu.tpl...

{* Modified to include customer/search.tpl in title bar *}
{if $printable ne ''}
{include file="customer/top_menu_printable.tpl"}
{else}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>
{if $speed_bar}

<table border="0" cellpadding="0" cellspacing="0">
<tr>
{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<td>{include file="customer/tab.tpl" tab_title="<a href=\"`$speed_bar[sb].link`\">`$speed_bar[sb].title`</a>"}</td>
<td width="10"><img src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0" alt="/" /></td>
{/if}
{/section}
</tr>
</table>
{/if}
</td>
<td align="right">
{if $usertype eq "C"}
{include file="customer/search.tpl"}
{/if} 
</td></tr>
</table>
{/if}

This puts the Speed Bar links on the left and the Search on the right. It limits the length and number of links because otherwise it will "spill over" onto another line (or worse, extend the width of the page) but it allows about 6 links if the titles are not too long.

[Donnay2]

Thanks for helping me with the text-only speedbar. I could sure use some help understanding how to get the thin head lines positioned above and below the text.

I am trying to have the thin lines and the text in between. Ultimately, I want a vertical thin line separator between each speedbar link as well.

Any help?