Zmiana szerokości sklepu

W pliku catalog/ includes/ languages/ polish/ center_shop.php odnajdujemy następujący fragment:
define('CENTER_SHOP_WIDTH','780'); // Width for the shop
gdzie 780 to szerokość w podana w pikselach. Aby rozciągnąć sklep na całą szerokość okna przeglądarki wpisujemy:

define('CENTER_SHOP_WIDTH','100%');


Zmiana koloru tła zewnętrznego

W pliku catalog/ includes/ languages/ polish/ center_shop.php odnajdujemy następujący fragment:
define('CENTER_SHOP_BACKGROUND_COLOR_OUT',"#808080"); // Use what bgcolor for the outside of the shop
W miejsce wartości #808080 wpisujemy dowolny kolor.


Zmiana koloru tła sklepu

W pliku catalog/ includes/ languages/ polish/ center_shop.php odnajdujemy następujący fragment:
define('CENTER_SHOP_BACKGROUND_COLOR',"FFFFFF"); // Use what bgcolor for the inside of the shop
W miejsce wartości FFFFFF wpisujemy dowolny kolor.


Dodawanie obramowania

W pliku catalog/ includes/ header.php odnajdujemy fragment (ok. linii 69):
<table CELLSPACING="4" CELLPADDING="6" BORDER="0" width="<?php echo CENTER_SHOP_WIDTH; ?>" align="center" BGCOLOR="<?php echo CENTER_SHOP_BACKGROUND_COLOR; ?>">
Jest to początek tabeli z zawartością sklepu. Dodajemy do tabeli id z unikalną nazwą, np:

<table id="tabGlowna" CELLSPACING="4" ...

W pliku catalog/ stylesheet.css dopisujemy następujący fragment:
#tabGlowna {
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
co oznacza, tabela będzie posiadać obramowanie z lewej i prawej strony, o grubości 1px będące linią ciągłą (solid) w kolorze czarnym (#000000).


Dodanie własnego logo

Domyślnie obrazek główny (logo) znajduje się w folderze catalog/ images. Aby zamienić na własny obrazek należy umieścić go w tym folderze, następnie uaktualnić plik catalog/ includes/ header.php (ok. linii 88):
<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td><?php
czyli podać włąściwą nazwę obrazka (zamiast oscommerce.gif) i wartość atrybutu alt="", title="" (zamiast osCommerce).

Jeżeli chcemy dezaktywować link do strony głównej prowadzący od obrazka należy w pliku catalog/ includes/ languages/ polish/ center_shop.php
define('HEADER_IMG_LINK_ON','1');
zamienić 1 na jakąkolwiek inną wartość oraz we fragmencie:
define('HEADER_IMG_PIC', 'thewebmakerscorner_logo.gif');
define('HEADER_IMG_ALT', ' osCommerce Professional ');
zamienić thewebmakerscorner_logo.gif na nazwę własnego obrazka i osCommerce Professional na właściwą wartość atrybutów alt="", title="".


Rozciągnięcie paska (obrazka górnego) do krawędzi

W pliku catalog/ includes/ header.php odnajdujemy fragment (ok. linii 69):
<table CELLSPACING="4" CELLPADDING="6" BORDER="0" width="<?php echo CENTER_SHOP_WIDTH; ?>" align="center" BGCOLOR="<?php echo CENTER_SHOP_BACKGROUND_COLOR; ?>">
Zmieniamy wartości CELLSPACING i CELLPADDING na "0".

W takim przypadku zmniejszą się również wszystkie odstępy w dolnej części sklepu. Jeśli chcemy je nieco poszerzyć musimy odszukać fragment:
<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
i zmienić wartości cellspacing i cellpadding na wyższe.
Jedyną niegodnością jest fakt, że należy to zrobić w ponad 40 plikach. Wszystkie, oprócz jednego (catalog\ includes\ modules\ Order_Info_Process.php), znajdują sie w folderze catalog/. Na szczęście z pomocą odpowiednich programów (np. darmowy WebSite PRO) można to zrobić "za jednym zamachem".


Zamiana wyglądu paska

Za wygląd paska odpowiedzialny jest plik catalog/ stylesheet.css, a dokładnie ten fragment (od linii 47) z dodanymi objaśnieniami:
TR.headerNavigation {
  background: #D4CECE;     kolor tła (zalecany jak w TD.headerNavigation)
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;     rodzaj czcionki
  font-size: 10px;     wielkość czcionki
  background: #D4CECE;     właściwy kolor tła
  color: #ffffff;     kolor napisów
  font-weight : bold;     pogrubienie
  height: 22;     wysokość paska (zalecane podać wartość z "px" np. 22px)
}

A.headerNavigation {
  color: #ffffff;     kolor linków
}

A.headerNavigation:hover {
  color: #ffffff;     kolor linków po najechaniu kursorem
}

Usunięcie/zmiana obrazków

Kod odpowiedzialny za obrazki znajduje się w pliku catalog/ header.php ok. linii 96:
td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a>&nbsp;&nbsp;<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?>&nbsp;&nbsp;</td>
Aby usunąć obrazki należy zamienić ten fragment na komentarz, czyli dopisać <!-- na początku i --> na końcu fragmentu. Można też, choć nie jest to zalecana praktyka, usunąć dany fragment.

W przypadku zmiany obrazków na własne należy je po prostu umieścić w folderze catalog/ images z odpowiednimi nazwami: header_account.gif, header_cart.gif, header_checkout.gif. Ich opis - atrybuty alt="" i title="", znajduje się w pliku catalog/ includes/ languages/ polish.php (ok linii 61). Są to stałe: HEADER_TITLE_MY_ACCOUNT, HEADER_TITLE_CART_CONTENTS i HEADER_TITLE_CHECKOUT.


Wymiana przycisków

Wszystkie przyciski polskojęzyczne znajdują się w folderze catalog/ includes/ languages/ polish/ images/ buttons.


Usunięcie/zmiana napisu "Co Nowego?" i obrazka

Kod związany z tym fragmentem znajduje się w pliku catalog/ index.php. Aby usunąć tę część należy zamienić na komentarz (<!-- i -->) następujący kod (od linii 393):
<tr>
        <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
            <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_default.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
          </tr>
        </table></td>
      </tr>
Komórka <td class="pageHeading"><?php echo HEADING_TITLE;?></td> zawiera stałą HEADING_TITLE - napis "Co Nowego?". Jej treść edytujemy w catalog/ includes/ languages/ polish/ index.php - linia 58.

W następnej komórce znajduje się obrazek table_background_default.gif z folderu catalog/ images.


Usunięcie/edycja napisu powitalnego

Tekst powitalny usuwamy zamieniając na komentarz (względnie usuwając) następujący fragment kodu w pliku catalog/ index.php (ok. linii 306):
<tr>
    <td class="main"><?php echo tep_customer_greeting(); ?></td>
  </tr>
   <tr>
     <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
    </tr>
Treść napisu zapisana jest w stałej TEXT_GREETING_GUEST w pliku catalog/ includes/ languages/ polish.php (ok. linii 306).


Zmiana koloru i czcionki dla tekstu i hiperłączy

Wszystkie właściwości tekstu oraz hiperłączy zapisane są przy użyciu kaskadowych arkuszów stylów - plik catalog/ stylesheet.css (od linii 18):

BODY {
  background: #808080;
  color: #000000;     kolor czcionki dla tekstu
  margin: 0px;
}

A {
  color: #000000;     kolor hiperłączy
  text-decoration: none;     brak podkreślenia
}

A:hover {
  color: #AABBDD;     kolor hiperłączy po najechaniu kursorem
  text-decoration: underline;     podkreślenie po najechaniu kursorem
}
Wielkość i rodzaj czcionek uzależnione są od przypisanej im klasy css. Łatwo to sprawdzić zaglądając do kodu źródłowego strony (w przeglądarce: Widok > Źródło strony). Dla wskazanego na rysunku fragmentu kod wygląda następująco:
<tr>
  <td class="main">Witaj <span class="greetUser">Nieznajomy!</span> Czy chcesz się <a href="http://www.skleptestowy.pl/catalog/login.php">
<u>zalogować</u></a>? A może jeszcze nie masz u nas konta i <a href="http://www.skleptestowy.pl/catalog/create_account.php">
<u>chciałbyś założyć</u></a>?</td>
          </tr>
Odnajdujemy więc klasę main w pliku stylesheet.css (linia 212) i zmieniamy wielkość oraz rodzaj użytej czcionki.