osCommerce Knowledge Base

Text im Box Header durch Bild ersetzen

Zuletzt aktualisiert: 22nd November, 2005
Beitrag ID: 273

Einleitung
Lösungen

Header Text Ersetzen
Verwendung von CSS (Cascading Style Sheets)

Einleitung

Bilder können zu jeder Box welche in colum_left.php und colum_right.php angezeigt wird, wobei das gleiche Bild für alle Boxen oder andere Bilder für andere Boxen.

Lösungen

Header Text Ersetzen
Verwendung von CSS (Cascading Style Sheets)

Header Text Ersetzen

Eine einfache methode ist es einfach den Heading Text mit einem Bild zu ersetzen.

Dieses kann durch bearbeiten der Haupt-Sprach Datei im includes/languages/ verzeichniss zb. includes/languages/german.php.

Um den Kategorie Box Header Text durch ein Bild zu ersetzen, muss die Titel definition von BOX_HEADING_CATEGORIES geändert werden. Zb.



define('BOX_HEADING_CATEGORIES', 'Categories');

Ändern in:



define('BOX_HEADING_CATEGORIES', '<img src="images/categories_header_titel.gif">');

Verwendung von CSS (Cascading Style Sheets)

Die Erweiterte methode ist neue CSS definitionen für jede box zu erstellen wo Bilder verwendet werden sollen.

Das folgende Beispiel zeigt die erforderlichen änderungen anhand der Kategorie Box. Dazu müssen folgende Dateien bearbeitet werden:

includes/classes/boxes.php
includes/boxes/categories.php
stylesheet.css

Am ende der Datei includes/classes/boxes.php vor dem ?> Tag folgendendes hinzufügen:



class infoBoxHeadingCategories extends tableBox {

    function infoBoxHeadingCategories($contents) {

      $this->table_cellpadding = '0';



      $info_box_contents = array();

      $info_box_contents[] = array(array('params' => 'width="100%" class="infoBoxHeadingCategories"',

                                         'text' => $contents[0]['text']));



      $this->tableBox($info_box_contents, true);

    }

  }

Der obere Code erstellt eine neue Classe mit dem Namen infoBoxHeadingCategories welche für die Kategorie Box verwendet wird.

Folgender Code in includes/boxes/categories.php:



new infoBoxHeading($info_box_contents, true, false);

sollte geändert werden in:



new infoBoxHeadingCategories($info_box_contents, true, false);

Da die neue infoBoxHeadingCategories Classe eine neue Stylesheet definition verwendet, muss noch folgendes in die stylesheet.css Datei:



TD.infoBoxHeadingCategories {

  background: #33c3d3;

  background-image: url('images/irgend_eine.gif');

  background-repeat: no-repeat;

}

Die neue Classe im Stylesheet kann Attribute wie font, size, spacing und so weiter haben.

Linktip
http://www.css4you.de/