X-Cart forums

[jillsybte]

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

[pnm]

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.

[jillsybte]

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:

#speedbar A:link {
COLOR: #000000;
TEXT-DECORATION: none;
}
#speedbar A:visited {
COLOR: #000000;
TEXT-DECORATION: none;
}
#speedbar A:hover {
COLOR: #FF0000;
TEXT-DECORATION: underline;
}
#speedbar A:active {
COLOR: #000000;
TEXT-DECORATION: none;
}

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):

<table cellpadding="0" cellspacing="0" dir="ltr">
<tr>
<td class="TabLeftSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabTop">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabRightSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td class="TabLeftSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
{*** Add speedbar id to cell ***}
<td id="speedbar" class="Tab"{$reading_direction_tag}>{$tab_title}</td>
<td class="TabRightSide">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
<tr>
<td class="TabLeftCorner">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabCenter">[img]{$ImagesDir}/spacer.gif[/img]</td>
<td class="TabRightCorner">[img]{$ImagesDir}/spacer.gif[/img]</td>
</tr>
</table>

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!

Jill

[ecommerce]

good tutorial, thanks!

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

[pnm]

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?

[jillsybte]

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:

<div align="center">

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

</div>

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

<div align="center">
<table width="83" border="0" cellspacing="3" cellpadding="0" height="78">
<tr height="23">
<td align="center" valign="middle" height="23">[img]{$ImagesDir}/Visa_Logo.gif[/img]</td>
<td align="center" valign="middle" height="23">[img]{$ImagesDir}/MC_Logo.gif[/img]</td>
</tr>
<tr>
<td align="center" valign="middle">[img]{$ImagesDir}/Disc_Logo.gif[/img]</td>
<td align="center" valign="middle">[img]{$ImagesDir}/Amex_Logo.gif[/img]</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">

</td>
</tr>
</table>
</div>

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:

{include file="customer/home_main.tpl"}


</td>
<td class="VertMenuRightColumn">
{if $active_modules.SnS_connector && $config.SnS_connector.sns_display_button eq 'Y' && $sns_collector_path_url ne ''}
{include file="modules/SnS_connector/button.tpl"}


{/if}
{if $active_modules.Feature_Comparison ne "" && $comparison_products ne ''}
{include file="modules/Feature_Comparison/product_list.tpl" }


{/if}
{include file="customer/menu_cart.tpl" }


{*** Place customer/special.tpl here ***}
{include file="customer/special.tpl"}
{if $login eq "" }
{include file="auth.tpl" }
{else}
{include file="authbox.tpl" }
{/if}
{*** Add PaymentTypesGraphic.tpl and Paypal seal here ***}
{include file="PaymentTypesGraphic.tpl"}
{include file="PaypalSeal.tpl"}

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.

[pnm]

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?

[jillsybte]

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:

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

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.

{if $login eq "" }
{include file="auth.tpl" }
{else}
{include file="authbox.tpl" }
{/if}

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

[pnm]

Thanks Jill

It was the old If statement

[pnm]

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