An folgenden Elementen wurde heute gearbeitet:

• Seiten Rand ganz oben war abgeschnitten und wurde nun “geflickt”.
• Optimieren des Grundlayouts. Verschiede Ecken wurde mit CSS3-Befehlen abgerundet. Unter anderem das Such- und Zitierfeld.
• Die horizontale Navigation unterhalb der Bannergrafik wurde weiter optimiert.
• Die Sidebar Schriften wurden verändert.
• Was weiter folgen wird sind umfangreiche Arbeiten am eigentlichen Design.
• Was verworfen wurde ist, dass Menüelemente mit einer eigenen Schrift dargestellt werden sollen. Wegen rechtlichen Überlegungen wurde dies aber auf Eis gelegt.
• Das Testblog-Theme ist übrigens so gestaltet, dass verschiedene Farbkombinationen möglich sein werden.

Offene Arbeiten:

• Weitere Optimierung an der Navigation
• Integration von Lightbox, damit Bilder direkt im Fenster angezeigt werden können.
• Bei der Kommentarfunktion sollen Formatierungsknöpfe programmiert werden.
• Verschiedene Designvorlagen für das eigentliche Theme erstellt werden.
• Umfangreiche Tests an verschiedenen Browsern mit verschiedenen Betriebssystemen.

Folgendes kommt in die style.css:

.calendar {
background: #ebebeb;
font-family: “Helvetica Neue”, Arial, Helvetica, “Nimbus Sans L”, sans-serif;
float: left;
margin-right: 20px;
width: 55px; height: 60px;
font-size: 12px;
border: 1px solid #3a80c4;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

}
.calendar > span {
display: block;
}
.calendar > .month {
background: #3a80c4;
padding: 0 2px 0 2px;
text-align: center;
color: #ffffff;
}
.calendar > .day {
background: #ebebeb;
padding: 2px 0 2px 0;
text-align: center;
font-weight: bold;
font-size: 24px;
color: #000000;
}

Der Code zeigt insbesondere bereits schon CSS3-Anweisungen. Diese ermöglichen die abgerundeten Ecken. Was wesentlich eleganter aussieht. Jedoch kann es Darstellungsabweichungen je nach verwendetem Browser kommen…

An zwei Stellen in der loop.php-Datei:

<div class=”calendar”>

<span><?php the_time(M); ?></span>

<span><?php the_time(d); ?></span>

</div><!– calendar –>

<?php else : ?>

<div class=”entry-content”>

<?php else : ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

In der Datei Header folgende Zeile suchen:

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”" />

Direkt davor folgenden Code einfügen:

<a href=”http://www.deineDomain.ch”>

Am Ende der Zeile ersetze “/>” mit </a>. Zum Schluss ersetze alt=”" mit alt=”Blog Titel | Blog Beschreibung”. Dieser letzte Punkt ist raffiniert und ermöglicht barrierefreies Browsen. Sind Bilder laden im Browser deaktiviert, erscheint doch der Titel mit der Beschreibung….