Weaver II – Layout anpassen

Screenshot des WordPress-Themes "Weaver II"In meinem letzten Beitrag zu Weaver II hatte ich bereits angedeutet, das dieses Theme unglaublich flexibel ist und einen kurzen Screenshhot der Theme-Options gezeigt.

Heute möchte ich ein wenig detaillierter auf die Theme-Options eingehen. Ich beginne mit dem Punkt „General Appearance“, den Sie in den Theme-Optionen finden unter

„Design“ – „Weaver II Admin“ – „Main Options“ – „General Appearance“

Unter diesem Menüpunkt können Sie die Farben für die wesentlichen Bereiche Ihrer Website festlegen: Hintergrund, Wrapper, Main- und Container-Area. Falls Ihnen nicht ganz klar ist, was die einzelnen Bereiche alles umfassen, spielen Sie einfach einmal mit den Farben, dann wird das ganz schnell deutlich. Auch die Farbe des Textes kann unter den „General Appearances“ festgelegt werden.

Wenn Sie die Pro-Version des Themes verwenden, können Sie hier auch festlegen das der Inhaltsbereich Ihrer Website keine feste Breite haben sondern über die gesamte Bildschirmbreite angezeigt werden soll. („Wide Main Area Background“). Das macht am meisten Sinn, wenn auch der Kopfbereich („Header“) und die Fußleiste („Footer“) über die gesamte Bildschirmbreite angezeigt werden.

Weaver II - General Options

Zum Vergrößern bitte Bild anklicken

Wer gern runde Ecken mag, der kann das ganz einfach durch ein entsprechendes Häkchen aktivieren –  getrennt für den Inhaltsbereich und die übirgen Bereiche Ihrer Website wie z.B. Header, Navigationsleiste, Widgets und Footer.

Auch ein Farbverlauf für die Hintergrundfarbe (dunkler oben, nach unten hin heller werdend) oder ein Schatten um die Außenränder der Website sind ganz mit einem Häkchen in dem entsprechenden Bereich auszuwählen.

Weaver II - Runde Ecken und Farbverlauf

Zum Vergrößern bitte Bild anklicken

In der Pro-Version von Weaver II können Sie die Farben für den Beginn und das Ende des Farbverlaufes selbst vorgeben. So ist dann theoretisch auch ein Verlauf von blau zu grün oder von rot zu gelb möglich 🙂

Weaver II - Farbverlauf in der Pro-Version

Zum Vergrößern bitte Bild anklicken

Wer gern einen Rahmen um die Website oder auch nur um den Inhaltsbereich hätte, kann das durch ein einfaches Häkchen festlegen.

In der Pro-Version des Themes können Sie sogar individuell und ohne CSS-Kenntnisse festlegen, wie diese Umrandung aussehen soll: Hier können Sie Farbe, Dicke und Art (solide, gepunktet, …) individuell vorgeben.

Weaver II - Rahmen festlegen

Zum Vergrößern bitte Bild anklicken

Last not least können Sie mit der Pro-Version von Weaver II unter den „General Appearance“ auch das Aussehen des Suchfeldes individuell anpassen.

So können Sie zum Beispiel den Text im Suchfeld vorgeben und einen eigenen Button anstelle der Standard-Lupe verwenden.

Weaver II - Suchmaske anpassen

Zum Vergrößern bitte Bild anklicken

Für jede Option besteht die Möglichkeit, eigenen CSS-Code zu verwenden, ohne dass Sie dafür mühsam nach dem passenden Selektor suchen müssen. Deshalb eignet sich das Theme meines Erachtens auch sehr gut für Einsteiger, die sich bisher noch nicht so recht an eine Anpassung per CSS herangetraut haben.

Weaver II - CSS anpassen

Zum Vergrößern bitte Bild anklicken

Falls Sie bei der Arbeit mit Weaver II Spaß daran entwickeln, das Theme über CSS noch individueler anzupassen und dazu gern ein Nachschlagewerk für die wichtigsten CSS-Befehle hätten, dann werfen Sie doch auch mal einen Blick auf mein eBook mit den HTML- und CSS-Grundlagen.

Haben Sie noch Fragen zum Theme? Dann freue ich mich auf Ihren Kommentar 🙂

Hier finden Sie die weiteren Beiträge zur Serie

  1. Weaver II – Das am meisten unterschätzte WordPress-Theme
  2. Weaver II – Layout anpassen
  3. Weaver II – Layout Teil 2
  4. Weaver II – Schriften festlegen
  5. Weaver II – Widgetbereiche definieren

Bildquelle:
http://weaverthemes.com

Print Friendly

Kommentare

Weaver II – Layout anpassen — 19 Kommentare

  1. Hallo,

    habe das Theme gleich mal ausprobiert und bin sehr begeistert! Ich habe eine kleine Frage, vielleicht ist die Antwort ja ganz einfach 🙂 Auf meinen Seite, wo man z.B. im Archiv mehrere Beiträge aufgezeigt bekommt, da sind die kleinen Auszüge der Beiträge über die voll Bandbreite angezeigt und meine Sidebar ist weg. Zudem werden keine Teaserbilder zu den einzelnen Beiträgen angezeigt. Bin ich einfach blind oder gibt es da keine andere Möglichkeit?

    Vielen Dank schon mal im Voraus!
    Viele Grüße Elisa

    • Hallo Elisa,

      schön, dass Dir das Theme gefällt. Und Deine Fragen sind in der Tag ganz einfach zu beantworten:

      Damit die Archiv-Seiten eine Sidebar haben, gehst Du unter

      Design -> Weaver II Admin -> Main Options -> Layout

      Dort hast Du die Möglichkeit für die einzelnen Seitentypen ein Standard-Layout festzulegen.

      Gehe zu dem Punkt „Sidebar Layout“ und wähle dann bei „Archive-Like Default“ im Dropdown eines der Layouts mit Sidebar (links, rechts, zwei links, zwei rechts oder gesplittet links und rechts stehen zur Auswahl).

      Damit die Teaserbilder angezeigt werden gehst Du auf

      Design – Weaver II Admin – Main Options – Post Specifics

      Relativ weit unten findest Du den Punkt „Featured Images“

      Dort kannst Du angeben, ob die Beitragsbilder nur bei Exzerpt (also bei der gekürzten Fassung z.B. auf der Blog- oder Archiv-Seite) oder auch bei der Vollanzeige des Beitrages angezeigt werden. Du kannst hier auch wählen in welcher Bildgröße (Thumbnail, mittlere Größe, große Größe) das Bild jeweils angezeigt werden soll.

      Damit das Bild auch wirklich angezeigt wird musst Du es bei dem jeweiligen Beitrag als „Beitragsbild“ einstellen (rechte Spalte im Editor, ziemlich weit unten).

      Ich hoffe, das ist so halbwegs verständlich. Sonst gern nochmal nachfragen.

  2. Ich habe mir nach deiner eindringlichen „Reklame“ auf dem Camp Weaver nun mal angesehen. In der Tat kann man da ja viel übers Backend steuern. Aber ich habe mir ein Child-Theme angelegt und Weaver ignoriert hartnäckig einige CSS-Regeln aus diesem Child-Theme.
    U. a. habe ich einen Fonts-Ordner und möchte daraus eine ganz bestimmte Schrift per @font-face laden, die ich dann für meine Headlines verwenden möchte. Weaver ignoriert das und ich kann nur die vordefinierten Font-Listen von Weaver benutzen. Wie bringe ich Weaver dazu, meine CSS-Regeln zu befolgen? Bei anderen Regeln beachtet Weaver das Child-Theme ja auch :o(

    • Hallo Ania,

      Oh weh … „Reklame“ … Jetzt komme ich mir vor wie ein Staubsaugerverkäufer 🙂

      Scherz beiseite: Wie genau hast Du das @font-face in das Child-Theme eingebunden? Über ein @import in der style.css oder auf eine andere Weise?

      Aus eigener leidvoller Erfahrung: Manchmal werden Befehle nicht berücksichtigt, weil man irgendwo vorher eine ) statt } gesetzt hat oder ein ; vergessen. Das kannst Du ausschließen?

      Herzliche Grüße
      Michaela

      • Danke!! Es war zwar alles richtig geschrieben – ABER …

        Ich hab erstmal getestet, ob „Standardfonts“ aus dem Childtheme eingebaut wurden und das klappte. Der Dummie-Fehler: Ich hatte den Fonts-Ordner nicht ins Childtheme kopiert.

        *kicher* Ich finde jedes Mal was Neues, was ich vertüddeln kann. Nun kann ich mir Weaver jedenfalls weiter zu Gemüte führen. Ich hab es auf jeden Fall schon weiterempfohlen an einen Kontakt, die gern ihre Website selbst basteln möchte, aber kein CSS kann. Dafür scheint mir das Theme tatsächlich ideal.

  3. Hallo Michaela,
    ich nutze auch Weaver und finde, man hat wirklich viele Freiheiten und kann es gut anpassen. Allerdings bekomme ich keine Tabellen erstellt, in der alle zwei Zeilen eine andere Hintergrundfarbe verwendet wird. ich habe zwar Sachen wie

    .count tr:nth-child(odd) { background: #f00; }
    .count tr:nth-child(even) { background: #0f0; }

    gefunden, aber bette ich diese in die Seite an, werden sie automatisch gelöscht. No chance. Oder vielleicht doch?

    • Hallo,
      hast Du den Code so in die Custom-CSS-Sektion unter „Advanced Options“ eingetragen oder direkt in die Seiten?

      Direkt auf der Seite müsstest Du den CSS-Code in ein einbetten, hast Du die Tags möglicherweise vergessen?

      Die Klasse .count hast Du für die Tabelle auch vergeben?

  4. Hallo Michaela,
    inspiriert durch Dich und WP-Bistro habe ich mich auch an Weaver II gewagt und meine Website http://rothhardt.web.de auf Weaver II umgestellt. Das Theme bietet ja tolle Möglichkeiten und diese erschlagen einen ja förmlich, aber ich versuche mich durch zu arbeiten. Hier meine Frage; ist es möglich nur den Anmelden-Link im Footer unterzubringen ich meine jetzt nicht die das Meta-Widget.
    Danke und sonnige Grüße aus Calau und dem Spreewald
    Ihr
    Jörg Rothhardt
    http://vital.gesundheit-tipps24.com

    • Hallo Jörg,

      bitte entschuldige, dass ich erst jetzt auf Deinen Kommentar antworte. Leider funktioniert der Link zu rothhard.web.de momentan nicht, so dass ich nicht genau weiß, was Du meinst.

      Führt die Anmeldung zu einem Mitgliederbereich Deiner Website?

      Grundsätzlich lässt sich im Footer nahezu alles unterbringen, wenn es dafür ein geeignetes Widget gibt. Das ist vom Weaver II unabhängig. Wenn ich genau verstanden habe, wofür die Anmeldung benötigt wird kann ich gern schauen, ob ich ein passendes Plugin dafür finde.

      Herzliche Grüße
      Michaela

      • Hallo Michaela,
        danke für Deinen Kommentar bzw. für die Antwort. Der Zugang konnte ja nicht funktionieren wenn ich die Domain falsch angebe. Also meine Schuld! Inzwischen habe ich aber weaver II pro und mich etwas eingearbeitet. Somit habe ich jetzt die Antwort gefunden,
        Ich danke Dir trotzdem für Deine Hilfe und wünsche Dir weiterhin alles Gute. Mach weiter so. Du bist eine große Hilfe für Wordress-Ratsuchende. Habe mir soeben dein Kindle-Buch bei Amazon ausgeliehen.
        Ihnen sonnige Grüße aus Calau und dem Spreewald
        Ihr
        Jörg Rothhardt
        http://vital.gesundheit-tipps24.com

  5. Hallo Michaela,

    endlich, gibt es jemanden der sich die Arbeit macht und dieses einzigartige Theme nach und nach erklärt, auch für so Menschen wie mich die NULL Englisch können.

    Ich freue mich riesig auf Deinen nächsten Beitrag.

    Liebe Grüße Michael

  6. Pingback: Weaver II - Das unterschätzte WordPress-Theme › WordPress-Bistro

  7. Hallo Michaela,

    habe mich auch mit „Weaver II“ versucht. Bin jetzt aber wieder auf das Standard-Theme zurück gegangen, weil ich mit „Page Security by Contexture“ und „Custom Sidebars“ nicht zurecht gekommen bin. Gibt es eine Möglichkeit die beiden Plugins auch mit „Weaver II“ zu benutzen? Das wäre für meine Seite perfekt, da ich meine Urlaubs Bilder nur einem eingeschränkten Benutzerkreis zu kommen lassen möchte. Dazu brauche ich auch viele verschiedene Untermenüs.

    Wenn ich mit „Weaver II Pro“ mir die beider Plugins sparen könnte wäre das noch besser. Leider ist mein Englisch sehr schlecht.

    Vielen lieben Dank
    Rudi

    • Hallo Rudi, Page Security by Contexture habe ich auf einigen Seiten mit Weaver völlig problemlos einsetzen können – Welche Probleme hattest Du denn damit?

      Und „Custom Sidebars“ benötigst Du mit Weaver II nicht mehr, weil Du über „Design“ -> „Weaver Admin“ -> „Main Options“ -> „Widget Areas“ ganz untern „Per Page Widgets“ erstellen kannst, die Du dann auf jeder Seite über die „Weaver II Options for this Page“ anstelle der Standard-Widgetbereiche einsetzen kannst.

  8. Liebe Michaela,
    ich arbeite bereits zum dritten Mal mit Weaver II und teile Deine Meinung, dass dieses Theme jede Menge Möglichkeiten bietet. Trotzdem bin ich jetzt an meine Grenze gestoßen und hoffe, Du kannst mir da weiterhelfen.
    Erstmalig versuche ich das Layout des Header-Bereichs zu verändern. Anstelle eines Titels möchte ich links oben ein anklickbares Logo haben und dann ganz rechts auf der gleichen Höhe Social-Media-Buttons. Dafür habe ich ein Child-Theme erstellt und neben der style.css noch die header.php reinkopiert.
    Das Logo habe ich über die header.php links oben reingebaut. Meine Social-Media-Buttons auch.
    Das Problem, das ich jetzt aber habe, ist, dass die Buttons zwar rechts sind, aber weiter unten. Ich kriege sie nicht mit dem Logo auf die gleiche Höhe. Ich vermute, dass das Logo (welches anstelle des Titels dort steht) einen über die Breite des Headers kompletten Raum einnimmt. Ich verfüge zwar über einige Html-Kenntnisse, aber leider nicht über php-Kenntnisse und erkenne in der header.php nicht, was ich verändern muss. Kannst Du mir da weiterhelfen?

    Anliegend habe ich Dir einen Auszug aus meiner header.php geschickt. Vielleicht habe ich das Logo und die Buttons an der falschen Stelle eingebaut?
    Ich habe die header.php an der Stelle „<h1 id="site-title" direkt hinter "rel home" eingebaut und damit bin dem Tipp eines Tutorial-Anbieters gefolgt.
    Tut mir leid, dass ich soviel geschrieben habe. Ich hoffe, meine Ausführungen sind verständlich. Ich bin im Moment mit "Weaver II" leider etwas gefrustet, weil ich nicht mehr vorwärts komme. Vielleicht hast Du ja eine Idee. Würde mich wirklich freuen.
    Liebe Grüße aus Wuppertal und vielen Dank im Voraus,
    Katya

    • Hallo Frau Knapp,

      damit Logo und Social Buttons in der header.php nebeneinander stehen empfiehlt es sich, mit DIV-Boxen zu arbeiten.

      Konkret könnte das also so aussehen ( statt der eckigen Klammern bitte spizte Klammern verwenden ):

      [div id="headerbox"]
      [div id="logo"]
      Hier das Logo einfügen
      [/div] 

      [div id="socialicons"]
      Hier die Social-Icons einfügen
      [/div]

      [div class="clear"][/div] -> Diese Box ist nötig, damit die übergeordnete Box „Höhe“ bekommt trotz der Float-Elemente

      [/div]

      Und in der style.css sollte das dann so aussehen ( hier die eckigen Klammern durch geschweifte ersetzen {} }

      #headerbox {width: 100%;}

      #logo {width: 48%; float: left;}
      #socialicons {width: 48%; float: right;}

      .clear {clear: both;}

      • Liebe Frau Steidl,

        vielen Dank für Ihre schnelle Antwort auf meine Frage. Ich habe Ihre Tipps befolgt. Leider habe ich meine Socialmedia-Icons immer noch unterhalb des Logos 🙁 . Einen Schriftfehler innerhalb der Dateien habe ich nicht. Das habe ich überprüft.
        Vielleicht liegt es doch an einem vorkonfigurierten Titelbereich bei Weaver, den man vorher verändern muss?
        Liebe Grüße
        Katya Knapp

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren