Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

Der_Bo · 20. Februar 2018

Hallo,

habe diverse Beiträge hier im Forum schon durchgelesen und ausgetestet, leider bisher ohne Erfolg. Ich bin gerade dabei mir das CSS für meine Bedürfnisse selbst beizubringen und habe folgende Frage bezüglich dem Layout meiner Hompepage: www.selbstgezapft.de

Ich möchte die rechte Sidebar gerne so verkleinern bzw. schmaler machen, dass sie rechts mit dem Headerbild abschließt (müssten ohne Zeilenumbruch etwa 210px Breite sein).
Den am linken Rand gewonnenen Platz möchte ich dann gerne nutzen um den Content-Bereich (ich meine den Bereich wo die letzten Beiträge als Vorschau zu sehen sind) entsprechend nach rechts zu erweitern. Geht das? Das die Suche unten kleiner wird wäre kein Weltuntergang.

Vielen Dank schon mal für eure Hilfe!

Liebe Grüße
Oli

PS: So ganz nebenbei. Ich war immer der Meinung man könnte eine Blog-Seite erstellen, auf welcher die aktuellesten Blogeinträge in kompletter (ausführlicher) Textform automatisch eingetragen werden. Vermutlich habe ich diese Seite aber mal gelöscht, denn wenn ich jetzt meinen Blog um einen Beitrag ergänze dann muss ich den Artikel entsprechend auf meiner Blog-Seite reinkopieren. Sehr unelegant. Kann mir einer Abhilfe verschaffen? Hatte dafür ebenfalls schon die Suche bemüht - ohne Erfolg

Der_Bo · 20. Februar 2018

Ich meine natürlich das MERCIA Theme!!!

b3317133 · 20. Februar 2018

Zitat von Der_Bo: ↑

man könnte eine Blog-Seite erstellen, auf welcher die aktuellesten Blogeinträge in kompletter (ausführlicher) Textform automatisch eingetragen werden..
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ob komplett oder nicht, liegt am Theme, die Seite stellt man unter Einstellungen -> Lesen -> Deine Startseite zeigt ein.

Die Breite von Content und Sidebar wird per CSS festgelegt, mehr dazu hier.

Sailor56 · 20. Februar 2018

Mit dem vorhanden Grid Layout lässt sich das Breitenverhältnis zwischen der rechten und dem linken Spalte mit

#content {
grid-template-columns: 8fr 2fr;
}

einstellen! Das sollte natürlich ins 'zusätzliche CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

Für mehr Informationen siehe - https://www.w3schools.com/cssref/pr_grid-template-columns.asp

NACHTRAG / ERGÄNZUNG.

Da das Theme responsive ist, muss die obige CSS Anweisung in eine MediaQuery eingefügt werden...

@media only screen and (min-width: 57.5em) {
#content {
grid-template-columns: 8fr 2fr;
}
}

damit es auch bei allen Bildschirmbreiten richtig angezeigt wird

Der_Bo · 20. Februar 2018

Wo genau?

NACHTRAG / ERGÄNZUNG.

Da das Theme responsive ist, muss die obige CSS Anweisung in eine MediaQuery eingefügt werden...

@media only screen and (min-width: 57.5em) {
#content {
grid-template-columns: 8fr 2fr;
}
}

damit es auch bei allen Bildschirmbreiten richtig angezeigt wird
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Vielen Dank erst mal an euch beide für die Tipps! Das sieht ja schon mal super aus so. Bei mir wird es momentan ohne diese Media Ergänzung auf dem Smartphone auch gut angezeigt. Zur Sicherheit möchte ich deine Änderung aber vornehmen. Wo genau gebe ich diese @media only screen and... denn ein? Brauche ich da eine neue .php oder ergänze ich das einfach in der styles.css?

Liebe Grüße und vielen Dank noch mal!

Der_Bo · 20. Februar 2018

Zitat von b3317133: ↑

Ob komplett oder nicht, liegt am Theme, die Seite stellt man unter Einstellungen -> Lesen -> Deine Startseite zeigt ein.

Die Breite von Content und Sidebar wird per CSS festgelegt, mehr dazu hier.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Vielen Dank für den Hinweis. Das war damit aber gar nicht gemeint. Ich meinte, dass auf der BLOG-Seite (also wenn der Benutzer im Menü auf die Seite "Blog" klickt) die neuesten Einträge in vollständiger Länge erscheint, ohne dass ich es extra jedes mal auf die Seite kopieren und einfügen muss...Ich meinte, dass das am Anfang ohne Probleme ging, ich die Seite aber ausversehen gelöscht habe...

Der_Bo · 20. Februar 2018

Zitat von Sailor56: ↑

@media only screen and (min-width: 57.5em) {
#content {
grid-template-columns: 8fr 2fr;
}
}

damit es auch bei allen Bildschirmbreiten richtig angezeigt wird
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Irgendwie kam meine Antwort in den Filter für den Mod, daher noch mal: Vielen Dank erst mal euch beiden für die Hilfe. Die Lösung von Sailor sieht perfekt aus. Genau so wollt ich es. Meine Frage wäre: Wo muss das mit dem @media denn hin? Kommt das einfach auch in die style.css? Ich arbeite mit einem Child-Theme, daher nehme ich die Änderungen immer dort vor... Ich kann die Auswirkungen der @media nicht nachvollziehen, da auf meinem Smartphone bereits mit der ersten von dir erwähnten Änderungen alles passt...

Liebe Grüße und Danke für die schnelle Hilfe!

b3317133 · 20. Februar 2018

Die aktuelle Seite "Blog" ist eine ganz normale WordPress "Seite".

Eine automatisch erstellte Blog-Seite (mit kurzen oder langen Einträgen) konfiguriert man normalerweise unter Einstellungen -> Lesen -> Deine Startseite zeigt. Bei Dir ist das aktuell die Startseite.

Weitere Möglichkeiten ergeben sich ggf. aus Deinen Theme-Einstellungen, der Theme-Dokumentation oder beim Theme-Support.

Der_Bo · 20. Februar 2018

Alles klar, vielen Dank b3317133!

@Sailor, dir sei an dieser Stelle auch gedankt. Irgendwie gehen meine Antworten mit deiner Quote drin nicht raus. Deine @media-Ergänzung scheint es automatisch eingestellt zu haben, jedenfalls passt es lt. Simulation auf allen Geräten in allen Einstellungen... Vielen lieben Dank!!!

Die komplette Homepage hat jetzt diese schmalere Sitebar, so wie es gewollt war. Allerdings funktioniert das nicht, wenn man auf die einzelnen Einträge klickt, z.b. hier: https://www.selbstgezapft.de/2018/02/20/recherche-tipps-fuer-die-selbstgebaute-zapfanlage/ dann ist die Sidebar noch breit. Wie kann ich das für alle Einträge ändern?

Liebe Grüße!

Sailor56 · 20. Februar 2018

So wie ich das sehe, ist auf der Seite, auf der die Proportionen nicht sind, wie du es möchtest, zusätzliche Elemente im HTML Code eingefügt, die nicht zum Grid-Layout passen.
Im Grundaufbau sollte es so sein, dass du ein Elternelement hast (Grid Container) für dessen Kindelemente du das Grid definierst... in deinem Fall auf der funktionierenden Seite etwa so:

<div id="content"....> <- das ist der Grid Container - mit der Anweisung, die du im CSS gemacht hast
<section id="primary"...>...</section> <- die linke Spalte ... 8fr
<section id="secondary"...>...</section> <- die rechte Spalte ... 2fr
</div>

dazu ein Bild, wie es in deinem Quellcode richtig aussieht!

Auf der fehlerhaften Seite hast du nun den HTML Code anders aufgebaut... etwa so:

<div id="content"....> <- das ist der Grid Container - mit der Anweisung, die du im CSS gemacht hast
<section id="primary"...>...</section> <- das ist nicht die linke Spalte, sondern hier kommt jetzt der graue Kasten 'Recherche Tipp...'
<main id="main"...>
<article id="post-289"...>
<section class="single-header"...>...</section>
<section id="primary"...>...</section> <- die linke Spalte ... aber eben nicht mehr mit 8fr
<section id="secondary"...>...</section> <- die rechte Spalte ... aber eben nicht mehr mit 2fr
</article>
</main>
</section>
</div>

Das was ich rot gekennzeichnet habe gehört da nicht in... ich denke es ist der Eintrag, der eigentlich in der linken Spalte stehen sollte - also der Inhalt von <section id="primary"...>...</section>

Und der dazu passende Screenshot von der fehlerhaften Seite:

Ich hoffe, das war jetzt verständlich... aber in kurz... der HTML Code ist falsch/ nicht passenden zu dem, was du haben willst.

Der_Bo · 23. Februar 2018

Hey Sailor. Danke für deine ausführliche Erklärung. Ich habe jetzt einige Stunden damit verbracht eine Lösung zu finden, meine mangelnden Programmierkenntnisse reichen aber nicht aus :-?

Ich habe jetzt zwei Probleme entdeckt:

1. Entgegen meiner ersten Angabe, dass sich das Style auf der responsiven Ansicht NICHT verändert hat, sieht die Homepage auf dem Smartphone und auf dem Tablet 1:1 so aus wie auf dem Computer. D.h. die Sidebar erscheint jetzt ebenfalls rechts von den Beiträge. Die Seite sieht zwar schön aus, der Text wird allerdings sehr klein. Ich bräuchte also eine Einstellung, welche mir auf dem PC die Sidebar wie eingestellt zeigt und auf Smartphones und Tablets die Sidebar nach unten schiebt. Komischerweise macht es das jetzt automatisch wenn ich zb. am PC das Fenster kleiner ziehe. Auf dem Handy habe ich aber keine Chance... Hast du eine Lösung dafür? Ich vermute es hängt mit dieser min-width zusammen, konnte hier aber keine Lösung finden.

2. Ich verstehe nicht wie ich auf der Beitragsseite den HTML-Code so abändern kann, dass es auch hier passen würde. Ich habe versucht die rot markierten Angaben aus der <section> auszuklammern - ohne Erfolg. Hast du mir eine Art Anleitung, was ich wo ändern müsste? Ich arbeite mit dem MERCIA-Theme und habe alle Änderungen nicht im zusätzlichen CSS von WP vorgenommen sondern ein Child-Theme verwendet. Was muss ich ggf. beachten?

Ich hoffe du findest noch mal die Zeit und Muse dich damit zu befassen, würde es aber auch verstehen wenn "das Maß voll" ist.. Liebe Grüße!

Sailor56 · 24. Februar 2018

Zu deinem Problem Nr 1.! Mir ist aufgefallen, dass in deinem Quellcode (im <head>...</head> Bereich) eine entscheidenden Anweisung fehlt.
Um de Seite für mobile Geräte tauglich zu machen müsste dort...

<meta name=viewport content="width=device-width, initial-scale=1">

als Anweisung stehen. Und das möglichst weit oben.. am besten direkt nach dem <head>.
Da du ja mit einem Child Theme arbeitest, das ist im übrigen ok, wenn du CSS Änderungen auch dort durchführst, kannst in diesem Child Theme - ich vermute in der 'header.php' - die obige Anweisung einfach hineinkopieren! Wenn du da an der richtigen Stelle bist, dann wirst du erkennen, wo es hin gehört! Da sollte irgendwas in der Art...

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>
zu finden sein - und das Rote muss dann sinngemäß bei dir eingefügt werden!
Probiere es und melde dich wieder..

Zu deinem zweiten Punkt habe ich noch keine weitere Idee - ich kenne dein Theme nicht und weiß auch nicht, wie man dort die Beiträge manuell bearbeitet.
Aber hast du nicht gesagt, dass du dort Beiträge manuell hineinkopiert hast, um sie in voller Länge anzeigen zu lassen? ... kann da was schief gelaufen sein?

Der_Bo · 4. März 2018

SUPER! Vielen lieben Dank für deine Hilfe! Bin leider erst heute dazu gekommen es zu ändern, funktioniert aber perfekt!

Zum zweiten Punkt vermute ich stark, dass du recht hast. Ich meine das Wordpress hätte zu Beginn eine eigene Beitragsseite generiert, welche genau so funktionierte wie ich es wollte...Wenn ich einen neuen Beitrag entworfen habe konnte ich auf der Startseite einen Aussschnitt (quasi die Vorschau) auf den neuen Beitrag sehen. Bin ich dann auf die BLOG-Seite gegangen, hatte ich hier den Beitrag automatisch in voller Länge verfügbar. Darunter standen dann die älteren Beiträge ebenfalls in voller Länge. Die Seite habe ich aber ausversehen gelöscht. Ich vermute hier habe ich irgendwas "zerschossen"! Vielen lieben Dank noch mal für deine Geduld und deine ausführliche Hilfe!

Liebe Grüße
Oli

WPDE.org

Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

Der_Bo Member

Anhänge:

Screenshot-2018-2-20 selbstgezapft – Die Seite rund ums Selbstzapfen .jpg

Der_Bo Member

b3317133 Well-Known Member

Sailor56 Well-Known Member

Der_Bo Member

Der_Bo Member

Der_Bo Member

b3317133 Well-Known Member

Der_Bo Member

Sailor56 Well-Known Member

Der_Bo Member

Sailor56 Well-Known Member

Der_Bo Member

Nützliche Suchen

Marcie Theme Sidebar verschieben und Content-Bereich vergrößern

Der_Bo Member

Anhänge:

Screenshot-2018-2-20 selbstgezapft – Die Seite rund ums Selbstzapfen .jpg

Der_Bo Member

b3317133 Well-Known Member

Sailor56 Well-Known Member

Der_Bo Member

Der_Bo Member

Der_Bo Member

b3317133 Well-Known Member

Der_Bo Member

Sailor56 Well-Known Member

Der_Bo Member

Sailor56 Well-Known Member

Der_Bo Member