Nori ist ein responsive, mobile-first Premium Blog-Theme für WordPress. Das moderne, minimalistische Theme-Design ist auf die Bedürfnisse mobiler Geräte (Smartphones und Tablets) vorbereitet und passt sich Schrittweise an größere Bildschirmformate an.
€12
Schaue dir Nori in einer Live-Demo an oder kaufe das Theme via Paypal:
Demo Kaufen*
* Mit dem Theme-Kauf bestätigst du, dass du mit allen Konditionen und Bedingungen für den Kauf des Themes einverstanden bist.
Features und Dokumentation
- WordPress 3.3 ready
- Cross-Browser kompatibel (getestet in Chrome, Safari, Firefox, Opera, IE 7,8 & 9, iOS, Android)
- HTML5 & CSS3
- responsive, mobile-first
- lightweight, keine Images
- Theme-Optionen Seite (Linkfarbe, weiße Textfarbe, eigenes Logo, Share-Buttons, Footer-Text, Favicon)
- WordPress Post Formats
- Custom Menus
- Custom Widgets: Flickr Preview, Social Links und featured Video
- eigener Hintergrund
- Shortcodes für Mehrspaltigkeit, Info-Boxen und Buttons (Demo der Shortcodes)
- vorbereitet für die WordPress-Plugins (Contact Form 7, WP-PageNavi, Smart Archives Reloaded, Better WordPress Recent Comments, Jetpack für Image-, Twitter- und Newsletter-Widget)
- translation-ready, verfügbar in in Englisch und Deutsch
- erfüllt die Guidelines des WordPress Theme-Review
- Lizenz: GNU General Public License
- Download Nori Child-Theme Ordner für deine individuellen Anpassungen
- Nori Changelog
- Bilder-Impressionen von Nori auf Flickr
PDF-Dokumentation
Downloade eine ausführliche PDF-Dokumentation für Nori (auch zum Ausdrucken geeignet):
PDF Documentation (english) PDF Dokumentation (deutsch)
Video Tutorials
Nori Theme Showcase
Showcase Formular
Verwendest du Nori als dein Theme? Dann schicke uns deine URL, um im Showcase gefeatured zu werden!
Konditionen und Bedingungen für den Kauf des Themes
Der Kaufablauf
Der Kauf des Themes erfolgt über unseren Warenkorb bei e-junkie.com (Anbieter für Online Warenkorb-Lösungen) und der Bezahlung per Paypal. Du kannst entweder mit deinem Paypal-Guthaben bezahlen oder als Gast bei Paypal per Lastschrift, Kreditkarte, Überweisung oder giropay. Möchtest du lieber direkt per Banküberweisung bezahlen, schreibe uns bitte eine Email.
Der Preis des Themes (12 EUR) enthält 19 Prozent Umsatzsteuer. Käufer aus Nicht EU Mitgliedstaaten müssen diese Umsatzsteuer nicht zahlen. Im Einkaufs-Warenkorb musst du daher dein Land und deine Postleitzahl angeben und den Warenkorb noch einmal aktualisieren. Der Gesamtpreis wird dir dann vor dem Absenden der Bestellung angezeigt.
Nach der erfolgreichen Zahlung wirst du automatisch wieder auf unsere Webseite geleitet. Du bekommst eine Email (an die Email-Adresse, die du bei Paypal angegeben hast) mit dem Download-Link zu deinem Nori Theme zip-Ordner (in manchen Fällen kann es zu einer leichten Verzögerung von ca. 30 Minuten kommen, bis du deine Email erhältst). Falls du deine Email nicht bekommst, bitte schaue in deinem Spamordner nach, ob die Email dort gelandet ist. Es ist wichtig, dass du deinen Download-Link speicherst. So kannst du immer die aktuellste Version des Themes herunterladen.
Theme-Lizenz
Das Nori Theme ist unter der GNU General Public License veröffentlicht (genau wie WordPress selbst). Du kannst das Theme uneingeschränkt für private und kommerzielle Webseiten verwenden und es so oft einsetzen, wie du möchtest.
Rückerstattung
Da WordPress-Themes digitale Güter sind, ist das Nori-Theme von der Rückgabe ausgeschlossen. Daher schaue dir bitte die Nori Live-Demo und die beschriebenen Theme-Features an, um sicher zu gehen, dass das Theme deinen Bedürfnissen entspricht. Wenn du Fragen zum Theme hast, kontaktiere uns bitte vor dem Kauf.
Theme Garantie
Das Nori-Theme funktioniert auf der aktuellen WordPress-Version (3.3.1). Ältere WordPress-Versionen oder externe Plugins können Probleme verursachen und es besteht keine Garantie. Wenn du das Theme unbedingt mit einem bestimmten Plugin verwenden möchtest, schreibe uns bitte eine Email oder einen Kommentar bevor du das Theme kaufst.
Theme Updates
Mit deinen Download-Link kannst du die aktuelle Version deines Themes jederzeit downloaden. Standardmäßig stehen dir 9 Downloads zur Verfügung. Wenn du weitere Downloads für dein Theme benötigst, schreibe uns einfach eine kurze Email. Über ein neues Update wirst du per Email informiert.
Hast du Fragen zu Nori oder zum Kaufablauf? Dann schreibe einfach einen Kommentar auf dieser Seite oder eine Nachricht über das Kontaktformular. Bitte habe Verständnis, dass wir keine Fragen zu individuellen Theme-Anpassungen beantworten können. Wir freuen uns auf deine Nachricht!
Hallo Ellen,
großes Lob für Nori, schaut prima aus - ich mags so dezent. Auch der mobile first - Ansatz gefällt mir, da immer mehr unterwegs gesurft wird. Eine Frage hätte ich dennoch: Sind für die Artikel auch Artikelbilder möglich? Nochmals vielen Dank für eure Arbeit, Elmastudio.de gehört zu meinem Pflichtlesestoff!
Viele Grüße und Frohe Weihnachten.
Guido
Hallo Guido,
vielen Dank für dein tolles Feedback, es freut uns, dass dir Nori und auch der Elmastudio-Blog so gut gefällt. Ja, Artikelbilder sind standardmäßig auch möglich und können einfach wie gewohnt integriert werden.
Viele Grüße und dir auch frohe Weihnachten,
Ellen
Hallo Ellen,
ich finde das Theme sehr gelungen. Meine Frage, lässt sich in hier auch das WordPress Plugin 2 Klicks für mehr Datenschutz einbauen? Somit wäre dem Datenschutz hinsichtlich des »Gefällt mir« Button genüge getan.
Schöne Grüße und schöne Weihnachtstage
Hans
Hallo Hans,
vielen Dank für dein das positive Feedback. Ja, ich habe das Plugin »2 Click Social Media Buttons« im Nori Theme getestet. Die automatische Einbindung sollte also kein Problem sein.
Viele Grüße,
Ellen
Hallo Ellen. Super theme nur ein Sache stört mich. Auf dem iPad im Hochformat rutscht das menü nach unten. Warum kein ausklappmenü?
Gruß oliver
Das iPad-Hochformat übernimmt das gleiche Layout wie Smartphones. Über den übersichtlichen Menü-Button gelangt der Besucher bei Bedarf schnell zu den Navigationspunkten (und über den Top-Button wieder zurück). Ganz besonders wird aber in dieser Ansicht der wichtigste Inhalt eines Blogs, also die neusten Artikel, hervorgehoben. Die Ansicht ist quasi eine »Leseansicht« bei der nichts vom Inhalt ablenkt.
Da wir außerdem, wenn möglich, auf JavaScript verzichtet haben, um das Theme so leicht und kompatibel wie möglich zu machen, funktioniert eine Lösung ohne Aufklapp-Funktion hier besser.
Hallo Ellen, frohe Weihnachten und vielen Dank für dieses wirklich tolle Theme. Ich war mit Nilmini eigentlich sehr glücklich. Doch gerade die Möglichkeit, Fotos besonders groß im Beitrag darstellen zu können, hat zur Umstellung geführt. Auch die »fullwidth«-Class finde ich super. Dadurch kann man gerade längere Beiträge sehr gut auflockern und gestalten. Bei der Individualisierung empfinde ich das minimalistische Design als Vorteil. Entscheidend ist die Farbwahl für Links und Hintergrund. Je nach Kombination können völlig unterschiedliche Wirkungen erzielt werden. Super! Ich habe noch eine zweite Akzentfarbe auf meinem Blog integriert. Das Gelb setze ich recht dezent bei einigen Schaltflächen und im Header als Linie ein: http://www.joelwagner.de
Gruß Joel
Vielen Dank für dein Feedback zum Nori-Theme, deine Umsetzung sieht echt klasse aus und deine Bilder kommen meiner Ansicht nach auch sehr schön im minimalistischen Theme-Design und in der großen Einzelansicht zur Geltung. Wirklich eine tolle Umsetzung!
Viele Grüße,
Ellen
Hallo Ellen, Nori gefällt mir sehr und ich mag den minimalistischen Ansatz. Allerdings würde ich gerne auf der Hauptseite alle Artikel vollständig und untereinander anzeigen lassen. Kann man das einstellen oder ist es einfach das umzusetzen?
Grüße
Vielen Dank für das positive Feedback zum Nori Themedesign. Auf großen Bildschirmen wird das Layout auf der Blogseite standardmäßig zweispaltig. Deine Artikel kannst du natürlich auch komplett (also ohne Weiterlesen-Link) anzeigen.
Für eine einspaltige Ansicht müsstest du allerdings eine Stylesheet-Anpassungen in der Desktop-Version (letzte media queries min-width: 1220px) vornehmen. Da Nori mobile-first programmiert ist, wäre das aber relativ leicht möglich, wenn du ein wenig CSS kannst.
Viele Grüße,
Ellen
Hey Ellen, hab Nori jetzt in Benutzung, sieht top aus! Habs auch geschafft es einspaltig anzeigen zu lassen. Danke für die Tipps. Jetzt überlege ich noch, wie ich das Menü in eine Top Navigation am oberen Rand umwandle, oder so, mal sehen :D
Hi Sven,
das habe ich bei mir so gelöst, indem ich in der header.php die Navi mit der id #main-nav aus der Sidebar (footer.php) eingefügt habe. Die in der Sidebar habe ich dann für alle Layouts ab 1024px per CSS ausgeblendet (display: none; visibility: hidden;) und die neue Top-Navi entsprechend angepasst.
Gruß, Tobi
Hey Tobi,
danke für die Tipps, muss ich mir später, wenn ich zu Hause bin mal genauer angucken :)
Hallo Ellen,
das Theme schaut wie erwartet x-stream edel aus … Check Out!
Grüße Steven
Grandioses Theme – wirklich grandios!
Flattr Support währe noch was feines …
Alles Gute für 2012!
@Steven, @Heiko: Vielen Dank für das tolle Feedback :)
@Heiko: Da die Teilen-Buttons in einer extra Theme-Datei (share.php) angelegt sind, könnte man Flattr recht leicht selbst ergänzen. Ansonsten kommt natürlich auch noch das Flattr WordPress-Plugin in Frage.
Viele Grüße,
Ellen
Hallo Ellen,
ich habe eine Frage zum Theme: im Nori-Theme wird, wenn die Seite auf einem Mobile Gerät angezeigt wird, wird neben dem Logo (das als Grafik integriert ist), der Button Menu angezeigt. Ich möchte aber den Menu lieber unten angezeigt haben und das Logo schön auf Grösse des iPhone Displays (das Logo ist 320 Pixel breit). Ähnlich wie in deinen anderen Themes. Gibt es hierzu eine Möglichkeit?
Liebe Grüsse aus der Schweiz
Abi
Hallo abi,
wenn du dein Logo in der Smartphone-Ansicht über die gesamte Breite einfügen möchtest, müsstest du ein paar Änderungen im Stylesheet vornehmen (am besten nutzt du dazu ein Child-Theme, um deine Anpassungen im CSS bei einem Nori-Update zu sichern).
Du müsstest die #site-title auf 100% width setzen und float:none angeben. Eventuell möchtest du dann noch den Menü-button a.menu anpassen (z.B. rechtsbündig anlegen mit float:right). Wenn du dich ein bisschen mit CSS auskennst, sollte eine solche Anpassung aber kein Problem sein.
Viele Grüße,
Ellen
Hi Ellen,
das Theme gefällt mir super. Auch weil es designtechnisch so schlicht gehalten ist, dass man gute Möglichkeiten hat, es an die eigenen Bedürfnisse anzupassen. Ich habs mir gerade gekauft und werde es hoffentlich bald bei uns im Blog einsetzen. Kannst du mir einen Tipp geben, wie ich das Layout der Artikel-Seite am einfachsten auch für die Startseite übernehmen kann? Die Zweispaltigkeit finde ich persönlich etwas unübersichtlich.
Danke, weiter so und viele Grüße
Tobi
Hallo Tobi,
vielen Dank für dein Feedback zum Nori-Theme. Ich habe es selbst nicht getestet, aber wenn du auf die zweispaltige Artikel-Ansicht auch auf größeren Monitoren verzichten möchtest, müsstest du die Styles in den Media Queries @media screen and (min-width: 1220px) {…} in der style.css ab Zeile 2092 anpassen.
Z.B. kannst du dort den Style #content .post auf width:100% statt 50% setzen. Du müsstest das aber am besten in einem Child-Theme einfach einmal ausprobieren.
Ich hoffe mein Tipp hilft dir bei deinen Anpassungen weiter.
Viele Grüße,
Ellen
Ganz so einfach wirds leider nicht, hmm. ich schau mal. Danke jedenfalls!
Ich werde versuchen, es selbst einmal zu testen. Eventuell müsstest du noch in der custom.js Datei die Zeile 19-33 löschen.
Viele Grüße,
Ellen
Pingback: Änderungen an diesem Blog | Thrash Rom
Hi Ellen,
tolles Theme! Ich hätte gerne den Header-Hintergrund in einer anderen Farbe als die Links. Was muss ich dafür ändern?
Danke und viele Grüße
Matthias
Hallo Matthias,
freut mich, dass dir Nori gefällt :) Um die Header-Farbe unabhängig von der Linkfarbe anzupassen müsstest du in der style.css Datei Zeile 169 (oder noch besser über das Stylesheet in einem Child-Theme) deinen eigenen Farbwert angeben und anschließend noch in der Datei includes/theme-options.php in Zeile 300 den Wert #header, löschen. Dann sollte es funktionieren.
Viele Grüße,
Ellen
Hallo Ellen,
vielen Dank für das super Theme. Ich hab eine meiner Webseiten gleich umgestellt.
Mich würde noch interessieren wie ich das Hauptmenü am besten auf die (den meisten Usern besser gewohnte) linke Seite bekomme. Habt ihr da einen Tipp? Oder komme ich da in Konflikt mit anderen Bereichen der Webseite?
Vielen Dank und viele Grüße,
Thomas
Hallo Thomas,
vielen Dank für dein positives Feedback zum Nori-Theme :) Leider ist eine Umstellung der Navigation linksbündig vom Blog-Inhalt nicht möglich, da ansonsten das Layout auf den mobilen Geräten nicht funktionieren würde.
Meiner Ansicht nach ist es aber eigentlich auch sinnvoller, die Navigation rechtsbündig zu setzen (diese Anordnung ist ja auch von einer Sidebar her sehr üblich). So können die wichtigsten Inhalte z.B. ein Intro-Text oder die neusten Blog-Artikel erst vom Betrachter erfasst werden.
Viele Grüße,
Ellen
Hallo Thomas,
es ist keine so glückliche Idee, die Navigation auf die linke Seite zu verlegen. Schau Dir mal bei Jacob Nielsen an, wo User hingucken, wenn sie Webseiten scannen – lesen tut im Internet sowieso niemand:
http://www.useit.com/alertbox/reading_pattern.html
Liebe Grüße,
Sabine
Hallo Sabina,
danke für den Link. Ich hatte gedacht, die Navigation macht Links mehr Sinn, weil die meisten Surfer es so gewohnt sind - also entweder links oder oben. Und auf den ersten Blick ist das immer eine kleine Überraschung, wenn man die Navigation plötzlich wo anders findet. Und das ging auch meiner Frau so, als sie das Theme gesehen hat. Aber ich bin auch gerne jemand, der Dinge anders macht als andere, daher werde ich das jetzt mal so lassen und schauen wie das ankommt.
Viele Grüße
Thomas
Ja, so war das früher auf fast allen Webseiten. Im Laufe der Jahre hat man allerdings genauer nachgeforscht (dieser Jacob Nielsen scheint ja eine Art Guru der Usability zu sein) und inzwischen haben eigentlich die meisten Websites die Navigation rechts oder oben. Der Inhalt beginnt dann links, weil die linke obere Ecke diejenige ist, auf die der Blick zuerst fällt und weil man dann den linken Seitenbereich im F-Muster abscannt. Nach rechts guckt kaum jemand mehr. Deshalb gehört alles Mega-Wichtige nach links oben. Der Rest wird dann gerne ausgeblendet und ignoriert.
P.S. Ich hätte Deinen Kommentar fast übersehen, weil a) das Blogteam keine Emails mehr verschickt, obwohl ich diesen Post abnommiert habe und weil ich b) Sabine (mit »e«) heiße und mich deshalb nicht angesprochen fühlte. :-)
Hallo SabinE ;)
Dieser Nielsen ist nicht der Guru der Usability, aber einer von vielen die sich damit beschäftigen. Sein Schwerpunkt liegt bei diesen Eye-Catching Sachen. Und auch da ändert sich immer wieder was - Deine verlinkten Bilder stammen aus 2006. Verdammt lange Zeit fürs Netz. http://www.useit.com/eyetracking/ (gleiche Webseite, etwas neuere Bilder (2009)) zeigen das genaue Gegenteil, das ein Menü Links nämlich sehr wohl wahrgenommen wird. Es ist einfach, wie so oft, eine Frage der Prägung. Die Leute sind gewohnt es dort zu finden - also suchen sie es auch dort. Rechts ist auch okay, weil es mittlerweile oft gibt. Genauso wie ein Werbebanner rechts oben praktisch nicht mehr wahrgenommen wird, weil es einfach üblich ist das dort Werbung ist - also nichts wichtiges da hinsetzen.
Usability Tests aus dem deutschsprachigen Raum zeigen sogar das man am besten sowohl ein oben horizontales als auch ein seitliches Menü haben sollte - wo (Links/rechts) ist mittlerweile relativ egal, wenn es optisch schnell als Menü erfassbar ist. Wobei das Horizontale nicht mehr wie 7 Menü-Punkte, besser 5, haben sollte. Im seitlichen Menü _können_ dagegen Untermenüs sogar schon ausgeklappt sein, wenigstens eine Ebene. Ein Menü im Footer dagegen ist relativer Blödsinn, wenn es sonst keins gibt.
Bei diesem wirklich sehr schönen Theme ist es insgesamt optimal gelöst, da das Menü örtlich sauber getrennt ist. Wäre direkt darunter noch weiterer Text etc. würde das wiederum negativ sein. Es ist stylisch, ohne Grafik ein Eye-Catcher und außerdem braucht man kein Extra-Theme für Mobiles. Perfekt!
Wirklich ein wunderschön gelungenes Theme bei dem ich bedauere das ich aktuell kein Projekt habe bei dem ich es einsetzen könnte. Aber Bookmark ist gesetzt ;) und ich bin mir zu 99% sicher das ich es noch kaufen werde.
LG
Andreas
beim aufrufen wird immer erstmal die linke spalte angezeigt, muss kurz am browserfenster zuppeln dann passt es, das mit den spalten find ich eh blöd man weiß auf den ersten blick garnicht wo der anfang ist. und in den formularfeldern wird links das padding nicht angezeigt. alles flattert irgendwie durcheinander. das alte logo war zwar nicht originell aber hübscher.
@ hans,
ist das Problem immer noch vorhanden? Leider habe ich diesen Firefox expliziten Bug erst jetzt erkannt, da er nicht bei allen Bildschirmauflösungen vorkommt. Ich habe dann gleich nach Lösungen gesucht und teste derzeit eine hier auf der Seite. Sobald ich sicher bin, dass es funktioniert, kommt der Bugfix natürlich auch gleich in einem Nori-Update. Der padding-Bug erscheint auch nur in Firefox (leider scheint Firefox als einziger Browser richtig Probleme mit Prozent-Angaben zu haben). Ich arbeite aber gerade bereits an einer Optimierung (ebenfalls fürs nächste Update).
Viele Grüße,
Ellen
Hallo Ellen,
erstmal ein ganz großes Kompliment an euch. Ihr begeistert mich jedes Mal aufs Neue mit euren Themes.
Ich habe das Theme eben auf einer Testseite installiert und beobachte den von Hans geschilderten Bug gleich in drei Browsern (Chrome 16, IE9 und FF 9.0.1). Ich beobachte das Problem auf meinem Zweitbildschirm, der eine Auflösung von 1280×1024 hat. Auf meinem Hauptbildschirm (1920×1080) beobachte ich das Problem aufgrund dessen Größe nicht. Wenn ich das Browserfenster in der Größe verändere (wie es Hans schon beschrieben hat) und dann wieder normal maximiere, bekomme ich die gewünschte zweispaltige Darstellung. Das gilt für alle drei Browser.
Ich beobachte außerdem noch folgendes: Wenn ich das Browserfenster verkleinere wird die Schrift bei einer gewissen Stufe größer um sich dann bei einer weiteren Verkleinerung wieder auf Normalgröße zu verkleinern. Ich weiß nicht, ob das auch ein Bug oder so gewünscht ist. Das beobachte ich ebenfalls in den drei genannten Browsern. Das stört nicht wirklich, wundert mich nur. Es ist aber bestimmt so gewollt. Ich teste das ja alles nur am PC-Monitor.
Schöne Grüße
Sebastian
Nochmals hallo Ellen,
Nachdem ich nun im Footer einige Widgets hinzugefügt habe, hat sich das Problem mit der einspaltigen Darstellung auf wundersame Weise erledigt und es wird nun alles korrekt in zwei Spalten dargestellt. Ich habe keine Ahnung, was die Ursache dafür ist, aber nun bin ich erstmal zufrieden. ;-)
Schöne Grüße
Sebastian
Hallo Sebastian,
danke für deine Rückmeldung, ich werde das auf jeden Fall auch noch einmal prüfen und schauen, ob es im Theme-Layout ohne Widgets Probleme gibt. Die Schriftgröße in den kleineren Theme-Layouts ist für vor allem für die Ansicht auf Tablets (z.B. iPad) angepasst. So dass das Lesen auf diesen kleineren Gerät möglichst angenehm ist. Wir haben dazu so viele Live-Test wie möglich (auf iOS und Android) gemacht und sind so zu dieser etwas größeren Schriftgröße gekommen.
Viele Grüße,
Ellen
Hallo Ellen,
vielen Dank für deine Rückmeldung. In Sachen Schriftgrößen bin ich dann jetzt wieder etwas schlauer. ;-)
Ich konnte gestern noch beobachten, dass der Fehler wirklich nur beim Vollbild auftrat. Sobald ich das Browserfenster auf meinem Zweitmonitor etwas verkleinert und dann geladen habe, ging es auch problemlos. Vielleicht hilft dir das bei der Fehlersuche noch etwas weiter. Für mich sind das alles Potjomkinsche Dörfer.
Das Theme ist wirklich klasse und ziert nun meine Kleingartenseite.
Schöne Grüße und vielen Dank,
Sebastian
hallo ellen,
ja der bug ist jetzt beseitigt, viel besser jetzt. die paddings gebe ich auch in den mobilversionen immer mit PX an, find ich zu verkraften … (z.b.: http://www.undercroft-official.com/)
gruß
Vielen Dank für dein Feedback, super, werde das Update dann man vorbereiten :) Ja, leider klappt das mit den Padding-Werten in Prozent dank Firefox nicht ganz. Schade, sogar der IE kann das… Ich arbeite gerade noch an einem Workaround gerade für die Suche im Header.
Viele Grüße,
Ellen
Hallo,
soo, baue grade unsere SWTOR Gildenwebsite mit Nori auf :) und würde gerne um die einzelnen Posts und um die Widgets so einen Rahmen/Hintergrund setzen, wie er auch um die Standard Menü Buttons rechts oben ist.
Kurzer Tipp bei welchen Styles ich was/wie/wo umsetzen muss? Hab gestern schonmal rumprobiert, aber hat nicht funktioniert.
Grüße
Sven
Hallo Sven,
ich habe es noch nicht selbst ausprobiert, glaube aber das dies aufgrund des Theme-Aufbaus und der verwendeten Layout-JavaScript Plugins »Masonry« nicht möglich ist. Ich werde es aber noch einmal selbst die Tage testen und Bescheid geben, falls ich eine Lösung finde.
Viele Grüße,
Ellen
Hi Ellen,
ok… danke.
Hmm, es muss nicht genauso aussehen. Sollte es nicht auch klappen, ein border um .post zu setzen? Maybe… :)
Grüße
Sven
Hey Ellen,
hab es jetzt so hinbekommen, dass es für meine Zwecke passt. Hab die betreffende Seite mal hier angegeben ;)
Jetzt würde ich eigentlich nur noch gerne die Linkfarbe unabhängig von der Headerfarbe angeben, oder ich muss mir ne andere Farbkombi überlegen ;)
Grüße
Sven
Hallo Sven,
super, dass du es hinbekommen hast. Um den Header unabhängig von der Linkfarbe zu stylen, müsstest du den Wert backgroud von #header in der style.css Datei anpassen und zusätzlich in der Datei includes/theme-options.php ganz unten den Wert #header aus den Anpassungen für die Linkfarbe löschen.
Ich werde aber auch mal schauen, dass ich diese Option mit ins nächste Theme-Update reinnehme.
Viele Grüße,
Ellen
Hallo,
Ich hätte da mal als Newbie eine Frage zu Themes bzw. Blogthemes überhaupt.
Was erhält man eigentlich wenn man sich ein WP-Theme käuflich zulegt?
Ist es nicht so, das man nicht viel mehr als den gestylten Header, Footer, den selbstverfassten Blogname und maximal noch einen dieser weitverbreiteten großen Sliderimages nach dem installieren sieht??
Kommen die ganzen Feinheiten des Designs und des Layouts nicht erst zu-Tage, nachdem man den ganzen eigentlichen Inhalt wie Grafiken, Überschriften und Fließexte selbst erstellt und »designed« hat?
Ich meine, wenn jemand partout von Seitengliederung und der richtigen Schrift-, Farb-, und Layoutgestaltung also der objektiven Wahrnehmung einer Website als Ganzes, keine Ahnung hat und kein Profi mit dem Editor in WP ist um dieses zu bewerkstelligen .…. dann wird die Website nie eine Ähnlichkeit mit dem erworbenen Theme in dessen Vorschau erhalten, Richtig ??
Ich meine, anders als bei statischen HTML Templates .… wo man, so man Müßiggänger ist und nicht mehr Energie als notwendig vergeuden möchte, nur ein paar Bildchen und die Texte an’s eigene Bedürfniss anpassen muss. ;-)
@ Peter
Natürlich solltest Du ein wenig Inhalt in Deinen Blog liefern, um die Feinheiten des Designs sehen zu können. Auf einer leeren weißen Fläche ist nichts zu sehen.
Beim Yoko-Theme, das nichts kostet, bekommst Du beispielsweise 28 Template- und Style-Dateien geliefert, die für die Funktionen und das Aussehen der Website verantwortlich sind. Wieviele es bei Nori sind, kann ich Dir nicht sagen, weil ich das Theme (noch) nicht besitze.
Wenn Du bei Nori überhaupt nichts selber einstellst, weil Dir die Kenntnisse dazu fehlen oder die Lust oder die Zeit, dann sieht es eben genau so aus wie hier oben in dem großen blauen Vorschau-Bild.
Allerdings ist es auch ohne Vorkenntnisse durchaus möglich, der Website einen individuellen Look zu geben. Vielleicht schaust Du Dir einfach einmal die Videos an. Ellen erklärt darin ganz genau, wie und wo Du auch als Newbie an Nori herumschrauben kannst.
@ Peter
Dass Du für Geld mehr bekommst als für ohne Geld, siehst Du schon allein an der Länge der Stylesheets. Die style.css von Yoko hat 1527 Zeilen, diejenige der Elmastudio-Website (= Nori) hingegen 2573 Zeilen. Wenn Du Deinen Blog individuell anpassen möchtest, kannst Du jede einzelne Zeile ganz nach Deinem Geschmack verändern. Ist doch schön, oder? ;-)
@ Ellen
Dieses Theme könnte meine Rettung sein. Ich finde es ganz hervorragend, dass das Wichtigste, nämlich der Inhalt, ganz oben links erscheint und das weniger Wichtige und Bürokratische ganz nach rechts außen oder in Form von Widgets ganz nach unten rückt.
Ich habe zunächst einmal eine Frage zum Child-Theme. Im entsprechenden Ordner findet sich die style.css mit vorbereitetem Kopf. In Anbetracht der zweieinhalbtausend Zeilen des Originals wüsste ich gerne, ob ich nun das gesamte Original unter diesen Kopf kopieren muss und dann eben diejenigen Werte ändere, die ich geändert haben möchte – oder ob ich unter den Kopf nur diese geänderten Werte eingeben muss und der ganze Rest wird dann aus dem Parent-Theme geholt. Wie ist es richtig?
Liebe Grüße,
Sabine
@Sabine
Die Antwort findest du im Child-Theme style.css:
----------------
/* Using @import, so you can borrow the styles from the Nori Parent Theme */
/* import the default styles from parent theme */
@import url(›../nori/style.css‹);
/* Now you can start with your own style customizations here */
----------------
Mit dem Import-Befehl wird der Inhalt des nori-themes importiert. Du musst nur deine Änderungen in das Child-CSS eintragen, damit diese nach einem Update des Nori-Themes nicht überschrieben werden.
Viele Grüße,
Thomas
Ok, angenommen, ich möchte einfach nur die Schrift ändern und sonst nichts.
Im Original heißt es dazu in den Zeilen 43 bis 48:
»body {
max-width:100%;
background:#fff;
font-family: ›Helvetica Neue‹, Helvetica, Arial, Sans-Serif;
color: #000;
}«
Daraus mache ich nun direkt unter dem von Dir kopierten Kopf beispielsweise:
»body {
max-width:100%;
background:#fff;
font-family: Georgia!important, serif!important;
color: #000;
}«
Und das war’s dann schon, oder? Um den ganzen großen Rest muss ich mich dann nicht mehr kümmern, der wird dann einfach von der Maschine aus dem Original übernommen?
Muss ich hier zweimal !important schreiben, oder würde einmal vor dem Semikolon genügen?
Wie Thomas schon beschrieben hat, funktioniert das Child-Theme generell am besten mit der @import Funktion. Dann kannst du deine Änderungen einfach darunter schreiben. Für die Schriftänderung würde einmal important reichen, also font-family: Georgia, serif !important; Der »serif« Wert ist nur als eine Alternative genannt, falls einmal keine Georgia zur Verfügung stehen sollte.
Viele Grüße,
Ellen
Hallo Ellen,
wie bekomme ich denn den Header kleiner? Beim Laden sehe, wie er kurze Zeit weiter oben endet und sich dann aber weiter herunter zieht und so bei kleinen Bildschirmen über 1/3 des Browserfensters belegt.
Vielen Dank und Gruß
Thomas
ein wichtiges Element dazu hab ich gerade gefunden:
/* --- General Structure --- */
#header #branding {
padding: 0 0 0px; <---- hier hab ich die 60px durch 0px ersetzt
}
Hallo Thomas,
ja, über den padding-Wert kannst du den Freiraum um das Logo beeinflussen. Allerdings habe ich gesehen, dass dein Logo relativ viel freie Fläche oben und unten im transparenten PNG hat. Alternativ könntest du dein also Logo auch noch etwas mehr ausschneiden, wenn du magst.
Viele Grüße,
Ellen
@ Thomas
Ich habe meinen Firefox gerade auf Zigarettenschachtelgröße zusammengeschnurrt. Dein Header wird winzig! Hübsche Farbe übrigens!
@ Ellen
Wie kommt es, dass auf der Demo-Seite bei schmalem Browserfenster die Bilder in der vollen Breite angezeigt werden (das graue mit der schwarzen Grafik beispielsweise mit 1200 px) und man bis ganz ans Ende horizontal scrollen muss? Öffne ich das Browserfenster bis zum Anschlag (1366 px bei mir), werden die Bilder skaliert auf eine angenehme Größe, so dass sich dann ein dreispaltiges Design mit deutlich kleineren Bildern ergibt.
Könnte man es irgendwie erreichen, dass die Bilder bei kleineren Geräten wie beispielsweise Smartphones auch kleiner skaliert werden und man sie in voller Breite ansehen kann, ohne horizontal scrollen zu müssen?
Vielen Dank und liebe Grüße,
Sabine
Hallo Sabine,
in welchen Browser werden die Bilder denn bei dir nicht automatisch skaliert? Normalerweise (ich habe gerade auch noch ein paar Browsertests gemacht) werden alle Bilder je nach Bildschirmgröße automatisch skaliert. Voraussetzung ist lediglich, das wird mit dem CSS Style max-width: 100% erreicht.
Bitte sag mir noch einmal Bescheid, wenn das das bei deinem Tests nicht der Fall ist.
Viele Grüße,
Ellen
Hallo Ellen,
es handelt sich um Eure Nori-Demoseite unter themes.elmastudio.de/nori/. Ich habe also nichts im Stylesheet verändert. Der Browser, bei dem die Probleme auftreten, ist Firefox 9. (10 kam gerade, ich habe aber noch nicht aktualisiert.)
Wenn ich mein Browserfenster auf volle Bildschirmbreite öffne (1366 px), dann bekomme ich zwei große Spalten für die Artikel und rechts außen eine kleine Spalte für die Navigation. In diesem Fall werden die Bilder kleiner skaliert, damit sie in die Spalten passen.
Verkleinere ich nun mein Browserfenster in der Breite auf schätzungsweise rund 1000 oder 1100 px, dann wird das mobile-first-image11.jpeg gar nicht skaliert, sondern wird in der vollen Größe von 1200 px angezeigt und bekommt einen horizontalen Scrollbalken.
Das nori-featured-image.jpg behält ebenfalls seine Originalgröße von 780 px bei, bekommt aber keinen Scrollbalken, sondern legt sich über den linken Teil der NavigationsButtons, wodurch beispielsweise vom Button »Text Elements« nur noch das Wort »Elements« zu lesen ist. Die Child-Page-Buttons darüber heißen jetzt »ild-page 1″ und »ild-page 2″. »Blog Archive« heißt in dieser Ansicht nur noch »Archive«.
Verkleinere ich das Opera-Fenster auf genau die gleiche Größe wie den Firefox, tauchen diese beiden Probleme nicht auf. Die Bilder werden also automatisch verkleinert und passen wunderbar. Auch die Navigation sieht so aus wie sie aussehen sollte.
Bei beiden Browsern taucht allerdings in dieser verkleinerten Fensterbreite noch ein anderes Problem auf: Es werden gigantische weiße Flächen unter den Artikeln oder Bildern produziert.
Im Firefox rutscht das Wroblewski-Zitat natürlich nach links. Darunter erscheint dann eine weiße Fläche von schätzungsweise 700 px Länge. Anschließend erscheint das graue Bild mit Scrollbalken. Darunter kommt der Artikel »Standard Post with Images«. Unter diesem Artikel dann eine weiße Fläche, die noch länger ist als die unter dem Zitat.
Mit Opera werden die Abstände bis zum skalierten grauen Bild korrekt angezeigt. Unterhalb des Bildes erscheint dann eine weiße Fläche, die so groß ist, dass ich das gesamte Browserfenster weiß machen kann. Alles Weitere erscheint dann wieder ganz normal.
Ich hoffe, ich konnte Dir mit diesen Angaben helfen.
Liebe Grüße,
Sabine
Hi Ellen
Navi, Schlichtheit und der responsive Mobile first Aufbau sind genial. Ich musste einfach kaufen ;) Wäre sehr froh, wenn du mir zwei Fragen beantworten kannst:
1. Ich hätte gerne eine Seite als Home und nicht den Blog (ich weiss, widerspricht wohl einwenig eurer Philo, trotzdem ;)
2. Die Artikel möchte ich definitiv auch lieber einspaltig vertikal gelistet haben; schön zentriert
Danke und beste Grüsse an euch
Andreas, 170 km südlich von euch
Hallo Andreas,
vielen Dank für dein Feedback, es freut mich, dass dir Nori so gut gefällt :)
1. Eine Seite als Startseite einzurichten ist kein Problem, dazu musst du eine bereits angelegte Seite einfach unter Einstellungen / Lesen als Startseite bestimmen. Am besten legst du dann über ein individuelles Menü ein Navi-Punkt für »Blog« an.
2. Eine einspaltige Ansicht der Artikel gibt es bereits in der Tablet-Version von Nori. Ich habe es bisher nicht selbst getestet, aber du könntest einmal (am besten erst auf einer Test-Version des Themes) versuchen, die Media Queries »@media screen and (min-width: 1220px)…« ab Zeile 1890 in style.css komplett zu löschen und dann die Tablet-Version auch für größere Bildschirme zu nutzen.
Für #wrap und #branding müsstest du dann noch eine max. Breite z.B. width: 1100px festlegen (ganz oben innerhalb der Media Queries mit min-width: 1024px).
Ich hoffe diese Tipps helfen dir bei deinen Anpassungen schon weiter.
Viele Grüße,
Ellen
Hey, ich habe bei mir eine einspaltige Artikel Ansicht eingebaut. Einfach im Child-Theme CSS
#content .post {
width:100%;
}
eingeben.
Grüße
Sven
Hallo zusammen
Ich finde Eure WordPress-Themes erstklassiv, mit Nori und dem Ansatz »Mobile first« habt Ihr Euch aber selbst nochmals übertroffen. Ich hoffe, dass Ihr dem »Mobile first«-Ansatz treu bleibt, denn ich glaube, dass dies wirklich die Zukunft ist.
Etwas Mühe bereitet mir die Verwendung von H1 / H2 beim Branding. Ich bin mir nicht sicher, ob es aus SEO-Sicht nicht einen Nachteil bedeutet, wenn eine Seite zwei Mal (einmal für den Sitetitel, einmal für den Posttitel) H1 verwendet.
Herzliche Grüsse
Olivier
Hallo Olivier,
ich glaube schon mehrfach gelesen zu haben (u. a. bei Yoast), dass auf einer Seite nur einmal die h1 stehen sollte.
Auf meiner Site (die aber noch nicht zur Besichtigung freigegeben ist) kommt h1 nur einmal vor, nämlich bei dem Titel, den ich selbst per Hand für eine neue Seite oder einen neuen Artikel im Editor eingebe. Im Branding kommen bei mir weder h1 noch h2 vor. Der Name der Site und der Untertitel der Site sind bei mir im Logo zu lesen.
Ob ich da selbst etwas herumgeschraubt habe oder ob das schon vorher so war, kann ich nicht mehr nachvollziehen. Ich schufte schon zu lange an dem Ding. ;-)
In der Original header.php kann ich allerdings kein h1 finden. Das muss nicht heißen, dass keins drin ist oder war – nur dass ich nichts dergleichen sehe.
Liebe Grüße,
Sabine
Hallo,
ersteinmal muss ich sagen, das mir das ganze ja schon gefällt.
Die große Frage, auf die ich spontan noch keine Antwort gefunden habe (oder nicht genau genug geguckt): Ich habe als Header ein Image, bzw. bekomme es demnächst. Ist es machbar, ein Bild dort einzufügen oder bekomme ich da eher Probleme mit? Und wie schaut es dann mit der dort ebenfalls vorhandenen Suche aus?
Vielen Dank schonmal und Grüße,
Stefan
Hallo Stefan,
das ist ganz einfach. Gehe auf der Admin-Seite unter Design nach Theme-Optionen. Dort kannst Du Dein Headerbild angeben. Dies und noch viel mehr erklärt Ellen in dem Video »Theme-Optionen«, das Du hier oben auf der Seite findest. Du kannst Dir auch die Theme-Dokumentation herunterladen und studieren.
Liebe Grüße,
Sabine
Hallo Sabine,
danke für Deine Antwort.
Ich muss zugeben, das ich gestern wenig Zeit hatte und deswegen lieber den schnellen Weg gewählt habe, habe die Videos und Doku nun mal angeschaut ;-)
Viele Grüße,
Stefan