Zmiana szerokości boxu

Zmian dokonujemy w pliku catalog/ includes/ application_top.php w linii 13:
define('BOX_WIDTH', 140); // how wide the boxes should be in pixels (default: 130)
zamieniając szerokość 140 (pikseli) na żądaną.


Grafika w nagłówku boxa

Nagłowek boxu tworzą 3 komórki tabeli, w których znajdują się pliki graficzne:
- lewy narożnik: corner_left.gif
- środkowa część nagłówka: corner_right_left.gif (wąski pasek, który jest "rozciągany" na całą szerokość)
- prawy narożnik: corner_right.gif

Same pliki graficzne znajdują się w folderze catalog/ images/ infobox. Zamieniając grafikę na własną można pozostawić te same nazwy - wówczas nie trzeba nic zmieniać, nawet jeśli rozmiary naszych grafik są inne od oryginalnych.

Dodając grafikę o własnych nazwach (np. lewy.gif, srodek.gif, prawy.gif) należy dokonać zmian:
- plik catalog/ includes/ classes/ boxes.php (od linii 100, już uaktualniony), zamienia obrazki w narożnikach:
class infoBoxHeading extends tableBox {
  function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
    $this->table_cellpadding = '0';

    if ($left_corner == true) {
      $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/lewy.gif');
    } else {
      $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
    }
    if ($right_arrow == true) {
      $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
    } else {
      $right_arrow = '';
    }
    if ($right_corner == true) {
      $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/prawy.gif');
    } else {
      $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
    }
- plik catalog/ stylesheet.css (od linii 122):
TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #D4CECE url("images/infobox/srodek.gif");
  color: #f00;
Chcąc usunąć narożniki musimy zmodyfikować pliki z folderu catalog/ includes/ boxes. Każdy plik związany jest z jednym boxem, a więc zmian trzeba dokonać w tylu plikach, ile boxów chcemy zmienić. Musimy zatem odszukać następujący fragment kodu:
new infoBoxHeading($info_box_contents, true, true);
i zamienić wartości true na false. Pierwsza z wartości dotyczy lewego narożnika, a druga prawego.


Usunięcie strzałki z nagłówka

Strzałkę usuwamy dla każdego boxu z osobna. Domyślnie strzałki znajdują się w 4 boxach, są to pliki w catalog/ includes/ boxes: reviews.php, shopping_cart.php, specjals.php i whats_new.php. Kod odpowiadający za strzałki różni się nazwą pliku (dla reviews.php jest to FILENAME_REVIEWS) i wygląda następująco:
new infoBoxHeading($info_box_contents, true, true, tep_href_link(FILENAME_REVIEWS));
Usuwamy z niego zaznaczoną część lub zamieniamy na komentarz. Ponieważ ten fragment obejmuje kod php, więc komentarz powinien wyglądać następująco:

/*, tep_href_link(FILENAME_REVIEWS)*/


Tytuł nagłówka

Wszystkie właściwości tekstu nagłówkowego ustawiamy w pliku catalog/ stylesheet.css (od linii 122):
TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;     rodzaj czcionki
  font-size: 11px;               wielkość czcionki
  font-weight: bold;               zastosowanie tłustego druku
  background: #D4CECE url("images/infobox/corner_right_left.gif");
  color: #000;           kolor czcionki
}
Jeśli chcemy zmienić wyrównanie tekstu, np. do środka (domyślnie jest wyrównany do lewej) dopisujemy linię:

text-align: center;


Kolor i czcionka dla linków

Właściwości linków w boxach określone są w pliku catalog/ stylesheet.css. Klasa "boxText" (linia 12) odpowiada za rodzaj i wielkość czcionki:
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
natomiast kolor i sposób podkreślenia linków (linie 24-32) są takie same jak linków w treści sklepu. Jeśli chcemy określić nowy kolor (lub inne właściwości) wyłącznie dla linków z boxów dodajemy następujący zapis do pliku catalog/ stylesheet.css:
.boxText a {     link zwykły
  color: #00cc33;
}

.boxText a:hover {     link po najechaniu kursorem
  color: #00ff33;
}
Przykład powyżej zmienia jedynie kolor linków, ale możemy do poszczególnych klas dodać również inne właściwości.

Kolor linku odpowiadający kategorii, w której aktualnie jesteśmy (domyślnie czerwony) ustawiamy w klasie SPAN.errorText - ok. linii 295.


Ustawianie koloru tła i obramowania

Edytujemy plik catalog/ stylesheet.css (od linii 112) zgodnie z dopisanymi komentarzami:
.infoBox {
  background: #b6b7cb;     kolor tego tła jest kolorem obramowania
}

.infoBoxContents {
  background: #f8f8f9;     właściwy kolor tła boxu
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

Strzałki przy kategoriach

Kod związany ze strzałkami znajduje się w pliku catalog/ includes/ boxes/ categories.php (ok. linii 29):
if (tep_has_category_subcategories($counter)) {
  $categories_string .= tep_image(DIR_WS_IMAGES . 'cat_on.gif', '');
}
else {
  $categories_string .= tep_image(DIR_WS_IMAGES . 'cat_off.gif', '');
}
Strzałki cat_on.gif i cat_off.gif znajdują się w folderze catalog/ images. Aby usunąć całkowicie strzałki wystarczy zamienić na komentarz (/*   */) powyższy fragment.