Backgrounds
 

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.

Re: Backgrounds
 

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

Re: Backgrounds
 

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?

Re: Backgrounds
 

What do you want to change?

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


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

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

Re: Backgrounds
 

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?

Re: Backgrounds
 

post your head.tpl and skin1.css

what exactly do you want it to look like?

Re: Backgrounds
 

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?

Re: Backgrounds
 

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.

Re: Backgrounds
 

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;<!--This colours the search line -->
}
.VertMenuBox {
BACKGROUND-COLOR: #FFFFFF;<!-- Inside the menu boxes -->
}
.VertMenuBorder {
BACKGROUND-COLOR: #6600cc;<!--Borders around the boxes -->
}
.VertMenuTitle {
BACKGROUND-COLOR: #87CEFA <!--Background of Box Title-->; COLOR: #ffffff;<!--this is the font colour area--> 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;<!--inside featured section-->
}
.DialogBorder {
BACKGROUND-COLOR: #6600cc;<!--Border of featured products-->
}
.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: <!--#FFD44C***-->#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;<!--#330000;-->
}
.NavDialogBorder {
background-color: #9966ff<!--#FFCC33-->;
}
.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;
}

Re: Backgrounds
 

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">&nbsp;</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}:&nbsp;</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}
&nbsp;
{/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}&nbsp;</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>

Re: Backgrounds
 

Do you mean the background colour on the header ??

ie in head.tpl

change ...
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">

to ...
<TABLE bgcolor="#FF0000" border="0" cellpadding="0" cellspacing="0" width="100%">

= Red Background

Re: Backgrounds
 

What I think you want is to change the background-color ABOVE the search line, yes?

There is more than one way to accomplish this...

one way (perhaps the easiest way) is to define a new class for the first <tr>

FIND

REPLACE WITH

THEN -- add a class to your CSS (it can go anywhere):
(obviously replace ffffff with your intended background color)

This is CSS 101... if you're going to get deeper into xcart, you would benefit greatly by knowing some basic css and html. I encourage you to buy a book or read the many tutorials available on the net.

Good luck.

Re: Backgrounds
 

Thanks to both of you for your help.

Jeremy I have to admit, I've programmed in many languages, just not HTML but I'm learning.

So I have applied the new class, which makes it neater and easier for changes.

Thanks again for all your help