Blog-Trainer

WordPress-Seminare seit 2006

Design und Layout: Vom Blog zum Internet-Magazin (4)

| 6.459 mal gelesen |

In dieser Gastbeitragsserie beschreibt Karsten Wenzlaff die Umgestaltung des Blogs Nachhall-Texter.de zu einem Internet-Magazin.

Nachhall-Texter im Branford-LookNachdem das Basis-Thema ausgewählt worden ist, muß das Layout angepasst werden. Das Ziel ist, das Thema Branford-Magazin in ähnlichen Farben laufen zu lassen wie das aktuelle Thema Almost Spring.

Als erstes geht es an das Titelbild. Beim Branford-Magazin-Thema besteht der Titel aus einem Bild, schöner ist es aber, wenn der Name des Blogs angezeigt wird. Das Tutorial von Michael Oeser ist sehr hilfreich bei der Umstellung, denn man muß einfach in der Datei header.php die Kommentarschrägstriche an der für den Titel vorgesehen Stelle entfernen:
<div class="blogtitle" ><a href="<?php echo get_option('home'); ?>/"> <?php //bloginfo('name'); ?> </a></div> <div class="description"> <?php //bloginfo('description'); ?>
Michael empfiehlt zwar, auch in style.css im #branding-Container den Verweis auf das Hintergrundbild background: url(images/backgrounds/bg_branding.png) no-repeat; durch background:none; zu ersetzen, wenn man das aber nicht macht, hat man sowohl Text-Titel als auch ein nettes Hintergrundbild (welches natürlich entsprechend umbenannt werden muss).

Jetzt geht es an die Farben. Das Grau-in-Grau des Original-Themas ist nicht sehr schön. Daher müssen ein paar Änderungen in style.css gemacht werden:

  • Im body-Container wird die Hintergrundfarbe geändert: background: #E8E8CE;
  • Den Containern für die Links a:link und a:visited bzw a:hover und a:active werden die Farben #E58712 und #9BBB38 zugewiesen. Durch die andere Farbwahl kann darauf verzichtet werden, Links zu unterstreichen, daher wird text-decoration:underline; auskommentiert.
  • Die zwei grauen Streifen sind auch nicht so schön. Im #page-Container wird daher der Rahmen border neu eingefärbt (#80904F;) und ich werde mich mal mit meiner Mitherausgeberin beratschlagen, ob die doppelten Streifen in einfache Streifen umgewandelt werden sollen (dazu einfach aus der gleichen Zeile das double löschen).
  • Als nächstes wird auch die Titelüberschrift im .blogtitle-Container mit #80904F;, die h1-, h2-, h3- und sidebar-Überschriften und die Titel-Überschrift .title mit #9bbb38; neu eingefärbt.
  • Um die Menüleisten zu ändern, muss man die nav.css-Datei bearbeiten. Im #nav-Container die Hintergrundfarbe der Menüleiste ändern background:#9bbb38 sowie die Farben der Links a:hover auf background:#80904f; setzen.
  • Als letztes bleibt noch das Hintergrundbild im Lead-Artikel, das arg grau ist und daher einen anderen Anstrich gut gebrauchen könnte. Mit einem Grafikprogramm (wie zB. dem kostenlosen aber sehr guten Gimp) kann man schnell die Dateien bg_leadarticle.jpg und bg_featured.jpg im images-Verzeichnis einfärben. Allerdings ist es damit noch nicht getan, denn das Bild hat einen dicken unteren Rand, der in der Farbe des Bildes eingefärbt werden muss. Dazu in der Datei ui.tab.css im ui.tabs-panel-Container die background-Farbe auf #f2d596 setzen. Dabei gleich auch die Überschrift im .ui-tabs-panel .title-Container einfärben.

Ohne das Forum wären diese Änderungen sicherlich nicht so einfach gewesen. Wahrscheinlich sind das nicht die letzten Änderungen im Style-Sheet, aber so erhält das Magazin zumindestens einen eigenen Charakter. Was meint Ihr, wie gefällt Euch das neue Layout?

Nachhall-Texter im Branford-Look

Nachhall-Texter im Branford-Look

Design und Layout: Vom Blog zum Internet-Magazin (4) auf Facebook teilen
Design und Layout: Vom Blog zum Internet-Magazin (4) auf Twitter teilen
Design und Layout: Vom Blog zum Internet-Magazin (4) auf Google Plus teilen
Design und Layout: Vom Blog zum Internet-Magazin (4) auf Xing teilen
Design und Layout: Vom Blog zum Internet-Magazin (4) auf LinkedIn teilen

Das könnte Sie auch interessieren:

7 Kommentare

  1. Sieht professionell aus und vermittelt Seriosität. Mir persönlich gefällt es sehr. Finde es toll, dass man die Entwicklung des Magazins hier mitlesen kann.

    Grüße
    steffen

  2. Danke, Steffen! Nachdem ich mit meiner Mitherausgeberin telefoniert habe, sind noch ein paar Designaenderungen hinzugekommen, die werden dann im naechsten Artikel diskutiert.

  3. Ich habe das Branford-Theme ebenfalls für ein Online-Magazin genutzt, aber um einige Inhalte ergänzt (u.a. Tag-Cloud im Header). Das Ergebnis gibt’s zu sehen unter http://www.zur-lage-der-nation.de.

  4. Pingback: Design, Leadartikel und Plugins: Vom Blog zum Internet-Magazin (5)

  5. Lars, sieht sehr gut aus bei Deiner Webseite und uebrigens auch ein tolles Politik-Kabarett-Programm!

    Haettest Du nicht auch Lust, an einer deutschen Huffington-Post-Version mitzumachen?

  6. eine frage, wie bekommt man die höhe des features articles geändert..ist mir zu hoch.. gruss jm

  7. hallo ganz toll, die erklärungen.. habe eine frage.. wie kann ich unter die suchbox im header bspw. ein kleines icon mit verlinkung einbauen.. bspw. ein twitter follow icon ? keine ahnung wo ich das machen könnte.. wenn sie mal bei gelegenheit einen tipp hätten weil sie das schon wissen, herzlich willkommen.. grüsse aus münchen jürgen mayer