X-Cart forums - Backgrounds

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Backgrounds (https://forum.x-cart.com/showthread.php?t=26543)

I have manged to alter my background through editing CSS.

Can any point me to how I can change the background to specific parts of my site.

The main one I'd like to change at the moment is the top part where my logo and speedbars are located.

You need to become best friends with "webmaster mode".

Once you determine which template you'e working in, you can easily make or edit a CSS class.

In your case, you will probably be editing /skin1/head.tpl

BUT -- depending on what's going on in your head.tpl you may be looking at a few other related templates (that's why you use webmaster mode).

Carpeperdiem,

Thanks, but where do I actually place the code.

For example the bottom of my site with the "copyright" text is in bottom.tpl

Where and what do I add to the following code:-

<TABLE border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<TR><TD class="VertMenuBorder"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" alt=""><BR></TD></TR>
<TR height="22" valign="middle" align="right">
<TD class="Bottom">
<TABLE border="0" width="100%" cellpadding="0" cellspacing="0"><TR>
<TD class="Bottom">{include file="main/prnotice.tpl"}</TD>
<TD class="Bottom" align="right">{include file="copyright.tpl"}</TD>
</TR></TABLE>
</TD>
</TR>
</TABLE>

Or am I looking at the wrong template?

What do you want to change?

If you want to change the copyright area, you see that there's a line:

Code:

<TD class="Bottom" align="right">{include file="copyright.tpl"}</TD>

In english:
1. TD is a table definition (section)
2. the class = "Bottom" -- ok, in your skin1.css, find a class called ".Bottom" -- this is one place where the css will influence your formatting.
3. {include file="copyright.tpl"} is exactly as it sounds... that means in the TD established here, with the css formatting defined here, the contents of /skin1/copyright.tpl will be placed here. If you evaluate the contents of copyright.tpl, you'll see it's calling on some language variables defined in the admin and your langauges...

Now, look at the skin1.css -- find ".bottom"
Mine looks like this (but it will be different than yours) -

Code:

.Bottom { padding: 2px 2px 2px 2px; border: 0px #DFDFDF solid; background: #FBDFFF; color: #000; text-align: center; font-size: 9px; }

You can edit the css parameters to taste.

The point of this is to try to show you that it's not all that difficult to edit if you know what you are looking for...

That's why you use webmaster mode -- to help find the template. And webmaster mode will also help you find nested templates (and in xcart, there are many!)

I am assuming you have basic knowledge of CSS, you have an FTP client with an integrated text editor...

Now, your original post said you wanted to:

Quote:

The main one I'd like to change at the moment is the top part where my logo and speedbars are located.

OK, so look in head.tpl (/skin1/head.tpl)
You know you want to search for "speedbar" - so see what's there -- in my head.tpl (which will be very different than yours) - I have this bit of code:

Code:

<td class="HeadLine" >

{ include file="speedbar/speedbar.tpl" }

{ include file="h4menu/h4menu.tpl" }

So, this means, there is a css class called "HeadLine" which determines the formatting of the td definition that contains my speedbar and h4menu templates. (in my case, my speedbar and h4menu templates also call their own css files, but that's more advanced than this message....)

If you don't understand the relationship between css and tables and how to format a td, etc, you may want to do some html and css homework.

Hope this helps.

Jeremy

Jeremy,

Thanks for the detail, as you've probably guess I'm no HTML expert.

I managed to get the .Bottom to change but having trouble changing the top part of the site.

When I change my .HeadLine on the background color of the search bar (accross the page) changes and nothing else. I actually want the part above the search bar line to be changed.

This is whats in there at the moment:

.HeadLine {
BACKGROUND-COLOR: #FFFFFF;
}

What am I doing wrong?

post your head.tpl and skin1.css

what exactly do you want it to look like?

Just want to change the colour of the section above the line that runs accross the page above search.

Also, where do I have the option to create variants. Can't find it where the user manual is saying it should be?

Everyone has different templates. Most people have modified or edited their templates to make their store look the way they want. Many of us don't have the line you are referring to. So post your template and css.

And -- DON'T hijack your own thread... if you have a new question (variants) make a new post -- nobody is going to read a post about backgrounds to help you with variants. PS -- variants are covered in the docs. As much as I hate to say it, RTFM and your variant questions will be answered.

All I really want to change is the top part of my site, ie: above the search line, compared with the rest of the background. I'm only using the standard xcart templates, nothing fancy yet.

Hope you can help.

Ok here is my CSS code:-

BODY,DIV,TH,TD,P,INPUT,SELECT,TEXTAREA,TT {
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-serif;
COLOR: #550000; FONT-SIZE: 12px;
}
A:link {
COLOR: #330000; TEXT-DECORATION: none;
}
A:visited {
COLOR: #330000; TEXT-DECORATION: none;
}
A:hover {
COLOR: #550000; TEXT-DECORATION: underline;
}
A:active {
COLOR: #330000; TEXT-DECORATION: none;
}
H1 {
FONT-SIZE: 12px;
}
H2 {
FONT-SIZE: 12px;
}
H3 {
FONT-SIZE: 12px;
}
HR {
COLOR: #DDDDDD; HEIGHT: 1px;
}
BODY {
MARGIN-TOP: 0 px; MARGIN-BOTTOM: 0 px; MARGIN-LEFT: 0 px; MARGIN-RIGHT: 0 px;
BACKGROUND-COLOR: #ffffff;background-image:url(images/bkgroundpic.gif);
}
.HeadBox {
BACKGROUND-COLOR: #FBDFFF;
}
.HeadText {
FONT-SIZE: 13px; FONT-WEIGHT: bold;
}
.HeadLine {
BACKGROUND-COLOR: #FFFFFF;
}
.VertMenuBox {
BACKGROUND-COLOR: #FFFFFF;
}
.VertMenuBorder {
BACKGROUND-COLOR: #6600cc;
}
.VertMenuTitle {
BACKGROUND-COLOR: #87CEFA ; COLOR: #ffffff; FONT-WEIGHT: bold;
}
.VertMenuItems{
COLOR: #330000; TEXT-DECORATION: none;
}
.VertMenuItems:link {
COLOR: #330000; TEXT-DECORATION: none;
}
.VertMenuItems:visited {
COLOR: #330000; TEXT-DECORATION: none;
}
.VertMenuItems:hover {
COLOR: #550000; TEXT-DECORATION: underline;
}
.VertMenuItems:active {
COLOR: #330000; TEXT-DECORATION: none;
}
.VertMenuHr {
COLOR: #FFFFFF;
}
.CategoriesList {
FONT-SIZE: 12px;
}
.DialogBox {
BACKGROUND-COLOR: #FFFFFF;
}
.DialogBorder {
BACKGROUND-COLOR: #6600cc;
}
.DialogTitle {
COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-SIZE: 11px;
}
.NumberOfArticles {
COLOR: #000000; FONT-WEIGHT: bold;
}
.TopLabel {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Text {
COLOR: #000000;
}
.DecorTr {
COLOR: #20B892;
}
.AdminSmallMessage {
COLOR: #FF3300;
}
.AdminTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.Line {
BACKGROUND-COLOR: #ffffff;
}
.ProductTitle {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductTitleHidden {
COLOR: #666666; FONT-WEIGHT: bold; FONT-SIZE: 11px;
}
.ProductDetailsTitle {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductDetails {
COLOR: #000000;
}
.ProductPriceTitle {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceConverting {
COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPrice {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 12px;
}
.ProductPriceSmall {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.MarketPrice {
FONT-SIZE: 14px; FONT-FAMILY: Times New Roman;
}
.ItemsList {
COLOR: #330000; FONT-WEIGHT: bold;
}
#Disabled {
COLOR: #909090;
}
.NavigationPath {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:link {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:visited {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.NavigationPath:hover {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: none;
}
.NavigationPath:active {
COLOR: #CC6666; FONT-WEIGHT: bold; TEXT-DECORATION: underline;
}
.FormButton {
COLOR: #330000; FONT-WEIGHT: bold;
}
.Button {
FONT-FAMILY: Arial;
BACKGROUND: URL(images/butbg.gif);
BACKGROUND-COLOR: #9966ff;
COLOR: #FFFFFF; FONT-WEIGHT: bold;
FONT-SIZE: 12px;
TEXT-DECORATION: none;
}
.CustomerMessage {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.ErrorMessage {
COLOR: #FF3300; FONT-WEIGHT: bold;
}
.Star {
COLOR: #FF0000;
}
.HighLight {
BACKGROUND-COLOR: #FFFFCC;
}
.SaveMoneyLabel {
COLOR: #FFFFFF; FONT-WEIGHT: bold;
}
.TableHead {
BACKGROUND-COLOR: #CCCCCC; FONT-WEIGHT: bold;
}
.TableSubHead {
BACKGROUND-COLOR: #EEEEEE;
}
.TableLine {
BACKGROUND-COLOR: #F0F0F0;
}
.SmallNote:link {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:visited {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:hover {
COLOR: #7C4C00; TEXT-DECORATION: underline; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallNote:active {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.SmallText {
COLOR: #7C4C00; TEXT-DECORATION: none; FONT-SIZE: 9px; FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
}
.Bottom {
BACKGROUND-COLOR: #ffffff;--#cc66ff#FFD44C-- COLOR: #ffffff--#9966FF#8E4B00;
}
.Tab {
BACKGROUND-COLOR: #FFD44C; change color of tabs
FONT-WEIGHT: bold; FONT-COLOR: #ffffff;
TEXT-TRANSFORM: uppercase;text: #FFFFFF; FONT-WEIGHT: bold;
FONT-SIZE: 11px;

}
.CatMenuItemOff
{
BACKGROUND-COLOR: transparent; /* like "VertMenuBox" */
BORDER-RIGHT: none; /* like "VertMenuBox" */
BORDER-TOP: none; /* like "VertMenuBox" */
BORDER-LEFT: none; /* like "VertMenuBox" */
BORDER-BOTTOM: none; /* like "VertMenuBox" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatMenuItemOffExp
{
BACKGROUND-COLOR: transparent; /* like "VertMenuBox" */
BORDER-RIGHT: none; /* like "VertMenuBorder" */
BORDER-TOP: none; /* like "VertMenuBorder" */
BORDER-LEFT: none; /* like "VertMenuBorder" */
BORDER-BOTTOM: none; /* like "VertMenuBorder" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatMenuItemOn
{
BACKGROUND-COLOR: #FF8600; /* like "VertMenuTitle" */
BORDER-RIGHT: 1px solid #FF8600; /* like "VertMenuBorder" */
BORDER-TOP: none; /* like "VertMenuBorder" */
BORDER-LEFT: none; /* like "VertMenuBorder" */
BORDER-BOTTOM: none; /* like "VertMenuBorder" */
MARGIN-BOTTOM: 1px;
MARGIN-TOP: 1px;
MARGIN-LEFT: 2px;
MARGIN-RIGHT: 3px;
CURSOR: pointer;
}
.CatSubMenu
{
BACKGROUND-COLOR: #cc66ff; /* like "VertMenuBox" */
BORDER-RIGHT: #8E4B00 1px solid; /* like "VertMenuBorder" */
BORDER-TOP: #8E4B00 1px solid; /* like "VertMenuBorder" */
BORDER-LEFT: #8E4B00 1px solid; /* like "VertMenuBorder" */
BORDER-BOTTOM: #8E4B00 1px solid; /* like "VertMenuBorder" */
MARGIN-LEFT: 1px;
MARGIN-RIGHT: 2px;
}
.CatMenuItem
{
FONT-SIZE: 12px;
FONT-FAMILY: Arial;
CURSOR: pointer;
}
.CatMenuItem:link
{
COLOR: #330000; /* like "VertMenuItems" */
}
.CatMenuItem:visited
{
COLOR: #330000; /* like "VertMenuItems" */
}
.CatMenuItem:hover
{
COLOR: #330000; /* like "VertMenuTitle" */
}
.CatMenuItem:active
{
COLOR: #330000; /* like "VertMenuItems" */
}
.NavDialogTitle {
font-size: 11px;
font-weight: bold;
color: #9966ff;
}
.NavDialogBorder {
background-color: #9966ff;
}
.NavDialogBox {
background-color: #FFFFCC;
}
.PopupHelpLink {
FONT-SIZE: 9px;
COLOR: #330000;
TEXT-DECORATION: none;
}
.SubHeader2 {
COLOR: #666666;
font-size: 11px;
FONT-WEIGHT: bold;
}
.SubHeader2Line {
BACKGROUND-COLOR: #CCCCCC;
}
.HightLightRow {
BACKGROUND-COLOR: #B0B0B0;
font-weight: bold;
}
.HightLightEqualRow {
BACKGROUND-COLOR: #ffe8af;
}
.VertMenuSubTitle {
BACKGROUND-COLOR: #FFA92F;
}
.SpecialOffersPrice {
COLOR: #FF3300; FONT-WEIGHT: bold; FONT-SIZE: 14px;
}

Here is my head.tpl code:-

{* $Id: head.tpl,v 1.40.2.4 2005/11/15 09:25:38 max Exp $ *}
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD width="4"> </TD>
<TD><A href="{$http_location}"><IMG src="{$ImagesDir}/xlogo.gif" width="275" height="70" border="0"></A></TD>
<TD valign="top" align="right">
{if $usertype eq "C"}
{include file="customer/top_menu.tpl"}
{/if}
</TD></TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD colspan="2" class="VertMenuBorder"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
</TR>
<TR>
<TD class="HeadLine" height="22">
{if $usertype eq "C"}
{ include file="customer/search.tpl" }
{/if}
</TD>
<TD class="HeadLine" align="right">
{if ($usertype eq "C" || $usertype eq "B")and $all_languages_cnt gt 1}
<TABLE border="0" cellpadding="0" cellspacing="0">
<FORM action="home.php" method="GET" name="sl_form">
<INPUT type="hidden" name="redirect" value="{$smarty.server.PHP_SELF}?{$smarty.server.Q UERY_STRING|escape}">
<TR>
<TD>
<B>{$lng.lbl_select_language}: </B>
<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>
</TD></TR>
</FORM>
</TABLE>
{else}
 
{/if}
</TD>
</TR>
<TR>
<TD colspan="2" class="VertMenuBorder"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
</TR>
{******** Remove this line to display how much products there are online ****
<TR>
<TD colspan="2" class="NumberOfArticles" align="right">{insert name="productsonline"} {$lng.lbl_products} {if $config.Appearance.show_in_stock eq "Y"}{$lng.lbl_and} {insert name="itemsonline"} {$lng.lbl_items} {/if}{$lng.lbl_online} </TD>
</TR>
**** Remove this line to display how much products there are online ********}
<TR>
<TD colspan="2" valign="middle" height="32">
<TABLE cellspacing="0" cellpadding="0" border="0" width="100%" height="18">
<TR>
<TD><IMG src="{$ImagesDir}/spacer.gif" width="1" height="18" border="0"></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="100%" valign="middle" align="right">{include file="printable.tpl"}</TD>
<TD><IMG src="{$ImagesDir}/spacer.gif" width="176" height="1" border="0"></TD>
{/if}
</TR>
</TABLE>
</TD>
</TR>
</TABLE>