Adding More Help Pages
 

Is it possible to add more help pages to the Help Zone? Instead of having a general Terms and Conditions area, I would like to have separate shipping, returns, etc. areas. I want them to appear (and be linked to) in the list in the Help menu, and also be linked to from the Help Zone page like the original pages (about, FAQ, etc.).

I tried making a shipping.tpl file in the Help directory patterned after the other help templates. I was able to get Shipping in the list in the help menu, but it links to the general Help Zone page. I looked at the other related templates listed in the debugging console, but can't see any logical code to change/add. I'm thinking what I want would require a change to the help.php and/or include/help.php files.

If it's too complicated or risky, I'll just live with the original set-up. I was just wondering if anyone knows of a feasible solution.

Thanks,
Jill

Just create new embedded static pages, they are automatically added to the help menu on the side. You would need to manually add the links to the help/general.tpl file, but that is pretty quick :)

Is this the only way?

I notice a "About us" template available in help/about.tpl which I'd like to modify and add to the Help section on my site. How can I do this?

I find it best doing it balinor's method, with that method you can have any look you want easily. What I did was create a new embedded static page for the main page of the help section, then create a tree of other static pages with the info. Make sure the "Parse Smarty tags in the content of embedded pages" checkbox is checked. It's probably best to use dreamweaver so you can get the look you want easier. Obviously the down side to this method is all the static pages show in the help section, I didn't want this, so you can easily modify the help section, here's what I did.

open up skin1/pages_menu.tpl

This is what you should see


Change it to something like this.


change the (15) to the number of the static page you want to show up in the help section. Copy that line with
at the beginning for every other static page you still want to show up. You'll also have to change {$lng.lbl_help_center_order_ship} for every line you want to add, this calls the text you want to show up in the help section, you create that in admin area under languages.

On the main static page you create for the help section use the same line to link to other help pages you create.

One other thing you might want to do, not sure how much it helps though, but it may speed up the loading of the static pages. Instead of using the normal html method, load all your text in the languages section and call it using the {$lng.} string, and uss the CSS for the formating.

If anyone knows if that should be done to optimize please let me know, it does take more time doing it that way, but I have a feeling thats the proper way. Any additional comments would be appreciated.

Thanks
Rob

How do you create new embedded static pages ?

Click on 'Static Pages' in your admin area.

Thanks, works like a charm

colour
 

Thanks for the static pages....worked a treat.

Although, still have one problem. The background colour of the dialog box heading is consistantly orange and I cant find where to change the colour. Can anyone help?

pnm,

In your Admin area, go to the "Edit Templates" section. In the main file list, find skin1.css and click on it to edit it. Look for the class .VertMenuTitle. This class sets the "Background-Color" (the color of the box) and "Color" (the color of the font for the title). Both of these can be changed to whatever you want.

The colors are in hexadecimal format (a 6-character alphanumeric made up of letters A-F and numbers 0-9, with the "#" in front). If you're not familiar with this, go here http://www.lynda.com/hex.asp#, and click on one of the links for the web colors organized by hue or value. Then just replace the original color code in the skin1.css file with the hex code for the color you want. The colors listed at this site are the 216 web-safe colors. You're better off sticking with these, but you can probably do a Google search on hexadecimal color codes to find a full palette of colors with their hex codes.

Also, you can change any colors in the skin1.css file to get the look you want for your store front. You can also change fonts, font sizes, etc. You can do the same with the skin1_printable.css and skin1_admin.css files in the same directory with skin1.css. If you use the Fast Lane Checkout module, it has a separate skin1.css file within its directory (modules/Fast_Lane_Checkout).

Oh, and something I just discovered... when you submit your order through your store, it goes to a page stating "Your order is being processed..." This page has the default orange color scheme. There is a template in the template directory "customer/main" called "payment_wait.tpl". It has its own styles within it so they override the .css files. If you don't like the color scheme, just edit the payment_wait.tpl file to your liking.

You can also ftp the .css files to your PC if you have a web-authoring program you prefer to use. They are located in the <x-cart dir>/skin1/ directory. The folder names within that directory correspond to the folder names you see in the Admin Edit Templates area. Just download the files, change them, and upload them back to the same place.

I hope that helps you. Good luck.

Jill :D

Thanks Jill...that fixed a few of the colours, but the main one I cant change is the background of the dialog box headings which starts off with "Featured Poducts".

pnm,

The color there is actually a background image. It is called dialog_bg_n.gif and it's in the <x-cart dir>/skin1/images directory. You can download that and use Paintshop or Photoshop to change its color and then upload it to the same location. You could also just create your own image of the same size and upload that with the same name. If you make your own images, make them 72 dpi resolution. I believe the image is 30 pixels high by 1000 pixels wide, but I'm not positive. I'm at work and can't access my server from here because of our firewall.

If you look in skin1.css, you'll see a class called TD.DialogTitle. That controls the box in question. If you decide to create your own image and you want it taller or shorter, make sure to change the height of the table cell for the title box as well. I think that is controlled by the home.tpl template, but I don't recall the exact directory it's in. If you don't want to be bothered with images, just replace the "background-image:" with "background-color:" and replace the image entry with a hex color code of your choosing.

The way background images work is that only what can be shown will show. So if your image is larger than the cell it's in, only part of the image will show. The way this particular cell works is that the image is the same height as the cell (30 pixels), but it's wider. Therefore, only the left portion of the image is seen. Keep this in mind if you design your own image.

Many of the buttons you see in your store are designed this way as well. They actually use curved images for the left and right side, or for the four corners. Then they use a little 1-pixel wide image as the background image in the table cell and turn on repeat-x. The image will just be repeated in the horizontal direction to fill the cell, but it will look like a single image when everything is put together.

If you design your own images or re-color the originals from X-Cart, make sure to use something like Paintshop, Photoshop, or Adobe Image Ready to optimize your images for the web. This will make them smaller in size for faster loading. If you simply re-color them and upload them, they'll be a lot bigger than the originals from X-Cart and slow down your store.

I hope this helps. I can probably be of more help when I'm at home and can access my server and all my files. So if you need further clarification, just ask.

Jill :D

Thanks for that Jill, it worked.

Got another one if you can help.

I'm trying to change the color of the text in the speed bars to white and I'm having fun finding exactly where to do this. I found the .tab section in the CSS file where I can change the background, but it wont let me change the font color.

Also, the border lines on the search bar, same issue.

I'd appreciate it if you could help.

pnm,

The text in the speedbar is for links, the color of which is defined separately. Near the top of the skin1.css file you'll see a series of 4 definitions beginning with "A:" (e.g., A:link). There are 4 definitions: link, visited, hover, and active. The link color is the color of the text in general. Once the link has been visited, the text will change to the visited scheme. When the user mouses over the link, the hover scheme will come into play. I think the active definition will only be used when a link opens a new window and that window is still open. Typically, link definitions are two-part: color and text-decoration (e.g., underline/no underline).

Now, here's the tricky part: these links are for the web page body in general. If you change those definitions, it will affect all your links except those defined by other classes. I ran into the same problem, so I defined a new ID style called "speedbar." I used an ID style instead of a class because the td element (cell) containing the speedbar text is already governed by the .Tab class and you can only have one class per element. Also, when defining links, it doesn't work to define them within classes because they are elements. I don't believe you can define elements within classes, but you can within ID styles.

So here are your options: you can simply change the link definitions and have your whole page affected, or you can create a new ID style just for your speedbar links. If you choose the second, you can add something like this to your skin1.css file:



You can change the colors/decorations as you please. Then you'll have to edit your tab.tpl template in the <x-cart dir>/skin1/customer directory. Edit it as follows (see the part in bold):


You just have to enter it for that one td cell. Now you'll have separate link colors defined for your speedbar, and they will override those defined for the general body.

The border lines for the search bar are controlled by the class .HeadThinLine in skin1.css. Just change the background color there to whatever you want.

I hope that helps. You'll a CSS expert in no time! :D

Jill

good tutorial, thanks!

in the future xcart should make it so we have custome menus, and can group the help pages in those menus.

thanks Jill
 

Thanks for that Jill.

I do have another one, how do I position the images on my site.

What I am trying to do is put the credit card images on my front page, and is there a way I can section of the top part of my home page so I can use a different colour?

pnm,

To add images other than product images, it's best to make your own templates. For instance, I made templates for my Comodo SSL seal, Paypal Verified seal, and credit card pics so they appear along the sides of my pages beneath the menu items (I use the default 3-column style). For example, the template I made for my Comodo seal (Comodo.tpl) looks like this:


and for my credit card pics (PaymentTypesGraphic.tpl):


I placed this and my other image-adding templates in my <x-cart dir>/skin1 directory (it appears in the main template directory of the template editing section of the Admin area). I placed the images themselves in the <x-cart dir>/skin1/images directory.

Next, go to your home.tpl template (in the skin1/customer directory) to add the templates you made in the locations you want them to appear. For instance, I placed my credit card pics (PaymentTypesGraphic.tpl) and Paypal seal (PaypalSeal.tpl) beneath the login box along the right side:


You can ceate your custom templates in Notepad or similar application and save with the .tpl extension. Then upload to the skin1 directory. You can also create new templates with the Admin template editor. Within your own templates, you can use line break (
) tags at the top and bottom to achieve the spacing you want between your image templates and the other items. You can also move other templates included in home.tpl up or down or from one side to the other to achieve the exact look you want.

As for changing the appearance of the home page only, I'm not really sure. The top section is controlled by head.tpl. However, it controls the top section of all pages, not just the home page. I don't know off the top of my head how you would change the appearance of just the home page. Maybe one of the experts who are active on this forum could help you there. You may want to post that question by itself under the appropriate topic.

I hope I helped with the image problem. Good luck. :D

Not working
 

Jill,

I tried the above with just my SSL logo and it seems to work when if preview it, although when I go into my site the logo doesn't appear.

I created a SSLLogo.tpl put the code in to pic up the image, when I preview at this point it shows me the correct gif.

Then, I added: {include file="SSLLogo.tpl"} under the auth box.

When I preview at this point, the logo is in the right spot. Although when I get into my site it's not there.

Am I missing something?

I'm not sure really, but check on a few things to make sure they're correct:

Make sure you uploaded the Gif image to the right directory: <x-cart dir>/skin1/images. Make sure it's not in the images folder in the main X-Cart directory. That's for product and category images.

Make sure your SSLLogo.tpl is in the <x-cart dir>/skin1 directory. That means it should show up in the main templates directory when you first go into "Edit Templates" in the Admin area.

Make sure you call the image properly in your SSL template:


The $ImagesDir variable refers to <x-cart dir>/skin1/images.

If you're placing your SSL template below the authbox template, make sure it's below the "{/if}" tag. Otherwise, your template is within the if statement that goes with the authbox template and will be affected by that.


Also, make sure you placed your include SSL template in the home.tpl file in the customer directory. Make sure it's not in the home_main.tpl file.

If all those things are correctly set up, then I can't imagine what the problem could be. If you're still having problems, try posting the full code of the SSL template you made and a section of the code of the home.tpl file around where you're including your SSL template. Good luck.

Jill

thanks
 

Thanks Jill

It was the old If statement

Re: Adding More Help Pages
 

Jill,

Sorry to bring this one up again, but need some clarification on the detail you provided on editing the tab.tpl. Am I adding all the code or just the bold part? If I add the whole thing where do I add it in the existing code? or do I remove some of the existing code? And where am I actually changing the colours? and what is the bold part of it doing?

Sorry just want to understand all of this before going ahead with it.

Thanks

Re: Adding More Help Pages
 

Hello,

I have a problem here.

I added the static page called test.

Now I see 3 test link in help box.

Does anyone know why?

Thanks!