Support » Themes » Mobile Anzeige twentyfourteen

  • Hallo zusammen,
    ich habe das Forum jetzt eine Weile durchstöbert und komme leider nicht zum gewünschten Ergebnis.

    Mein Problem ist folgendes:
    Ich möchte das Theme twentyfourteen anpassen, dahingehend finde ich auch tatsächlich immer die passende Antwort in diversen Foren, oder eben hier.

    Meine Seite befindet sich noch komplett im Aufbau und ich mache mich noch mit WordPress vertraut. Ein Child-Theme habe ich mir bereits erstellt.

    Ich würde gerne die Sidebar anpassen.

    Funktioniert auch soweit, jedoch habe ich Probleme mit der background-color auf meinem mobilem Gerät.
    Dort wird die Sidebar ans untere Ende der Seite verschoben und verliert meine vorher definierte background-color, springt also wieder zurück auf die Standardfarbe.
    Meine Vermutung, dass die Sidebar über diverse Funktionen in den Footerbereich gelegt wird war leider falsch.

    Ich bräuchte also eine Lösung dafür, wie ich die Farbe auch dahingehend anpassen kann, dass sie auf meinem mobilem Gerät meiner Wunschfarbe entspricht.

    Ich danke schonmal für Eure Lösungen.

    Gruß Matze

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Das Theme verwendet eine Media-Query, die bei einer Größe von mindestens 1080 Pixeln eine andere Gestaltung zuweist.

    D.h. du findest die Formatierung für kleinere Bildschirme unter #secondary
    und bei größeren Bildschirmen in einer Media-Query (ab Zeile 3694) in Zeile 3734.
    Die Regel für große Bildschirme setzt das Menü auf einen transparenten Hintergrund, der in Zeile 3721 auf schwarz gesetzt wird.

    Rausfinden kannst du das über die Entwickler-Werkzeuge deines Browsers: Rechtsklick > Element untersuchen. Dann siehst du in einem eingeblendetem Fenster links das HTML, rechts das zugehörige CSS, wobei die Zeilennummern des Style-Sheets neben jeder Regel angegeben werden.

    Ein Child-Theme ist nicht wirklich nötig, wenn es nur um ein paar kleinere Design-Anpassungen geht. Das meiste kannst du mit CSS-Regeln ändern, die du dann in einem CSS-Plugin wie Simple Custom CSS ablegst.

    Vielen Dank für die schnelle Antwort, ich denke, dass ich damit gut arbeiten kann 🙂

    D.h. du findest die Formatierung für kleinere Bildschirme unter #secondary und bei größeren Bildschirmen in einer Media-Query (ab Zeile 3694) in Zeile 3734.

    Wenn ich @mattatouille richtig verstehe, geht es ihm nicht um die Formatierung von #secondary, sondern um die rechte Sidebar, oder?

    @mattatouille:
    Falls dem so ist, versuche es mal mit

    .content-sidebar.widget-area {
        background-color: #deinefarbe;
    }

    Das würde dann für alle Viewports gelten.

    Falls ausschließlich für kleine Viewports gewünscht, müsstest du noch eine Media-Query voransetzen, zum Beispiel (Breite von dir anpassbar)

    @media screen and (max-width: 400px) {
      .content-sidebar.widget-area {
           background-color: #deinefarbe;
      }
    }

    Ohne deine Seite vor Augen zu haben, gibts natürlich keine Gewähr, probiers einfach mal aus. Den CSS-Code (mit angepassten Farben) einfach in das von Bego genannte CSS-Plugin eintragen.

    Wenn ich @mattatouille richtig verstehe, geht es ihm nicht um die Formatierung von #secondary, sondern um die rechte Sidebar, oder?

    Oh. Woraus schließt du das?

    Gute Frage 😉
    Ich bin vom CSS-ID- bzw. Klassennamen bei diesem Theme ausgegangen und davon, dass der Fragesteller sich darauf bezieht.
    Aber beim nochmaligen Nachdenken schätze ich, dass er sich doch nicht auf #sidebar bzw. .content-sidebar bezog, sondern tatsächlich auf #secondary. Wusste ich doch, warum ich „Falls dem so ist“ fett ausgezeichnet habe. ;-))

    Is‘ schon Recht! Gute Nacht. 😀

    Danke, dir auch! 🙂

    Beide Antworten haben mich durchaus weitergebracht.
    Danke sehr

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
  • Das Thema „Mobile Anzeige twentyfourteen“ ist für neue Antworten geschlossen.