Wer zu verschiedenen Tageszeiten bei Blogmix vorbeischaut, der wird feststellen, dass es hier je nach Tageszeit mal heller und mal dunkler aussieht. Einen Grund dafür liegt darin, dass ich tagsüber helle Webseiten als angenehmer zu lesen finde, während dunkle Webseiten angenehmer für das Auge sind, sobald es dunkel ist.
Sowas umzusetzen ist relativ einfach. Man benötigt lediglich ein kleines Java Script und ein zweites Stylesheet.
Am Beispiel von Blogmix sieht es folgendermaßen aus.
Wenn alles funktioniert, so erscheint Blogmix von morgens um 6:00 Uhr bis abend um 20:00 Uhr in einem für die Tageszeit angenehmen hellen Gewand.
Blogmix.de - Day Edition
Ab 20:00 Uhr sollte dann per Java Script das zweite Stylesheet geladen werden. Und et voila, sollte die Seite dann anders aussehen. Im Falle von Blogmix so.
Blogmix.de - Night Edition
Eine klasse Sache, die obendrein schnell erledigt ist.
2 Dinge, die benötigt werden.
1. Ein zusätzliches Stylesheet. Dürfte nicht die Welt sein, da im Grunde nur Farbwerte angepasst werden.
2. Ein kleines Java Script, welches im Header eingebunden wird.
<script type="text/javascript">
<!--
var d = new Date();
var sunrise = 6; // 6 AM
var sunset = 20; // 8 PM
var currentHour = parseInt(d.getHours());
if(currentHour >= sunset || currentHour < sunrise){
document.write('<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/night.css" media="screen, projection" /' + '>');
}
// -->
</script>
Das wars schon.
Danke an Bobulate für die Idee und den Code.
Pingback: Blogmix Night Edition » Blogmix
Genial das mit den verschiedenen Stylesheets, das werde ich auch bei mir noch einbauen. :D
Wobei das mit der Einbindung der Werbung eigentlich kein wirkliches Problem ist finde ich. Weil die paar Besucher welche nachts den Blog lesen, sind doch zu vernachlässigen finde ich. Wenn das jetzt 1000Besucher pro Nacht wären, dann wäre das was anderes. ;)
Zur Not kann man ja auch einstellen, dass der Wechsel erst gegen 22:00 Uhr statt findet. Vielleicht gibts ja auch ein Plugin, welches Werbung zeitgesteuert wechselt. Ok, das wäre dann zuviel des Guten. ^^
Man soll es ja nicht übertreiben… ;)
BTW: Kann ich deine Night-CSS haben, dann muss ich nicht noch mal bei NULL Anfangen. :D
Nix da. :D
Ist doch schnell gemacht. Kannst dir bei 0to255 eine passende Farbe aussuchen und hast dann alle Nuancen der jeweiligen Farbe.
Ansonsten muss man halt nur die ganzen Background Angaben korrigieren. Die Rahmenfarbe habe ich so definiert, da dass Yokotheme ja eine einheitliche Rahmenfarbe benutzt.
*{border-color: #Deine Rahmenfarbe !important; }Wenn du möchtest, kannst du die Farben übernehmen. Musst dir aber die Mühe schon selbst machen. ; -)
Oh. Das mit Javascript zu machen finde ich ja suboptimal. Den Zeitfilter solltest du doch auch mit PHP in dein Theme einbauen können.
Bin da leider nicht so bewandert. Hatte das Script auch nur zufällig gefunden. Stimmt aber schon, mit PHP wären auch die No-Script Benutzer bedient. Mal schauen, ob ich da was finde.
Ich kanns dir gut besorgen, Baby. :D
Danke, aber ich bin verheiratet. :D
Spaß beiseite …
Ich hab im Moment noch grad ne Menge zu tun und das Thema Adsense ist daher noch nicht soo wichtig. Wenn ich meine Statistiken anschaue, dann kommen über Google grad so viele Besucher, wie 9Live Zusachauer hatte. ^^
Zur Zeit lohnt es sich ohnehin noch nicht sich mit monetarisieren zu beschäftigen, da mach ich mir erst nen Kopf drum, wenn die Besucherzahlen steigen sollten.
Desweiteren versuche ich mich gerade in die Welt der Vermarktung und Affiliates rein zu fuchsen, was ermüdend ist.
Ich komme bei Bedarf aber gerne darauf zurück.
Mich würde das schon interessieren, wobei das nur für das PHP-Script Zeug betrifft und den Einbau der Day/Night-CSS darüber.
Pingback: Fremde Style.css als Ari Child Theme konvertieren… | BLOG.KranzKrone
Ich hab mir jetzt nen Wolf gegoogelt und nichts gefunden, was mich weiter gebracht hätte. Werde demnächst mal ein Buch zu Hilfe nehmen, aber erst mal bleibe ich bei dem Java Script. Wer No Script benutzt oder Java Script nicht erlaubt hat muss halt solange in die Röhre schauen. Man kann den Blog ja auch ohne lesen.
/wp-content/themes/keiko/header.php
an der stelle wo bisher der standard Style gesetzt wird, die Zeile mit dem folgenden Code ersetzen.
<?php if(date('H') >'20' || date('H') <'06') : ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/night.css" media="screen, projection" /> <?php else : ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" media="screen, projection" /> <?php endif;?>hmpf .. die gehören da alle nicht hin und müssen weg. Die hat hier das Kommentardingsbums eingefügt.
arrgh … die <br> habe ich gerade gemeint
Außerdem fehlt da plötzlich das < ’06′ oben in der Abfrage … Ich hoffe es ist trotzdem verständlich :)
Ja, die liebe Darstellung von Code und WordPress. >:-(
Ich werde das mal probieren und falls es nicht klappt, dann schick ich erst mal das Plugin in die Wicken. Muss auch ohne gehen.
Funzt leider nicht. Bekomme einen parse error. Ich dreh noch am Rad …. :D
P.S.: ich hab den Codeblock mal in ein < pre > gepackt. Das scheint besser zu gehen.
Jo, in Zeile eins fehlt am Ende was …
<?php if(date('H') > '20' || date('H') < '06'):Also ich meine so …
<?php if(date('H') > '20' || date('H') < '06'): ?>Danke, so funktioniert es. : -)
< ?php if(date('H') >'20' || date('H') < '06') : ?> < ?php else : ?> < ?php endif;?>Grr, < /link > bitte wegdenken. Das Codestyling bei WordPress geht mir mächtig auf den Sack.
Das Codestyling macht dein Theme oder ein Plugin, denke ich. ;)
Joa, das Plugin heißt BetterWP Syntax. Ich habe aber schon 4-5 andere getestet und dieses fand ich am Besten, weil man den angezeigten Code standardmäßig einklappen kann. Bin aber am Überlegen, ob ich es nicht auch wieder rauswerfe.
So, bis auf die Sache mit Adsense habe ich fertig. Denke mal, dass es mit der Steuerung der Farbstyles ähnlich wie mit den Stylesheets geht. Ich hadere aber gerade mit der Server Zeit. Laut PhP hatten wir um 5:15 Uhr 23 Uhr, obwohl die Zeit im Admincenter korrekt eingestellt ist.
Pingback: Blogmix Night Edition R.I.P. » Blogmix