Nori.

Schaue dir die Live Demo an.

Kaufen

Nori Premium WordPress Theme

Kaufe
Nori

Unser AngebotTheme Bundle

36(inkl. 19% MwSt.)

In den Warenkorb

  • Anzahl der Themes: 17
  • weitere neue Themes: mind. 6
  • Download-Link gültig: 1 Jahr
  • Theme Updates: 1 Jahr
  • Support: Forum + Dokumentationen
  • Extras: 20% Rabatt fürs 2. Jahr
  • für: WordPress selbst-gehostet

Einzel-Theme

12(inkl. 19% MwSt.)

In den Warenkorb

  • Anzahl der Themes: 1
  • Download-Link gültig: 1 Jahr
  • Theme Updates: 1 Jahr
  • Support: Forum + Dokumentationen
  • für: WordPress selbst-gehostet

Video Tutorial

Inhalt

Im Nori Video-Tutorial erklärt Ellen, wie einfach es ist das Nori-Theme einzurichten und alle Theme-Features zu nutzen.

Theme Features

Hier bekommst du einen Überblick über die Nori Theme Features, du kannst die Text-Dokumentation anschauen, sehen welche Plugins für Nori vorbereitet sind, ein Child-Theme herunterladen und das Nori-Showcase mit anderen Webseiten auf dem Nori-Theme anschauen.

Responsive Webdesign – Das Nori Theme ist mit einem mobile-first, responsive Webdesign für mobile Geräte wie Smartphones und Tablets optimiert.

Theme Optionen – Auf der Nori Theme-Optionenseite kannst du deine eigene Linkfarbe, weiße Textfarbe, ein eigenes Logo, Share-Buttons, Footer-Text und ein Favicon einrichten.

Cross-Browser kompatibel – Nori ist getestet auf Chrome, Safari, Firefox, Opera, IE 7,8 & 9, iOS, Android.

Translation ready – Derzeit verfügbar in Englisch und Deutsch.

Dokumentation – Die Theme-Dokumentation ist in Nori Doc (English) und Nori Dok (Deutsch) verfügbar.

Changelog und Child Theme – Downloade dir das Nori Child Theme für deine individuellen Anpassungen. Alle Theme-Änderungen kannst du im Nori Changelog ansehen.

Showcase – Schaue dir im Nori Theme Showcase an, wie das Nori-Theme auf anderen Webseiten genutzt wird.

imgbottom01

Das Nori-Theme auf einem Tablet.

imgbottom02

Nori auf einem Smartphone.

Nori.

Schaue dir die Live Demo an.

Kaufen

104 Kommentare

  1. 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

  2. Hans

    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

    • 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.

  3. 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

  4. 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 :)

  5. abi

    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

  6. 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

  7. Pingback: Änderungen an diesem Blog | Thrash Rom

    • 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

  8. Hallo Ellen,
    vielen Dank für das super Theme. Ich hab eine meiner Webseiten gleich umge­stellt.
    Mich würde noch inter­es­sieren 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 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

        • Sabine

          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. :-)

        • Andreas

          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

  9. hans

    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

    • 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

  10. 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

      • 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

  11. Peter

    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. ;-)

    • Sabine

      @ 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.

  12. Sabine

    @ 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

      • Sabine

        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

  13. 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

      • 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

        • Jörg Helfmann

          Hm, bei mir mag das nicht funktionieren. Mein Code schaut jetzt so aus:

          #header {
          margin:0;
          padding:15px 15px 0;
          }
          #branding {
          margin:0 auto;
          padding:0 0 0px;
          overflow:hidden;
          }

          Wobei ich bereits mit beiden Klassen (#header und #branding) mit den Padding-Werten experimentiert habe, aber es ändert sich nichts. Hat jemand einen hilfreichen Tip?

          Siehe http://hybrid-piloten.de

        • Jörg Helfmann

          Entschuldigt, ich habe meinen Fehler inzwischen selbst bemerkt. Die Zeile 1933 ist die, die man ändern muss, wenn man die Höhe des Headers anpassen möchte.

  14. Sabine

    @ 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

      • Sabine

        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

    • Habe das Problem auch. FF 11.0 unter W7 x64
      Wenn das Browserfenster unter 1203px Breite kommt, werden große Bilder nicht duch max-width beschränkt sondern in Originalgröße angezeigt und reichen nach rechts aus dem Browserfenster hinaus.

      Gibt man width: 100% auf .post behebt man das problem bekommt aber andere Probleme.

      Gruß Marco

      • @Sabine, @ad @Marco,

        vielen Dank für eure Hinweise, ich werde mich auf jeden Fall um den Bugfix kümmern und so bald wie möglich ein Theme-Update vorbereiten.

        Vielen Dank und viele Grüße,
        Ellen

        • Sabine

          Hi Ellen,

          na, da bin ich aber froh, dass es sich hierbei ausnahmsweise einmal nicht um einen Bug auf der Festplatte zwischen meinen Ohren handelt, der zu fixen wäre. :-)

          Viele Grüße,
          Sabine

  15. Andreas

    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

  16. Olivier

    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

    • Sabine

      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

  17. stefan

    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

    • Sabine

      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

      • stefan

        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

  18. Hi,

    unterstützt das Theme auch Tags? ich meine konkret werden Tag-Übersichtsseiten wie Kategorien (also zweispaltig) angezeigt?

    Und wie sieht das aus, wenn Pages getagged oder mit Kategorien versehen werden?

    Danke und LG

    • Hallo Thomas,

      also wenn ich eine Seite bei WordPress erstelle, bekomme ich keine Auswahl, um eine Kategorie oder einen Tag der Seite zuzuordnen. (Vieles lässt sich aber mit Plugins erweitern)
      Man kann allerdings im Theme Seiten im Menü erstellen, die dann die Ergebnisse zu einem bestimmten Tag oder einer Kategorie anzeigen, die Einstellungen für ein selbsterstelltes Menü sind da sehr umfassend. (hoffe ich habe deine Frage richtig verstanden).

      Zu der Tag Seite kann ich gerade nichts sagen. Aber ich denke auch da wird es notfalls eine Plugin-Lösung geben…

      Viele Grüße,
      Stefan

      • Hi Stefan,

        sorry für die späte Antwort
        Was mich interessierte was, ob das Tag Archive auch zweispaltig, so wie das Kategorie-Archiv, dargestellt wird. Der Grund es gibt ein Blog, welches stark über Tags und nicht Kategorien strukturiert ist. Und ja: Pages würde ich via Plugin taggen/kategorisieren.

        LG Thomas

  19. Hallo zusammen,

    ich habe Nori gerade installiert und bin sehr zufrieden. Nun möchte ich gerne den Gravataren im Kommentarbereich und in den Widgets unterhalb (mit WordPress Better Recent Comments) leicht abgerundete Ecken geben.
    Ich versuche dies nun mit:

    img.avatar {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

    Sehe dann aber ein merkwürdiges Verhalten: Die Gravatare im Widgets-Bereich verhalten sich wie gewollt. Doch im Kommentarbereich werden die beiden oberen Ecken verzerrt dargestellt. Die beiden unteren Ecken der Gravatare verhalten sich “normal”.
    Kann mir da jemand weiterhelfen?

  20. Pingback: #4 Einrichtung der Nischenseite und des sozialen Netzwerkes

  21. Pingback: Schluss mit Retro | admartinator.de | Webdesign | Elmastudio, Nori, Retro, Theme

  22. What am I doing wrong, so that the featured image on the homepage, blog, is resized small?

    The video looks good – full size on desktop.

    The featured images on other articles turn to thumbnails instead of full-size on the desktop.

    Thank you to anybody who can help me with this!

    Great job on Nori – kudos! :)

  23. Hi Louise,

    First of all, there seems to be some kind of malware acting on your site. At least my scanner cried “foul!” when I tryd to access it. So I ran away immediately.

    Secondly, as far as I know Nori doesn’t offer a function like “featured image”. Are you using a plugin?

    Kind regards,
    Sabine

  24. Hi, No malware loads in my browser[s] when I access the site, but I sent a request to my host to check for malware. But the top video is shared via iframes from Youtube . . . via its “share” code. Thanx for bringing it to my attention. It might be on your end.

    “Featured Image” is standard for wordpress, on the right of the admin panel. It allows images to be viewed in the archives.

    • @Louise, I didn’t get any malware warnings in my browser, so hopefully you won’t have any problems there. The Nori theme supports featured images inside posts (thumbnail size) but not as a featured header image (like Sabine mentioned in her comment, too).

      You can set the size of posts thumbnail images (like 150x150px) at Settings/Media in the WP admin panel and then include a thumbnail image by choosing it as “featured image” inside the Media Uploader.

      The thumbnail post images will still not be seen in archives, though, only the text content will be seen on archive pages.

      I hope my answer is helpful.

      Best regards,
      Ellen

      • Louise

        Thanx so much! My brother doesn’t like the large images on the desktop view, but I like them.

        I might have to make the thumbnails functional for the archive or category view, because I like the list to appear with an image on the left. I did that with QRReader.org, made the archive images functional, so that when you click a category like, Android, the logo appears next to the description . . . Or else, what is the point?

  25. Thank you for creating such fabulous, contemporary themes.

    For my very first blog I used your “Yoko” theme. A wonderful theme that taught me a great deal. In the end, however, it wasn’t appropriate for a site for a dog. (Yeah, I know, it’s weird to create a blog site for a dog, isn’t it?) However, your “Nori” theme is great. Beautiful layout. Contemporary, but not too heavy. Easy to make the cosmetic changes (i.e. primary colors, etc.) that made it just perfect for her site.

    In a few months, I’ll have to create a somewhat more professional site for work….. and I’m sure I’ll be using one of your wonderful themes again.

    • @Bonnie Carey: Thanks so much for your wonderful feedback, made me smile :) I think it’s really cute to have a website for a dog and Naomi looks like like a fun dog, too :)

      All the Best,
      Ellen

      • Thanks.

        I noticed on the page of your site (which uses the Nori theme) where you show all the different themes you have that you have used short codes: two-column and then three column. Each of them also have a picture and page breaks to more information. When you have time, what would be really fantastic is for you to make a video about how you did that. I would love to be able to do that on my site, and I am sure that many others would, too.

        It’s not such a big deal really, since Nori is still a great theme. Yet, if people clearly understood exactly how to do that and could add that functionality to their sites, there really would be very few themes out there who could compete with the Nori theme.

        Just a thought.

    • @Klt: I haven’t tried it myself but I think changing the following line (30) in the content.php file should work:

      <?php the_content( __( 'Continue Reading', 'nori' ) ); ?>
      

      in

      <?php the_excerpt(); ?>
      

      Hope it helps,
      Ellen

  26. Jörg Helfmann

    Hallo,

    ein tolles Theme. Habe es gekauft und bisher nicht bereut. Allerdings frage ich mich, ob es möglich ist, unter den Titeln der einzelnen Artikel auch die Tags aufzulisten? Denn die Angabe, mit welchen Tags die Artikel versehen sind, fehlt mir schmerzlich.

    Schönen Tag,
    Jörg

    • Hallo Jörg,

      danke für dein Feedback zum Nori Theme, das freut mich. Auf den Einzelartikeln werden die Tags ja schon angezeigt, sofern welche eingetragen sind. Möchtest du die Tags auch auf der Blog-Startseite anzeigen, könntest du den folgenden Code in der content.php Datei (z.B. unter post-comments) einfügen:

      <?php $tags_list = get_the_tag_list( '', ', ' ); 
      if ( $tags_list ): ?>	
      <li class="tags"><?php _e('Tags:', 'nori') ?></span> <?php the_tags( '', ', ', '' ); ?></li>
      <?php endif; ?>
      

      Viele Grüße,
      Ellen

      • Jörg Helfmann

        Hallo Ellen,

        herzlichen Dank für die schnelle Antwort. Toller Support, auch wenn die Kommentare dafür ja sicher eigentlich nicht gedacht sind. ;-)

        Ich werde es ausprobieren, wie es optisch wirkt und welchen Nutzen es letztendlich hat. Man sollte auch nicht zuviel verschlimmbessern, an sich ist das Nori ja schon recht hübsch und schlicht.

  27. Hallo zusammen,

    ich verwende das Theme überwiegend als Fotoblog. Noch erkunde ich die Möglichkeiten, bin aber bereits jetzt zufrieden.

    Fazit:
    Klasse Theme. Klasse Anleitung. Klasse Preis.
    Für mich eine absolut runde Sache.

    Grüße
    Yassin

  28. Hi Ellen,

    Greetings from England.

    Great theme. Thank you very much. Our regular visitors have mixed reactions because they are familiar with “normal” blog layouts and Nori is clean and structured. They will soon love it too, I am sure!

    Yesterday I asked you some questions by email. I hope you find time to respond in your busy schedule.

    I have learned many tips from the previous comments above (thank you, Google translate!). But there are two problems I want to mention:

    1 – Nori does not load in IE8. We have received three bug reports.

    2 – On theme options Admin panel, the option “Hide Search Form” for mobiles also hides the search form on large screens.

    Many thanks for an excellent technical theme. And Nori persuaded us to make the switch to “mobile first” after 6 years of using a fixed width theme. Congratulations to you!

    Best wishes,
    Danny

    • Hi Danny,

      thanks for your great feedback, I’m happy that you like the Nori theme and the mobile-first approach.

      1. Did you use a Child theme? Because of the respond.js the CSS of the parent theme needs to be included without the @import (und just pasted above the child theme CSS instead), this could have caused the IE8 bug.

      2. I just tested the search form theme option again here on our blog and it works fine here. I might have to test it in the live demo again, I will do that…

      Best regards,
      Ellen

      • Jörg Helfmann

        “On theme options Admin panel, the option »Hide Search Form« for mobiles also hides the search form on large screens.”

        Same here in my two installations of Nori. The search form disappears at all screen sizes. Do you need more information, Ellen?

        • @Danny, @Jörg Helfmann:

          sorry here, that was a misunderstanding from my side in the first place and also probably not the best explanation of the “Hide search form option” in the Nori theme options settings.

          The option actually means to hide the header search form on desktop and on mobile devices all together. I should have placed the explanation “and at the bottom of the main menu on mobile devices” in (…) because it should only be an additional explanation so users understand that the search form will switch its place. So sorry about that.

          All the Best,
          Ellen

  29. Hallo,
    bin immer noch ein großer Fan von Nori, versuche es gerade für eine 2. Website anzupassen. Dabei eine Frage: Wie kann ich am besten erreichen, dass der Blogtitel und der Slogan auch im Header erscheinen, wenn man ein custom Logo verwendet? Ich würde mir wünschen, dass das die beiden Schriftzüge entweder nach rechts Floaten, oder unter dem Logo zu liegen kämen.
    Ist das auf einfach Weise möglich? Danke,

    :)
    Wolfgang

  30. Jörg

    Seit dem letzten Update von WordPress oder dem Update der von mir eingesetzten NextGEN Gallery auf Version 2.0.7 (weiß nicht genau, wer nun “Schuld hat”) habe ich das Problem, dass der Abstand der Buchstaben bei Absätzen, in welchen ein Foto über die NextGEN Thumbnails eingefügt ist, erheblich enger ist als dort, wo kein Foto im Absatz platziert ist. Hat jemand eine Idee, was ich dagegen tun kann? Es schaut doch sehr unschön aus. Beispiel: http://hybrid-piloten.de/3339/fahrbericht-toyota-yaris-hybrid-2012/

  31. Liebes Team,
    wenn ich im Stylesheet die Hauptschriftart ändere, so wird nur im Suchformular wie auch auf dem “Senden”-Button bei den Kommentaren die Schrift nicht verändert. Wo könnte ich das noch beheben?

Schreibe eine Antwort