Die Internetseite gutscheindatenbank.de beruht auf WordPress und nutzt das Theme „Portal“, das von theme-junkie.com designed und programmiert wurde. Es handelt sich dabei um ein Layout in 4 Kolumnen, die wesentlichen Eigenschaften des Themes werden in der CSS-Datei, die sich im Ordner themes/gutscheindatenbank/style.css befindet, festgehalten. In dieser Style CSS gibt es die im Code festgeschriebenen Anleitungen für insgesamt 25 unterschiedliche Bereiche, wir wollen in diesem Text die wesentlichen Abschnitte kurz analysieren:
Hyperlinks:
In diesem Bereich werden Form und Aussehen der Links, die auf andere Webseiten verweisen, definiert. Die Basisdefinition für aktive und besuchte Links ( a, a:visited, a:active { color: #222; text-decoration: none; } ) ist die Farbe #222222, ein sehr dunkles – fast schwarzes – grau. Links, die mit der Cursor überfahren werden, werden dagegen in einem angenehmen blau und unterstrichen dargestellt ( a:hover { color: #16387c; text-decoration: underline; }
). Die Codezeile a img { border: none; } garantiert, dass verlinkte Bilder ohne dem ansonsten üblichen farbigen Rand dargestellt werden.
Header:
Der Header ist mit den Maßen 982px x 60px in einer normalen und durchschnittlichen Größe. Da die Seite unter 1000px bleibt, kann sie auch von kleineren Monitoren problemlos dargestellt werden. Die Überschrift „Gutschein Datenbank“ wird von der Klasse .textlogo in 36px Größe und der Farbe color: #16387c dargestellt. Im div-container mit der id #headline gibt es mit den Klassen .links und .rechts die Möglichkeit zwei gut positionierte Einträge zu machen. Dies wird auf der Seite gutscheindatenbank.de für den RSS-feed (links) und das Impressum (rechts) genutzt.
Sidebar:
Hier werden die beiden – für WordPress typischen Sidebars definiert. Im vorliegenden Theme gibt es die id #sidebar { float: right;background: #fff;width: 300px; } für die rechte Sidebar und die Klasse .leftsidebar { width: 160px; margin: 10px 0px 0px 0px; } für die linke Sidebar. Zusätzlich werden in diesem Abschnitt die Farben der Links in den Sidebars definiert.
Footer:
In diesem Bereich wird der unterste Seitenabschnitt (der Footer) codiert. Ihm wird eine Farbe und ein Hintergrundbild zugewiesen. ( #footer {background: #ddd; background-image: url(images/bg.jpg);} ) Weiters werden die Schriftgrößen für diesen Bereich festgehalten.
