Websitehintergrund mit Verlauf

Code & Blog Logo

Der Standardskin des CMS bekommt als Hintergrund einen Verlauf von #adadad nach #ffffff. Der Verlauf geht nur über 400px, damit auch Benutzer mit kleinen Auflösungen den Verlauf gut ansehen können. Unter dem Verlauf ist eine weiße Fläche.

Der Verlauf wird via Bild eingebaut. Das heißt, dass ein Bild mit dem Verlauf erzeugt wird, welches als Background-Image gesetzt wird. Dann muss eingestellt werden, dass dieser sich nur horizontal verläuft. Die Datei für das Bild befindet sich im Ordner images, des Skin-Verzeichnisses. Der Name ist bg.jpg.

Wer sein Bild nicht selbst machen möchte, kann das nehmen:
Das Bild wurde leider entfernt
Das Bild wird nun im Style-Tag der Datei index.php im Verzeichnis system/skins/default als Hintergrund gesetzt. Die Hintergrundfarbe wird nun auf #fff für weiß gesetzt. Als letztes wird noch mit background-repeat angegeben, dass es sich horizontal wiederholt:

      body{
        background-color: #fff;
        background-image: url('system/skins/default/images/bg.jpg');
        background-repeat:repeat-x;
        color: <?PHP echo sys::getColor("forecolor"); ?>;
      }
      a{
        color: <?PHP echo sys::getColor("highlight1"); ?>;
      }
      a:visted{
        color: <?PHP echo sys::getColor("highlight2"); ?>;
      }

Und hier ist mein Ergebnis (Es kann sich in der Zwischenzeit geändert haben):

http://cms.stevieswebsite.de/testseite.htm

Dies ist ein Beitrag aus der Aktion Code & Blog, in der hier ein eigenes CMS erstellt wird.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Kommentare

Fynikoto schrieb am 31.08.2010:

Damit das Bild nicht statisch ist und man auch die Farben von "bgcolor" (was ja der user setzten kann) nach weiß laufen lassen kann, kann man auch eine schöne kleine funktion schreiben, die das 1px x 400px bild erzeugt. Das Bild wird beim anwender ja gecached und wenn man sich darauf nicht verlassen will, könnte man es mit ZEND Cache zum beispiel serverseitig cachen (soviel zur performance) ;) function createBGImage($height, $topColor, $bottomColor) { // die Werte in kürzere Veriablen portieren^^ $s = $topColor; $e = $bottomColor; // Bild erzeugen $image = imagecreate(1, $height); for ($i = 0; $i 173, "g" => 173, "b" => 173), array("r" => 255, "g" => 255, "b" => 255)); Mit freundlichen Grüßen Fynikoto

Fynikoto schrieb am 31.08.2010:

och nö -.- jezz hat das doofe blog meinen Qt geschluckt... nochmal schreibe ich das net. ist aber auch einfach. weißt was ich meine :) BTW: sehr schön gemacht :) bin zwar noch am anfang dienes Tuts, aber gefällt mir recht gut. Lese es grad aus interesse, weil ich selbst ein CMS geschrieben habe, das von den funktionen recht umfangreich ist, da ich das aber geschrieben habe, als ich 16 war, ist es doch eher unstrukturiert^^ Weiter so *THUMBS UP* LG Fynikoto PS: nen htmlentities oder specialChars würde dazuführen, dass man QT nicht geschluckt wird^^

Stefan BraQ schrieb am 01.02.2012:

Hab erst jetzt meinen Fehler bemerkt vllt. ist er auch früher aufgetretten. Wenn ich auf einen der Links klicke, damit ich auf eine der anderen Testseiten komme, koommt 404 Page not found. Woran könnte das liegen :S

Stefan Wienströer schrieb am 01.02.2012:

Hört sicht an als würdest du auf eine Seite gehen, die es nicht gibt ;-)

Stefan BraQ schrieb am 01.02.2012:

da wäre ich fast selbst drauf gekommen :D aber woran liegt das, ich habe es exakt nach deiner Anleitung programmiert.

Stefan Wienströer schrieb am 02.02.2012:

Wie ist denn die Url die du aufrufen möchtest?

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project