Ein Style-Lifting für shareliterature.de

Vermutlich habt Ihr's schon gemerkt - wir haben Layout und Style von shareliterature.de in der letzten Zeit deutlich modernisiert.

Anlass dazu war ein Ausflug in die Welt der Wordpress-Blogs, den ich vor kurzem unternommen habe. Ich wollte mal schauen, welche Möglichkeiten Wordpress bietet, und ob wir unseren Blog nicht besser dort ansiedeln sollten (im Moment werden wir von Jimdo gehostet). So habe ich zum Ausprobieren eine Schwesterseite "shareliterature.wordpress.com" aufgebaut und alle unsere Artikel dort hinüberkopiert. Auf diese Weise gefüllt, konnten wir dann einfach die Funktionen dieses Softwarepakets ausprobieren.

Um es kurz zu machen: weder Jimdo noch Wordpress geben sich viel, was die technischen Möglichkeiten angeht. Es gibt eine ganze Reihe Detail-Unterschiede, und Wordpress ist sicher besser optimiert auf reine Blogseiten, aber dafür hat Jimdo die Shop-Funktion, und die wollen wir vielleicht ja irgendwann noch mal nutzen. Das alleine würde uns also nicht zum Wechseln bewegen.

Ein deutlicher Unterschied besteht aber im Styling der Seiten. So bietet Wordpress unzählige "Themes" genannten Style-Vorlagen, von denen die meisten wesentlich klarer und moderner aussehen als die Jimdo-Layouts. Der einfache Grund dafür ist vermutlich, dass bei Wordpress viele professionelle Grafikagenturen solche Stylesheets entwerfen und dann verkaufen, und um Werbung für sich zu machen produzieren sie auch freie Vorlagen die dann oft auch schon klasse aussehen.

 

Wie sieht das ideale Layout aus?

Einige schöne (und kostenlose) Beispiele aus der Wordpress-Welt sind "Sight" und "Suburbia" von WPShower sowie "Hatch" oder "Oxygen" von AlienWP. Am besten gefallen hat mir das Theme "Sight", dass ich auch für die Schwesterseite ausgewählt habe.

Tja, aber was sollten wir jetzt mit dem Jimdo-Account tun? Bezahlt haben wir ihn schon, aber mit den Layout-Möglichkeiten war ich nicht mehr zufrieden. Doch zum Glück kann man auch bei Jimdo das Design komplett ändern, wenn man sich mit HTML und Stylesheets etwas auskennt (es gibt auch noch einige wenige Anpassungsmöglichkeiten innerhalb des Layouts bei Jimdo, aber diese Möglichkeiten sind doch sehr beschränkt).

 

Und wie ändert man das Jimdo-Layout?

Ansatzpunkt dafür ist, dass man im Jimdo-Workcenter unter "Einstellungen" den Kopf der HTML-Seite ändern kann. Hier kann man dann auch Anweisungen des Jimdo-Stylesheets überschreiben. Dafür wichtig ist die "!important"-Angabe hinter jeder Wertzuweisung, da nur dadurch die aktuelle Anweisung eine höhere Priorität bekommt als die Angabe im Jimdo-Stylesheet.

Im folgenden ist der komplette Style-Bereich im Head unserer Seite angegeben, der damit auch das Aussehen entscheidend gestaltet (Ausgangspunkt ist hierbei das Layout P4127 von Jimdo):

<style type="text/css">

/*<![CDATA[*/

body {background: #27292a !important; width:1200px !important; padding: 50px 0 !important; margin-left: auto !important; margin-right: auto !important;}

div#cc-tp-content .gutter {padding: 15px 25px 15px 25px !important;}

div.gutter {background: #fff !important; color: #000 !important;}

div#emotion-header {width: 100% !important;}

.mainNav1 {border-top: 1px solid #d9d9d9 !important;background: #eeeeee !important;}

.mainNav1 li {float: left !important; display: block !important; border-left: 1px solid #d9d9d9 !important; text-align: center !important; text-transform: uppercase !important;font-family: Georgia, 'Times New Roman', serif !important;}

.mainNav1 li a {text-decoration: none !important; display: block !important; padding-top: 13px !important; padding-left: 14px !important; padding-right: 14px !important; margin: 0 0 !important;}

.mainNav1 li a {color: #000 !important; font-weight: normal !important; background: #eeeeee !important;}

.mainNav1 li a.parent, .mainNav1 li a.current {color: #fff !important; font-weight: bold !important; background: #AD3333 !important;}

.mainNav1 li:hover > a {color: #fff !important; text-decoration: underline ! important; background: #AD3333 !important;}

/*]]>*/

</style> 

Die folgenden Funktionen werden durch die einzelnen Zeilen implementiert:

  • body: diese Zeile stellt die Größe des gesamten Seitenbereiches, den dunkelgrauen Rahmen um die weiße Seite, und das Verhalten bei Reskalierung ein (feste Breite 1200 pixel). Der dunkle Rahmen bringt dabei die bunten Fotos auf der weißen Seite besser zum Leuchten und Strahlen.
  • div#cc-tp-content .gutter: Reduktion des rechten Randes zwischen Hauptspalte und rechter Spalte auf 25px.
  • div.gutter: Kopfbereich Hintergrundfarbe weiß, ebenso beim Menübereich für das Hauptmenü.
  • div#emotion-header: Breite des Logobereiches im Kopf auf 100%, damit man ein Logo ganz nach rechts schieben kann.
  • .mainnav1: die ersten 4 Zeilen dieses Abschnittes legen das generelle Aussehen des Hauptmenüs fest. Die nächsten beiden Zeilen bestimmen, wie die Menüpunkte beim Darüberfahren mit der Maus aussehen sollen (":hover"), bzw. für den aktiven Menüpunkt (".current").

Dabei bezeichnet der Dezimalpunkt ("div.xyz") immer eine komplette Klasse, für die die Angabe gelten soll (also alle <div class="xyz">), und die Raute ("div#xyz") ein bestimmtes Individuum (also <div id="xyz">). Weitere Hinweise zur Funktion von HTML, CSS und Javascript entnehmt Ihr am besten den umfangreichen Kompedien dazu im Netz, wie z.B. SelfHTML

 

Und woher weiß man, welchen Klassen man neue Attribute zuordnen muss? 

Doch wie kommt man letztlich darauf, welche Klassen oder IDs man ansprechen muss, wenn man das Aussehen von bestimmten Elementen auf der Seite verändern will? Das ist eigentlich ganz einfach: der Browser bekommt ja auch die Anweisungen dafür vom Server geschickt, und die meisten Browser bieten die Funktion "Seitenquelltext anzeigen" (IE) oder "Element untersuchen" (Chrome) an, mit der man dann den HTML-Quelltext anschauen kann. Insbesondere im Google Chrome ist die Funktion "Element untersuchen" sehr komfortabel, da sie auch eine Syntax-Aufbereitung enthält und live die HTML-Elemente auf dem Browser-Bildschirm kennzeichnet, in denen man sich gerade mit dem Cursor im Quelltext bewegt.

Noch ein Tipp zur Vermeidung von "Unfällen" beim Herumspielen im HTML-Kopf: man kann eine Seite hier durchaus unbrauchbar machen, indem man zum Beispiel den Hauptbereich so weit verschiebt, dass der Anmeldebutton nicht mehr erreichbar ist. Um dem vorzubeugen, ist es geschickt wenn Ihr Eure Webseite in 2 Browsertabs öffnet: im ersten loggt Ihr Euch dann ein und verändert den Head-Bereich, im zweiten Tab schaut Ihr Euch die Wirkung der Änderungen auf das Erscheinungsbild der Seite an. Dazu müsst Ihr hier aber natürlich immer die Seite wieder neu laden. So habt Ihr im Notfall immer noch die Möglichkeit im ersten Tab den Quelltext wieder in Ordnung zu bringen.

Zusätzlich zu den oben beschriebenen Änderungen im Seitenlayout habe ich noch über Javascript so wie im Wordpress-Theme "Sight" einen "featured post"-Slider eingebaut, den ich allerdings lieber in einem eigenen Artikel beschreiben werde, da dieser hier sonst zu lang wird.

 

Holger

Print Friendly and PDF

Kommentar schreiben

Kommentare: 0

Kontakt & Empfehlung:

Follow on Bloglovin

Jetzt online zum Download:

Klein. Fantastischer Roman
Klein. Fantastischer Roman

Rezept-Übersichten: